为Blogger添加“分享&收藏”按钮

国庆在家没事闲着就瞎折腾呗，管它Blogger有没有被封，就算被封了还有绑定了域名仍旧在国内能访问到的站不是？：）

不久前贺西楼曾留言建议我写一篇“关于在Blogger文章下面添加分享代码”的文章。其实我很早就在研究那个Hack了，可是当初与这相关的Hack那时不是国外的就是台湾的（顺便说一下，台湾的Blogger Hacker很厉害哦...）他们使用的社会化分享&收藏网站与我们不同，而调用国内网站的代码Luke又不会写（...好吧我承认我是HTML/CSS/JS小白），所以只好含恨搁在一边...

前两天在搞定为Blogger的评论谈添加表情的Hack后，突然信心爆棚决定再次研究。在参考了Skyvee的相关教程以及经过自己一天时间的艰难摸索后，终于搞定了适合我们国内Blogger使用的分享&收藏Hack。（演示）

目前可用的网站有：Google书签、Favorites.cn、Del.icio.us、QQ书签、Twitter、百度搜藏、Facebook、豆瓣、黑米、噗浪、推推王。由于Luke个人平时只使用Favorites.cn所以对其他流行的相关网站不是很了解，如果你有推荐的其他网站，请在下方留言，有空我会补上的，谢谢！同时也欢迎Hack达人直接提供代码XD

Ok，不知不觉又唠叨了那么多，还是赶紧让我们进入正题吧，Let's hack！

步骤1：控制台-布局-修改HTML，保存下当前模板以备不测，勾选“扩展窗口小部件模板”。

步骤2：查找以下代码（有的模板左右会带<p>和</p>）：

<data:post.body/>

在其下面一行添加以下代码（代码很长，注意复制全）：

<fieldset>

<legend>
<span><strong>收藏本文</strong></span>
</legend>

<div style='text-align:center;'>


<a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title + " "' target='_blank' title='收藏此文到Google'><img src='http://youke.googlecode.com/files/google.jpg'/></a>


<a expr:href='"http://www.favorites.com.cn/post/?description=" + data:post.title + "&urll=" + data:post.url + "&notes"' target='_blank' title='收藏此文到Favorites'><img src='http://youke.googlecode.com/files/favorites.png'/></a>


<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title + ""' target='_blank' title='收藏此文到del.icio.us'><img src='http://youke.googlecode.com/files/delicious.gif'/></a>


<a expr:href='"http://shuqian.qq.com/post?from=3&title=" + data:post.title + "&u=" + data:post.url + "&c="' target='_blank' title='收藏此文到QQ书签'><img src='http://youke.googlecode.com/files/qqshuqian.png'/></a>


<a expr:href='"http://twitter.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='收藏此文到Twitter'><img src='http://youke.googlecode.com/files/twitter.png'/></a>


<a expr:href='"http://cang.baidu.com/do/add?it=" + data:post.title + "&iu=" + data:post.url + "&fr=ien#nw=1"' target='_blank' title='收藏此文到百度搜藏'><img src='http://youke.googlecode.com/files/baidu.gif'/></a>


<script type='text/javascript'>
function fbs_click()
{u='<data:post.url/>';t='<data:post.title/>';window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}
</script>
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' onclick='return fbs_click()' target='_blank'> <img src='http://youke.googlecode.com/files/facebook.gif' title='收藏此文到Facebook'/></a>


<a expr:href='"http://www.douban.com/recommend/?url=" + data:post.url + "&title=" + data:post.title + "&v=1"' target='_blank' title='收藏此文到豆瓣'><img src='http://youke.googlecode.com/files/douban.png'/></a>


<a expr:href='"http://www.hemidemi.com/user_bookmark/new?title="
+ data:post.title + "&url=" + data:post.url + " "' target='_blank' title='收藏此文到黑米'><img src='http://youke.googlecode.com/files/hemidemi.jpg'/></a>


<a expr:href='"http://funp.com/pages/submit/index.php?title="
+ data:post.title + "&url=" + data:post.url + " "' target='_blank' title='收藏此文到推推王'><img src='http://youke.googlecode.com/files/funp.png'/></a>


<a expr:href='"http://www.plurk.com/?qualifier=shares&status=" + data:post.url + " " + "(" + data:post.title + ")"' target='_blank' title='收藏此文到噗浪'><img src='http://youke.googlecode.com/files/plurk.png'/></a>

</div>

</fieldset>

之前已经说了，由于某些原因，难免会出现缺少你使用的网站分享&收藏图标的情况，请见谅。同时已经注明各个网站的代码，请酌情选择代码。

2009.10.06更新：添加了校内人人和开心的代码：

<a expr:href='"http://www.kaixin001.com/repaste/share.php?rtitle=" + data:post.title + "&rurl=" + data:post.url + " &rcontent="' target='_blank' title='收藏此文到开心'><img src='http://youke.googlecode.com/files/kaixin.png'/></a>



<a expr:href='"http://share.renren.com/share/buttonshare.do?link=" + data:post.url + "&title=" + data:post.title + ""' target='_blank' title='转帖此文到校内'><img src='http://youke.googlecode.com/files/xiaonei.png'/></a>

自己找个合适的地方插入吧。

另外，如果是进行过“继续阅读功能”Hack的Blogger，由于会出现两个“<data:post.body/>”产生疑惑，所以可以干脆把上面的代码添加到以下代码之前：

<div style='clear: both;'/>

步骤3:完工保存，享受又一个新鲜的Hack吧。

PS：对于国内用户，这个Hack只能使用在已经绑定域名的Blogger上（演示），不然由于G^F*W对Blogger的特殊“爱戴”，国内收藏网站在接受包含"blogspot.com"字符的URL时是会直接白屏的。

-------------------------------------------------------------------------------------
以上图片和文字均为原创，转载请注明转自Luke瞎折腾！

收藏本文