许多网站都安装了社交分享按钮,方便浏览者将网页链接分享到相应社交网站,更广度地传播内容。要实现这类功能,对于WordPress博客来说,要么安装插件,要么调用第三方的服务,比如国外的AddThis国内的JiaThis之类的服务。
然而,第三方的服务,一个最大的问题是影响网站速度,国内的服务在国外速度不行,国外的服务在国内速度不行,而且网站在加载的时候,总是需要多加载一些服务,毕竟是第三方的服务。
如果只是局限于Twitter, Facebook, Google+这几个最常用的服务,我这里分享一个不安装插件、不用第三方服务的方法:使用JS书签(Bookmarklet)中的JavaScript代码,把它们做成超链接的形式,放在主题中相应位置,即可实现社交分享功能,由于没有多出来任何页面加载元素,所以完全不影响网页加载速度,并且还能避免被AdBlock之类插件过滤的可能。
原理很简单,把JS代码替换超链接中HTTP链接即可,即href的属性,如下图示:
用来替换的三个社交网站JS代码分别如下(完整代码亦可查看本网页的HTML源代码):
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)
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条回复
MARK。
我用的是ADDTHIS。
SCRIPT放在HTML最后面用 Async 异步加载,所以不会影响整体网页的速度。
那最后不还是要加载吗?不少国外第三方服务在国内还完全加载不了。第三方的服务也没有办法加速,比如无法用上你自己的CDN。
没区别了, 就算你这脚本能速度加载完, 但是 国内访问FACEBOOK,GOOGLE等都慢,到最后还是要加载。
这里讨论的是会不会影响 页面的加载。
对的,如果加载不了,也用不了。你说得对,我这种方法的话,如果用户没有用分享,是不用加载社交分享的任何东西,而用第三方服务的话,不论用户用不用这个服务,都要加载它们的社交分享服务,显然至少理论上会影响页面加载速度——多出来加载项目。
你的博客不是抄我的代码的么?
真的没有,至少我主观上和行动上都没有。
我是说小赖子
那你得在他的留言下面留嘛,我还以为是说我呢。我上面提到的这些JS代码是网上的,被我拿来用了很多场景,书签JS,地址栏快捷键……
啥代码?我用的是ADDTHIS
之前也写过分享代码,但是最后太懒,还是用了第三方的分享代码
这方法确实比较好!简单,速度快!
坛子兄变身代码君
其实我对JS代码并不懂,都是从网上现抄过来,我活用了一下。
我选择没有分享–,
天哪!!!为什么时间闹鬼了,我为什么是上午10点发的评论!!!
我在英国,用了标准时间。比北京晚8个小时。
才发现–,
除了自己恐怕很少有人会用
对流量大的网站还是有些用的。或许说:万一有呢?反正不影响页面加载等任何东西。
就像那句话:梦想还是要有的,万一实现了呢
赞同路易大叔的观点,基本上个人博客的分享功能除了自己很少有人会分享。不过有却又胜于无,所以我也给自己加上了。
就算别人不用,我自己偶尔也用用,反正没有坏处。
就喜欢这样简单的方法,效果好。已经添加,虽然估计没有人会分享我的文章,那就自己拿来用了。
难得得到你的喜欢。
不会代码,只能用插件的无奈飘过。。。。其实我只是想要一个二维码而已。哈哈。
我这里真是很简单的东西,直接放在主题里面,HTML里面实现的东西。
很少会点分享,说真。。。除非真的很有意思
不奇怪,我其实自己用着,看着有需要的时候,就分享一下给别人。
了解
这个点上还在线呢,是北京时间?
试一下莫非存在违禁词!?
还真的是,评论那一句一直都不行,换一句话就可以。。。
莫非不能说BJ,试了下不是。。。那就是后面句,再试试
嗯,北京时间
还真是后面那一句不行,再试试
你
那
边
晚
上
8
点
多
吧
。
试完了。。。不知后面那句哪里触发了条件,导致评论失败。
奇怪,看来是BUG,触发了什么东西,可能。
我面向国内,自然全部用国内的~至于国际上的,等墙被拆了再说吧~
墙似乎短时期内不会倒,反而会越来越高越来越厚。
厚貌似是肯定的~某走动已经屏蔽了好多无辜站点~
我是多怕自己的文章被乱转到社交网站上啊,都在首页标明谢绝转载了!
咱这种小微流量博客还是不折腾了。
基本上你写在博客上的东西,都是向世界开放的,也许你不想让关注的人已经在默默地关注着呢。
学习了 最近也想去掉多说
曾经短暂用过多说,然后立马就打算永不用这些第三方的东西。
这种东西挺方便的 坛子原来那个自动填写评论信息的JS代码还一直在用 感谢分享 🙂
哈哈,那个JS代码几乎是每个博客作者的必备,不是它我不可能在那么多博客上方便留言~
这个不错,转天替换到我的Blog去。
谢谢分享
没有想到你也会对这种方法称赞,我现在还加了一个聚合的JS,虽然是第三方,但没有分享需求的时候并不在当前页面执行,因此不影响页面加载,只有真正需要分享的时候才执行JS。
现在的插件js都太臃肿了,又最好是原生的,很难平衡。
对的,我这个就是解决了笨重的问题。轻便上阵。
其实分享网站也有小书签的,不需要一个社交网站一个书签。比如bshare,jiathis都有
不错,我去查了一下,确实有,所以,我就加了一个。谢谢。
因为国内的不支持HTTPS,所以我索性就去掉了。回头加个facebook和Google+的
我这里的方法与HTTPS没有任何关系。因为JS执行是在新页面,即使分享服务不是HTTPS也没有关系。你说的那种第三方服务是直接在当前页面执行,如果不是HTTPS就麻烦了。
点击 更多… 过了好久才蹦出来,我还以为没效果……
这个其实是调用了AddThis的服务,所以你如果在国内的话,可能要一段时间才能出来窗口。
学习下,谢啦
分享到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)