简单制作网页分享按钮

简介: 话说这是一个人际互联的时代,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 获取的。

目录
相关文章
|
11月前
|
SQL 安全 API
在API 接口的设计中,如何保证数据的安全性和完整性?
在API接口设计中,确保数据安全与完整至关重要。关键措施包括:采用HTTPS协议防数据泄露;强认证机制(如OAuth2/JWT)确保用户授权;敏感数据加密(如AES);签名加时间戳防重放攻击;输入验证防SQL注入等攻击;恰当错误处理避免敏感信息泄露;限频防滥用及DDoS攻击;详尽日志记录助安全审计;数据完整性校验(如哈希比对);版本控制保兼容;严格避免响应中泄露敏感信息;定期安全审计与测试。这些措施共同保障API安全。
1524 0
|
SQL 关系型数据库 MySQL
​​​软件开发入门教程网之​​MySQL LIKE 子句​
​​​软件开发入门教程网之​​MySQL LIKE 子句​
|
XML Shell Android开发
FAQ 笔记
FAQ 笔记
395 0
|
存储 关系型数据库 MySQL
MySQL5.5可以升级到MySQL5.7吗?会有什么问题?底层原理是什么?
MySQL5.5可以升级到MySQL5.7吗?会有什么问题?底层原理是什么?
836 0
|
应用服务中间件 nginx Docker
【Docker系列】使用Docker-compose安装nginx
你想安装的路径,我这里就是放在了/home//里了。在/home/nginx/www目录下放一个静态文件用于测试写入以下内容保存退出。
1029 0
【Docker系列】使用Docker-compose安装nginx
|
程序员 索引 Python
Py之Xlrd:Xlrd简介、安装、使用方法(读取xlsx文件的shee表头名/总行数/总列数、每一行的内容、指定列的内容)之详细攻略
Py之Xlrd:Xlrd简介、安装、使用方法(读取xlsx文件的shee表头名/总行数/总列数、每一行的内容、指定列的内容)之详细攻略
|
开发框架 .NET 数据挖掘
C#开发:csv数据转DataTable
C#开发:csv数据转DataTable
467 0
Qt Designer设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承,styleSheet设置样式。
Qt Designer设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承,styleSheet设置样式。
964 0
Qt Designer设置背景图片、颜色不影响其它组件小技巧,控件层级设置,组件的继承,styleSheet设置样式。
|
机器学习/深度学习 自然语言处理 算法
2022 春招 | 阿里高德算法面试经验宝典(完整流程 助力轻松拿offer)
阿里巴巴高德地图算法岗(方向很多:机器学习,nlp,图像,推荐),主要base北京望京。
1899 0
2022 春招 | 阿里高德算法面试经验宝典(完整流程 助力轻松拿offer)
|
监控 容器
CloudCare容器技术白皮书
DevOps的方法论已经广泛应用到各种有开发,测试,运维团队的场景中,实际落地案例下在资源编排,容器集群管理,镜像仓库管理,容器服务监控上有大量的技术平台和技术栈组合。结合CloudCare在大量企业客户场景下的实际案例,本文整理输出了我们的技术白皮书。
1836 0

热门文章

最新文章