脱离“百度分享/jiathis”自制社会化分享按钮

相信大家都有用过百度的分享按钮或者jiathis的分享按钮，我之前也一直用的百度分享按钮，虽然百度声称他们有足够强大的服务器，能够同时让多少多少用户在线调用，这也就自吹自捧罢了，很多时候我网站的内容一切都就绪了之后，还剩下baidushare一直在那里不停地加载，虽然不影响整体网页的浏览，但这是一种累赘。毕竟太多人用了，再好的服务器也比不上自家的服务器。我还是鼓励大家把能独立的东西尽量独立起来，wordpress的强大是可以做到的，除了头像之外，一切都能做到独立，包括主题，这也是我一直以来不推荐使用插件的原因，一切功能都可以集中到主题来的，这样就减少对wordpress的依赖，使得搬家非常地自由和简单。开场白结束，现在教大家怎么自制社会化分享按钮，替代百度分享和jiathis，使你的网站速度整体如一。同样实行我的“三步骤搞掂”：html/css/js，为了显示的冲突，我也理顺了代码布置的顺序，按照以下的做法做，保你妥妥地成功。

第一：js功能代码，把以下的js放到你网站的js文件中（放最后吧）：

//社会化分享 jQuery(document).ready(function($){//定义好弹窗样式 function getParamsOfShareWindow(width, height) { return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=',(screen.width-width)/2,',top=',(screen.height-height)/2].join(''); }

function bindShareList() { var link = encodeURIComponent(document.location); // 文章链接 var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题 var source = encodeURIComponent('秋叶网络博客'); // 网站名称 var windowName = 'share'; // 子窗口别称 var site = '//www.mizuiren.com/'; // 网站链接

jQuery('.twitter').click(function() { //DOM操作html的class元素 var url = 'http://twitter.com/home?url=' + link + '&text=' + title;//分享网址格式 var params = getParamsOfShareWindow(500, 375); window.open(url, windowName, params);//弹出一个窗口中打开页面 });

jQuery('.renren').click(function() { var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title; var params = getParamsOfShareWindow(626, 436); window.open(url, windowName, params); });

jQuery('.sina').click(function() { var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title; var params = getParamsOfShareWindow(607, 523); window.open(url, windowName, params); });

jQuery('.t_qq').click(function() { var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&source=' + source + '&url='+ link; var params = getParamsOfShareWindow(642, 468); window.open(url, windowName, params); });

jQuery('.qzone').click(function() { var url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + title + '&url=' + link + '&site=' + site; var params = getParamsOfShareWindow(634, 468); window.open(url, windowName, params); }); } bindShareList();//调用 });

第二：css样式代码（非常简练），把以下css代码加到你的网站的css文件内（加到最后吧）：

/*分享按钮*/ .share{padding:5px;text-align:left;} .share span{float:left;margin:0 15px 0 0;} .share span.txt{margin:0;} .share a{background:url("images/icon.gif") no-repeat 0 0;display:block;padding:0 0 0 18px;height:16px;line-height:16px;color:#0066CC;overflow:hidden;margin:2px 0 0;text-decoration:none;float:left;} .share a:hover{color:#E05C23;} .share .twitter{background-position:0 -16px;} .share .renren{background-position:0 -32px;} .share .qzone{background-position:0 -48px;} .share .t_qq{background-position:0 -64px;}

注意到红色的地方吗，这个要调用图片地址，请保存这张图，放到自己的空间上，然后调用处修改成自己的地址。 第三：html代码，把以下html代码放到你要显示分享按钮的地方（比如文章末尾处）：

<div class="share clearfix"> <span><a class="t_qq" title="分享到腾讯微博">腾讯微博</a></span> <span><a class="sina" title="分享到新浪微博">新浪微博</a></span> <span><a class="twitter" title="分享到Twitter">Twitter</a></span> <span><a class="renren" title="分享到人人网">人人网</a></span> <span><a class="qzone" title="分享到QQ空间">QQ空间</a></span> </div>

具体效果可以看看我文章后面的分享按钮。当然你也可以扩展，把它设置成各种样式，侧边栏，浮窗等等。ps：虽然这功能不一定用得上，貌似也很少人会点，但按照我的习惯，我是看到好文章都会通过社会化分享按钮分享到qq空间。没事就备一个这种东西给我用吧~好文章总会有人愿意分享的，比如说，你可以点击这篇文章分享~