当前位置: 秋叶网络博客 网络技术 ◊ 脱离“百度分享/jiathis”自制社会化分享按钮

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

作者:秋了秋 发表时间:2014年11月05日

相信大家都有用过百度的分享按钮或者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 = 'http://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空间。没事就备一个这种东西给我用吧~好文章总会有人愿意分享的,比如说,你可以点击这篇文章分享~

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/166.html
目录: 网络技术 | 标签: Wordpress分享按钮 | 9396次阅读