博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
自己做手做“分享到”小工具
阅读量:4982 次
发布时间:2019-06-12

本文共 2590 字,大约阅读时间需要 8 分钟。

我们经常在网站上看到“分享到”这种工具,该服务提供网页地址收藏、分享及发送的按钮工具,网站的浏览者可以方便的分享到微博和SNS网站,网站主只要添加一段JavaScript即可实现。这也就是SMO—社会化媒体优化(Social media optimization),即通过某种社会化传播方式,运用社会化媒体资源:网络社区、主题论坛等社会化网站(如:开心网,人人网,搜狐白社会,新浪微博)将所浏览的信息分享到各大社会化网络媒体从而带回更多的社会化流量,同时获得高效、快速、广泛的公共传播效果的一整套方法。目前国内比较大的SMO服务提供商包括国内最大网站统计工具CNZZ旗下的Jiathis和bShare,前一段时间百度也内测了百度分享。

这些工具使用起来还是比较方便的是,自定义也很方便,但是部分工具会收集用户发布的信息,比如Jiathis,它会将用户分享的数据先记录到自己的服务器上,这样你的信息就轻易被这些网站所收集。那么从这个方面考虑,自己做手做一个分享工具还是很有必要的。

准备工具

首页确定你的网站数据用户可能会有哪些分享去向,目前国内比较大的就是包括新浪微博、QQ空间、开心网、人人网、豆瓣、腾讯微博,其他所占比例较小,可根据需要选择。

之后要准备这些网站的ICON图标,方便用户变辨识。我这里使用的是豆瓣分享里的原图片。

2011061421582940.png

从上到下依次是QQ空间、新浪微博、MSN、人人网、开心网、腾讯微博、搜狐微博,从优化前端性能考虑,全部合并到同一个图片,新加的ICON也可以合并到该图片中。

各网站都提供了通过url参数来提交分享的功能,以新浪微博为例:

http://service.t.sina.com.cn/share/share.php?url=http://www.cnblogs.com/walkingp/&title=自己做手做一个分享工具&pic=http://ww4.sinaimg.cn/bmiddle/703a0732jw1di6m7hqphjj.jpg

这里共三个参数:url代表网页地址,title是要分享的内容,pic参数为图片地址。跳转到该地址。 

2011061422313271.png

由于分享成功后一般会将此网页关闭,所以建议使用window.open打开要分享的网页。

2011061422325113.png

新浪微博就会显示成功了:

2011061422341052.png

代码很简单,如下:

function $(id){return document.getElementById(id);}var share = {	url: "http://walkingp.com/",	title: "【快速息怒的7个小方法】1、降低你的音量和语速;2、闭上你的的眼睛,可以快速浇灭怒火;3、转转你的脖子,放松心情,缓解僵硬;4、拥抱你自己,用双臂交叉紧紧拥抱自己一下;5、闻闻植物,离健康的绿色植物10厘米左右,深呼吸5次;6、发扬阿Q精神,自我解嘲;7、击掌、跺脚,两三分钟即可。",	pic:"http://ww4.sinaimg.cn/bmiddle/6617a6f4jw1di6x9ghsv7j.jpg"};var sina_links = 'http://service.t.sina.com.cn/share/share.php?url='+encodeURI(share.url)+'&title='+encodeURI(share.title)+'&pic='+share.pic;$('sina').href = sina_links;			var kaixin001_links = 'http://www.kaixin001.com/repaste/share.php?rurl='+encodeURI(share.url)+'&rtitle='+encodeURI(share.title);$('kaixin001').href = kaixin001_links;var renren_links = 'http://***/share/buttonshare.do?link='+encodeURI(share.url)+'&title='+encodeURI(share.title);$('renren').href = renren_links;var douban_links = 'http://www.douban.com/recommend/?url='+encodeURI(share.url)+'&title='+encodeURI(share.title);$('douban').href = douban_links;var tqq_links = 'http://v.t.qq.com/share/share.php?url='+encodeURI(share.url)+'&title='+encodeURI(share.title);$('tqq').href = tqq_links;	var qzone_links = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURI(share.url);$('qzone').href = qzone_links;	var msn_links='http://profile.live.com/badge?url=' + encodeURI(share.url) + '&screenshot=' + encodeURI(share.pic) + '&title=' +encodeURI(share.title); $('msn').href = msn_links;//var baidu_links = 'http://cang.baidu.com/do/add?it=' + encodeURI(share.title) + '&iu=' + encodeURI(share.url) + '&dc=&fr=ien#nw=1';//$('baidu').href = tqq_links;//百度是个流氓公司~~~

转载于:https://www.cnblogs.com/walkingp/archive/2011/06/14/2081035.html

你可能感兴趣的文章
quagga源码分析--通用库thread
查看>>
TJU_SCS_软件测试_homework1——《error impressed me most》
查看>>
样例功能截图
查看>>
log4j2 Filter用法详解
查看>>
关于sql当中的isnull和ifnull的区别
查看>>
08-语言入门-08-5个数求最值
查看>>
mysql常见知识点总结
查看>>
网站添加百度影音的方法
查看>>
Comparsion in JavaScript
查看>>
【转】ubuntu磁盘状态查看(转)--脱离鼠标操作
查看>>
hdu 1237 简单计算器 栈
查看>>
当我们在说微服务治理的时候究竟在说什么
查看>>
CAS(Compare And Swap)
查看>>
JAVA中String类以及常量池和常用方法
查看>>
java
查看>>
Oracle 数据库导入、导出
查看>>
批量修改 表结构
查看>>
MySQL的btree索引和hash索引的区别
查看>>
抽象类和接口有什么区别
查看>>
wc2018
查看>>