非插件和第三方资源社交网站分享按钮代码

许多网站都安装了社交分享按钮,方便浏览者将网页链接分享到相应社交网站,更广度地传播内容。要实现这类功能,对于WordPress博客来说,要么安装插件,要么调用第三方的服务,比如国外的AddThis国内的JiaThis之类的服务。

然而,第三方的服务,一个最大的问题是影响网站速度,国内的服务在国外速度不行,国外的服务在国内速度不行,而且网站在加载的时候,总是需要多加载一些服务,毕竟是第三方的服务。

如果只是局限于Twitter, Facebook, Google+这几个最常用的服务,我这里分享一个不安装插件、不用第三方服务的方法:使用JS书签(Bookmarklet)中的JavaScript代码,把它们做成超链接的形式,放在主题中相应位置,即可实现社交分享功能,由于没有多出来任何页面加载元素,所以完全不影响网页加载速度,并且还能避免被AdBlock之类插件过滤的可能。

原理很简单,把JS代码替换超链接中HTTP链接即可,即href的属性,如下图示:

code

用来替换的三个社交网站JS代码分别如下(完整代码亦可查看本网页的HTML源代码):

Facebook

javascript:var d=document,f='https://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1378393915&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Twitter

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('https://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1' );E=F.createElement('script');E.src='https://platform.twitter.com/bookmarklets/share.js?v=1' ;F.getElementsByTagName('head')[0].appendChild(E)}());

Google+

javascript:void(window.open('https://plus.google.com/share?ur\l='+encodeURIComponent(location), 'Share to Google+','width=600,height=460,menubar=no,location=no,status=no'));

AddThis聚合

javascript:void((function(svc) {var d=document,w=window,p=0,b=function(){if(!p){p=1;if(_atc.xol)_adr.onReady();if(w.addthis_sendto)addthis_sendto(svc||'bkmore',{product:'bmt-'+_atc.ver})}else{p=0;if(_atw)_atw.clb()}};if(!w._atc){var ol=w.addthis_onload||[],o=d.createElement('script');w.addthis_product = 'bmt-250';o.src='//s7.addthis.com/js/250/addthis_widget.js#domready=1&username=bookmarklet';ol.push(b);w.addthis_onload=ol;d.getElementsByTagName('body')[0].appendChild(o)}else b()})())

效果见本网站文章末尾所示。我这里直接用文字标明社交网络名称,当然也可以用相应社交网站的图标来表明。这个方法简单易行,理论上任何HTML网页中间都可以使用,其它的社交网站分享,如果有相应的JS代码,添加起来也是一样的道理。