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

土木坛子

January 12, 2016

许多网站都安装了社交分享按钮，方便浏览者将网页链接分享到相应社交网站，更广度地传播内容。要实现这类功能，对于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代码，添加起来也是一样的道理。

It-Related