给Z-Blog添加社会化分享按钮

在网上看到一则精彩的资讯，然后点击一下鼠标，这则资讯就会自动发布到你经常混的新浪微博、人人网、开心网、 Twitter、Facebook等网站，这是不是很酷？没错，社会化分享这个应用越来越火了。

我在这篇文章里尝试和大家分享一下如何给Z-BLOG添加社会化分享按钮。当然，现在也有相当多的网站专门提供这项服务，便捷得很。本文所说的，是一种完全DIY的方式。如果你对这种DIY方式感兴趣，不妨尝试一下，体验一把折腾的乐趣。

下面说说操作方法：

1、下载附件并解压。

2、将share.js文件复制到你当前使用的主题文件夹中的script文件夹里。（没有script文件夹的可以自建）

3、将share.png文件复制到你当前使用的主题文件夹中的style/images/文件夹里。

4、将下面这段JS代码复制到你当前使用的主题中的single.html文件顶部的<head>与</head>之间。

<script language="JavaScript" src="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/script/share.js" type="text/javascript"></script>

5、将下面这段内容复制到你当前使用的主题的CSS文件中。

#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url(../script/images/share.png) no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}

6、将下面这段代码复制到你想要显示分享按钮的位置即可（也就是你想在什么位置显示就放在什么位置）。

<div id="share">
    分享到:
    <a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a>
    <a rel="nofollow" id="twitter-share" title="Twitter">Twitter</a>
    <a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
    <a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
    <a rel="nofollow" id="renren-share" title="人人网">人人网</a>
    <a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
    <a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
    <a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
    <a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>

PS：感谢大猪的倾力帮助，方有此文诞生。

奇客情报

导航

给Z-Blog添加社会化分享按钮

发布：奇客情报 – 分类：网事 – 发布时间：2010年11月19日

AdSense