简单制作网页分享按钮-阿里云开发者社区

开发者社区> sp42> 正文

简单制作网页分享按钮

简介: 话说这是一个人际互联的时代,SNS 类的社交网络大行其道。页面作为一种资源怎么不会参与到社交网络的分享中呢?于是我们看到页面都会提供一个分享功能,如我正在写的 CSDN 博文,出来就会有: 虽然现在有不少服务是专门做些分享按钮的,功能比较强大,包括统计的功能也有,但 Google 一番之后,发现其原理无非就是几张 icon 图片+连接,简单得很——于是就想自己来干,过把手瘾。
+关注继续查看

话说这是一个人际互联的时代,SNS 类的社交网络大行其道。页面作为一种资源怎么不会参与到社交网络的分享中呢?于是我们看到页面都会提供一个分享功能,如我正在写的 CSDN 博文,出来就会有:

虽然现在有不少服务是专门做些分享按钮的,功能比较强大,包括统计的功能也有,但 Google 一番之后,发现其原理无非就是几张 icon 图片+连接,简单得很——于是就想自己来干,过把手瘾。

最后我的实现起来,比上述的都要简单,也不想搞那么复杂,没有写任何 JS。另外,为适应我自己的类库,我用 JSP 的 Tag Files 封装了一下,定义了相关接口。

<%@tag pageEncoding="UTF-8" description="文章功能模块"%>
<%@ attribute name="title" required="false" description="文章标题"%> 
<%
	// JSP 获取当前页面的 URL
	int srverPort = request.getServerPort();
	String currentPage_url = request.getScheme() + "://" + request.getServerName();
	if(serverPort != 80){
		currentPage_url += ":" + serverPort;
	}
	currentPage_url += request.getRequestURI() + "?" + request.getQueryString();
%>
HTML 部分:
<div class="share">
	<a title="转发至QQ空间" charset="400-03-8" id="s_qq"
		href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%=currentPage_url%>"
		target="_blank"><img
		src="http://static.youku.com/v1.0.0691/v/img/ico_Qzone.gif" /></a>
	<a title="转发至人人网" charset="400-03-7" id="s_renren"
		href=http://share.renren.com/share/buttonshare.do?link=<%=currentPage_url%>&title=<%=title%>
		target="_blank"><img
		src="http://static.youku.com/v1.0.0691/v/img/ico_renren.gif" /></a>
	<a title="转发至新浪微博" charset="400-03-10" id="s_sina"
		href="http://v.t.sina.com.cn/share/share.php?appkey=2684493555&url=<%=currentPage_url%>&title=<%=title%>&Uid=&source=&sourceUrl="
		target="_blank"><img
		src="http://static.youku.com/v1.0.0691/v/img/ico_sina.gif" /></a>
	<a title="分享到腾讯朋友" charset="400-03-19" id="s_pengyou"
		href=http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url=<%=currentPage_url%>&title=%<%=title%>
		target="_blank"><img
		src="http://static.youku.com/v1.0.0691/v/img/ico_pengyou.png" /></a>
	<a title="推荐到豆瓣" charset="400-03-17" id="s_douban"
		href=http://www.douban.com/recommend/?url=<%=currentPage_url%>&title=<%=title%>
		target="_blank"><img
		src="http://static.youku.com/v1.0.0691/v/img/ico_dou_16x16.png" /></a>
</div>	

一般的分享链接只需要两个参数就行,一是页面的标题,另一个就是页面的链接,至于腾讯微博和新浪微博都需要一个 appkey,这个另外再说,如果没有,直接用我提供的这个就行,因为 appkey 需要去申请,过程略微有点麻烦。

我认为,优化的空间无非就是:

一、雪碧图;

二、整理 CSS 为 LESS(是的,当前我已是 LESS 控了)

三、若在手机中,可以调用已安装的客户端吗?如新浪微博,通过 URI Scheme 传递 App ID 和参数。

四、点缀一下,增加 hover 效果

五、需要增加其他 SNS 供应商吗?貌似这些就够了耶~要那么也挺烦的~

六、考虑用 JS 获取 URL 和 title?我现在的是透过 JSP 获取的。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
02_spring_ioc| 学习笔记
快速学习02_spring_ioc
3 0
冬季实战营第一期:从零到一上手玩转云服务器学习总结
冬季实战营第一期:从零到一上手玩转云服务器学习总结
5 0
01_spring_ 简介| 学习笔记
快速学习01_spring_ 简介
8 0
Django框架介绍与安装
软件框架就是为实现或完成某种软件开发时,提供了一些基础的软件产品, 框架的功能类似于基础设施,提供并实现最为基础的软件架构和体系 通常情况下我们依据框架来实现更为复杂的业务程序开发 二个字,框架就是程序的骨架
4 0
03_spring_ioc 实现| 学习笔记
快速学习03_spring_ioc 实现
3 0
python垃圾回收
吃太多,总会变胖,Python也是这样。当Python中的对象越来越多,它们将占据越来越大的内存。不过你不用太担心Python的体形,它会乖巧的在适当的时候“减肥”,启动垃圾回收(garbage collection),将没用的对象清除。在许多语言中都有垃圾回收机制,比如Java。尽管最终目的都是塑造苗条的提醒,但不同语言的减肥方案有很大的差异 。
4 0
06_spring_ 依赖注入| 学习笔记
快速学习 06_spring_ 依赖注入
4 0
05_spring_ 配置文件| 学习笔记
快速学习05_spring_ 配置文件
3 0
04_spring_ioc 创建对象的方式| 学习笔记
快速学习 04_spring_ioc 创建对象的方式
4 0
初始ECS
物联网学习的硬性需求,我们需要搭建一台自己的服务器,在不断查找资料和方法后,获知阿里云ECS云服务器有学生体验资格,继而我将利用ECS云服务器搭建一个自己的EMQX服务器端。
17 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
294
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载