标签归档:JavaScript

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

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

一个鲜为人知却十分实用的Chrome浏览器使用技巧

Google Chrome是一个非常强大的浏览器。它的地址栏又称OmniBox,将搜索和输入网址合二为一,看似简单,但功能强悍。今天分享一个很少人知道,但却十分强大的Chrome高效使用技巧:Chrome地址栏与JavaScript快捷结合。

下面,以设置使用Chrome地址栏快捷分享当前网页链接到微博的功能为例:

1 在Chrome地址栏中单击鼠标右键,选择最后一项:Edit search engines… (编辑搜索引擎)或者直接将此地址拖到地址栏:chrome://settings/searchEngines

chrome-tip

2 在弹出的设置窗口底部,出现三个编辑框,分别对应:”Add a new search engine”, “Keyword”, “URL with %s in place”. 在这三个框中,分别填入名称(例如:Weibo),快捷字母(例如:wei 可根据个人习惯填入,不与其它重复即可),和以下JS代码:

javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()

chrome-tip (1)

3 点击该窗口的 Done (完成),即完成设置。

下面是如何使用上面的设置。很简单,在你要分享的网页页面,使用鼠标或者键盘中的Ctrl+L快捷键定位到Chrome地址栏,输入刚才设置的字母组合:wei 再Enter回车键,即执行JS代码,浏览器弹出一个小窗口,自动抓取好要分享网页的标题和链接,点击分享即完成分享。

chrome-tip (2)

chrome-tip (3)

这个方法比把JS代码放到书签栏更方便一些,直接在Chrome地址栏里用快捷字母执行JS,更少地依赖鼠标操作,比较受追求效率的人喜欢。由于Chrome的强大同步功能,一次设置,实时同步到云端,以后在其它电脑上登录Chrome浏览器个人账户,无需再设置即可使用。

当然,这个方法本来是用来设置快捷字母调用不同的搜索引擎,比如,我在地址栏里输入 us 空格 即调用Google美国搜索,输入 hk 再加空格,即调用香港Google搜索。

但Chrome的地址栏确实可以设置快捷字母组合调用JS代码,不需要任何插件扩展。至于不同功能的JS代码,我以前分享过不少有用的浏览器JS书签,比如实现快速填写WordPress评论框各种网页社交分享功能,将网页发送到Kindle (Google “send to kindle javascript bookmarklet”)。

Chrome地址栏其实还有更多的技巧和玩法,这个网页甚至介绍了如何用Chrome地址栏OmniBox发送Gmail邮件,搜索Gmail邮件和Google Drive,快速添加Google Calendar(不过有的需要插件支持),无限潜能……

介绍到这里,不安装插件的Firefox只能望洋兴叹了。那可是我曾经最爱的浏览器,哀其不幸,怒其不争……

也欢迎你留言分享你的Chrome使用技巧,要简单,还要实用。

Update: 由 http://royaso.com 博主提供土木坛子亲自试验发现,在Firefox下也可以实现类似的功能,只要将JS代码保存成书签(收藏夹),然后右键修改该JS书签添加关键词(Keyword),以后就可以在地址栏里通过相关关键词调用JS代码,实现与本文中Chrome浏览器一样的功能。

用浏览器书签分享网页到社交网络

JavaScript(JS)是一种脚本语言,功能强大。在浏览器中用JS脚本语言形成的书签(bookmarklet),可以完成很多意想不到的功能,比如用JS书签可以将值得分享的文章链接分享到各大社交网络中去。

大部分社交网络的分享功能都有相应的分享插件,甚至集成到智能手机浏览器中,但用JS书签的方法更简便,甚至可以实现本来没有的功能。iPhone, iPad中的Safari浏览器虽然内置分享到新浪微博、Twitter, Facebook的功能,但只能分享一个网址链接,并且没有集成Google+和腾讯微博,这时候,用JS书签就可以实现。

以下是几段社交分享JS代码,用鼠标左键按住相应名称拖拽到浏览器收藏栏(Safari, Chrome, Firefox, IE)即可,以后在需要分享相应网页的时候,点击相应书签,就可以方便地将网页分享给社交网络中的好友。

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'));

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)}());

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)

新浪微博

javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()

腾讯微博

javascript:(function(){outText='';for(i=0;i<document.images.length;i++){if(outText.indexOf(document.images[i].src)==-1){if(i==0){outText+=document.images[i].src;}else{outText+='|'+document.images[i].src}}};window.open('http://v.t.qq.com/share/share.php?title='+encodeURIComponent (document.title)+'&url='+encodeURIComponent(location.href)+'&appkey='+encodeURI("8cfebbdbe60d4898887bbd17c22f9260")+'&pic='+encodeURI(outText),'_blank','width=608,height=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,location=yes,resizable=no,status=no');})()

博客评论个人信息自动填写代码

博客具有互动性,体现之一就是博客文章的评论内容。来而不往非礼也,对评论者进行回访自然不是一个坏事。然而对别人的博客进行评论时,初次需要填写昵称,邮箱,网址,自然有些麻烦。有没有更简单的方法呢?有!

对于WordPress, Z-Blog, Typecho这三款博客程序,可以将以下三段JS代码各自保存成相应的书签——在浏览器的收藏栏(或叫书签栏)中新建一个书签,内容为各段代码,名称任意。

以后需要填写评论信息的时候就可以点击相应书签,就可以自动填写信息了,再也不会出现写10秒的内容,花30秒去填写评论者个人信息——估计卢松松同学可能就是靠这招来闯遍博客界的评论。

Windows, Ubuntu下的Firefox, Chrome, IE9浏览器均通过验证。请将代码中的评论者名称,邮箱和网址作相应更改,注意引号应该为英文状态下的半角形式。

WordPress的代码如下(对Emblog无效):

javascript:(function(){document.getElementById('author').value='你的昵称'; document.getElementById('email').value='你的邮箱'; document.getElementById('url').value='你的网址';})()

Z-blog的代码如下:

javascript:(function(){document.getElementById('inpName').value='你的昵称'; document.getElementById('inpEmail').value='你的邮箱'; document.getElementById('inpHomePage').value='你的网址';})()

Typecho的代码如下:

javascript:(function(){document.getElementById('author').value='你的昵称'; document.getElementById('mail').value='你的邮箱'; document.getElementById('url').value='你的网址';})()

网上已经有人提到过以上方法,但由于引号状态不为英文状态(可能是由于采用中文雅黑字体导致英文标点发生问题),导致出错,足见天下大事必作于细,写博文亦如此。至于Em-Blog程序,理论上应该也可以实现,但我没有成功过,希望知情人留言贡献,土木坛子替EmBlog博主们先谢谢了。

Update: 受IsayMe博主的指点,上面的三段代码可以合为一段变成一个书签(请将昵称、邮箱和网址作相应更改),代码自动选择博客程序,就不必人肉去查看博客程序类型再决定书签代码了。感谢IsayMe博主,博友力量就是大!

三合一代码如下:

javascript: void function() { var formArray = ["commentform", "comment_form","frmSumbit"], nameArray = ["author", "author", "inpName"], emailArray = ["email", "mail", "inpEmail"], urlArray = ["url", "url", "inpHomePage"]; for (i = 0; i < formArray.length; i++) { var form = document.getElementById(formArray[i]); if (form != null) { var name = document.getElementById(nameArray[i]), email = document.getElementById(emailArray[i]), url = document.getElementById(urlArray[i]); name != null && (name.value = "土木坛子"), email != null && (email.value = "[email protected]"), url != null && (url.value = "https://tumutanzi.com"); break } } return ! 1 } ()

更新:升级版本,一码解决WordPress, Z-Blog, Typecho, Emblog四种博客程序的评论填充问题。感谢 https://leonax.net/ 博主的功劳。请自行修改相应信息:名称、邮箱、网址。


javascript:var myName="你的名称",myEmail="[email protected]",myUrl="http://yourdomain.com";function fillForm(r,e,m,t){if(null!=r){var n=document.querySelector(r);if(null==n)return!1}var u=document.querySelector(e);if(null==u)return!1;u.setAttribute("value",myName);var l=document.querySelector(m);if(null!=l){l.setAttribute("value",myUrl);}var o=document.querySelector(t);return null==o?!1:(o.setAttribute("value",myEmail),!0)};[function(){return fillForm("#commentform","#author","#url","#email")},function(){return fillForm("#comment_form","#author","#url","#mail")},function(){return fillForm("#frmSumbit","#inpName","#inpHomePage","#inpEmail")},function(){return fillForm("#commentform",'input[name="comname"]','input[name="comurl"]','input[name="commail"]')}].some(function(r){return r()});

磨刀不误砍柴工。