Javascript on 土木坛子

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

Tue, 12 Jan 2016 08:00:23 +0800

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

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

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

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

用来替换的三个社交网站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浏览器使用技巧

Mon, 18 Aug 2014 06:00:53 +0800

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

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

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

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

3 点击该窗口的 Done （完成），即完成设置。

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

这个方法比把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浏览器一样的功能。

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

Fri, 06 Sep 2013 06:00:12 +0800

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

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

Mon, 10 Oct 2011 00:04:42 +0800

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

对于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 = "youremail@gmail.com"), url != null && (url.value = "https://tumutanzi.com"); break } } return ! 1 } ()

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