存档

文章标签 ‘添加分享按钮’

为博客添加分享按钮

2010年9月24日 sigma 2 条评论 5,331 views

有时,我们想为独立博客添加一个类似于分享到的按钮,以便分享到各种SNS网站添加人气。虽然,现在网上提供这种插件的网站,如addthisonjiathis等,但是,这些网站都是商业网站,为了流量,分享时会跳到上述网站,比较不爽。因此,求人不如求己,自己动手,丰衣足食,于是我搜了一下,看网上有没类似的代码,于是得到下述地址:

http://blog.csdn.net/skymountain/archive/2010/06/25/5694697.aspx

但是,我试用上述代码,发现在我micolog系统里没效,几番更改代码,终于出现了分享按钮图标,但是除图标外,还有一堆文字,看着不美观。于是,我再对代码进行修理,最终得到如下代码,其效果见本文标题下面:

 function ShareCode(server_url, server_icon_url,text){
    var title = encodeURIComponent(document.title.substring(0,76));
    var url = encodeURIComponent(location.href);
    server_url = server_url.replace("{title}",title);
    server_url = server_url.replace("{url}",url);

    return "<a href=\"javascript:window.open(\'"
    + server_url
    +"'); void 0\" title =\"" + text + "\"><IMG alt="
    + text + " src=\""
    + server_icon_url
    + "\"><\/a>"
}
function WriteSNS()
{
    document.writeln(ShareCode("http://share.renren.com/share/buttonshare.do?title={title}&link={url}",
    "http://s.xnimg.cn/favicon-rr.ico?ver=2",
    "Share to Renren"));

    document.writeln(ShareCode("http://www.kaixin001.com/repaste/share.php?rtitle={title}&rurl={url}",
    "http://www.kaixin001.com/favicon.ico",
    "Share to Kaixin"));

    document.writeln(ShareCode("http://v.t.sina.com.cn/share/share.php?title={title}&url={url}",
    "http://t.sina.com.cn/favicon.ico",
    "Share to SinaMicroblog"));

    document.writeln(ShareCode("http://www.douban.com/recommend/?url={url}&title={title}",
    "http://t.douban.com/favicon.ico",
    "Recomend to Douban"));

    document.writeln(ShareCode("http://apps.hi.baidu.com/share/?title={title}&url={url}",
    "http://www.baidu.com/favicon.ico",
    "Forword to BaiduHi"));

}
 

相比于原作者的代码,我做了以下改动:第一,设置分享打开页面为浏览器默认设置,而不会跳转到新的窗口;第二,对打开参数进行精简;第三,删除了按钮旁的文字进行,更加美观;第四,函数不是封装成div,这样可以更方便的贴到某一行内。

使用方法也很简单,在页面的任何一处假如js引用代码:

 <script type="text/javascript" src="/share.js"></script> 

在需要插入分享按钮的地方加入js函数调用代码即可:

 <script type="text/javascript">WriteSNS();</script>

无觅相关文章插件,快速提升流量