網誌新增項目介紹之FaceBook「讚」外掛教學

最近又將我的部落格加了點新東西，簡單介紹如下：

1. 每篇文章底下加了FaceBook的「讚」按鈕，這是看了Facebook官方網頁新推出的「Like Box」功能而改良的，我看了覺得挺有趣的，便想把他安裝到自己的網誌裡頭。

與官方教學的程式碼不同之處是，原本範例是只能放在固定的網頁(例如部落格首頁)，我想要放在每篇文章底下，勢必得動態抓取文章的網址才行。於是我開始動工想用Javascript來抓取目標的url，太久沒寫Javascript了很多語法都忘光光了，只記得應該要用location.href來抓取目前的url，還有用document.write()來印出字串。但是我試了兩個晚上，類似「javascript:document.write(location.href);」的語法在那邊兜來兜去，怎麼試都試不成功，程度實在退化的太多了。

後來終於被我試出來了，原來抓取文章網址要用Blogger內的 data:post.url 語法才行，在此分享給大家：


把下面程式碼貼到想要顯示的地方即可。


<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>


以Blogger為例，登入Blogger 的控制台後，進入「版面配置」的「修改HTML」，勾選「展開小裝置範本」，如果你想要貼在文章開頭處請搜尋這一行：

<b:includable id='post' var='post'> 

然後在這行的下面貼上上面的那坨code就完成了。但如果你要像我一樣貼在文章最後面就要自己尋找位置了(因為每個網誌文章結尾的code都不一樣)，我喜歡貼在最後的原因是因為，你得要看完文章才能決定我寫的這篇「讚」不「讚」阿！放在開頭固然可以吸引人去按，但那對我而言是毫無意義的！我喜歡的是真實的鼓勵而不是那數字上的增減。

2. 文章最後再新增「您或許對這些文章有興趣:」的widget。這個就簡單多了，只要登入「LinkWithin」的官網去填一填資料，馬上就有一段程式碼可以貼了...在此就不多加贅敘。

3. 左欄最下方新增「KOUMIS試聽貼紙」，這是我老弟最近極力推薦的創作歌手，我也覺得挺清新好聽的，所以就放上來幫她打個免費廣告，這也是只要複製貼上以下的程式碼到你想要放的地方就好：


<div id="koumisBlogStick" style="width:160px;height:400px;"></div>
<iframe id="rFrame" width="0" height="0" frameborder="0" src=""></iframe>
<script type="text/javascript" src="http://www.koumis.cc/BlogSticker/js/koumis.js"></script>


大家可以點來聽聽看，真的是很難得一聞的Vocal唷！如果大家還不認識Koumis蓓麗的話，除了可以去她的官方網站瞧瞧或加她的Facebook粉絲外，在此要內舉不避親的推薦我老弟寫的「介紹文」和「CD開箱文」。(我老弟也是愛攝影、愛寫文章的文藝青年！最重要的，他目前還是單身！)


其實還有很多想新增的元素，但是我的網誌開啟速度已經很慢了，不想變得更慢，故在此作罷，其實對我而言，「捨棄」永遠比「留下」要困難的多阿！