分类
信息技术

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

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

“非插件和第三方资源社交网站分享按钮代码”上的57条回复

那最后不还是要加载吗?不少国外第三方服务在国内还完全加载不了。第三方的服务也没有办法加速,比如无法用上你自己的CDN。

对的,如果加载不了,也用不了。你说得对,我这种方法的话,如果用户没有用分享,是不用加载社交分享的任何东西,而用第三方服务的话,不论用户用不用这个服务,都要加载它们的社交分享服务,显然至少理论上会影响页面加载速度——多出来加载项目。

那你得在他的留言下面留嘛,我还以为是说我呢。我上面提到的这些JS代码是网上的,被我拿来用了很多场景,书签JS,地址栏快捷键……

赞同路易大叔的观点,基本上个人博客的分享功能除了自己很少有人会分享。不过有却又胜于无,所以我也给自己加上了。

就喜欢这样简单的方法,效果好。已经添加,虽然估计没有人会分享我的文章,那就自己拿来用了。

还真的是,评论那一句一直都不行,换一句话就可以。。。
莫非不能说BJ,试了下不是。。。那就是后面句,再试试

嗯,北京时间

这种东西挺方便的 坛子原来那个自动填写评论信息的JS代码还一直在用 感谢分享 🙂

没有想到你也会对这种方法称赞,我现在还加了一个聚合的JS,虽然是第三方,但没有分享需求的时候并不在当前页面执行,因此不影响页面加载,只有真正需要分享的时候才执行JS。

我这里的方法与HTTPS没有任何关系。因为JS执行是在新页面,即使分享服务不是HTTPS也没有关系。你说的那种第三方服务是直接在当前页面执行,如果不是HTTPS就麻烦了。

分享到Twitter的代码失效了,无法抓取文章标题和网址了。

我刚才说的是分享到Twitter的浏览器JS书签失效了,现在找到了一个可以用的代码,分享出来。javascript:window.open(‘http://twitter.com/home?status=’+encodeURIComponent(document.location.href)+’ ‘+encodeURIComponent(document.title),’_blank’,’toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350′);void(0)

回复 土木坛子 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注