简明现代魔法 -> web设计理念 -> 社会化分享功能的实现

社会化分享功能的实现

2011-06-14

随着社会化应用的火爆,社会化分享也慢慢开始热起来了。从国外的AddThis,到国内的JiaThis,还有最近才出来的百度分享等等。

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

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

效果演示

分享到:新浪微博 开心网 人人网 豆瓣 腾讯微博 QQ空间 MSN

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

之后要准备这些网站的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参数为图片地址。跳转到该地址。 由于分享成功后一般会将此网页关闭,所以建议使用window.open打开要分享的网页。

代码很简单,如下:

<script type="text/javascript"> 
function $(id){return document.getElementById(id);}
var share = {
	url: "http://www.nowamagic.net/",
	title: "欢迎访问简明现代魔法",
	pic:"http://www.nowamagic.net/images/1.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.renren.com/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;
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们