網誌新增項目介紹之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開箱文」。(我老弟也是愛攝影、愛寫文章的文藝青年!最重要的,他目前還是單身!)


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

留言

  1. 有下有推 推一下「FaceBook的讚按鈕」 太強了 連javascript都行 自己開個網頁公司了啦!!
    (BTW,我是聞腋青年非文藝青年XD)

    回覆刪除
  2. 哈哈!我Javascript只懂皮毛,jQuery和AJAX都還不會阿!差的遠了...

    回覆刪除
  3. 你好喔,你的程式很棒呢^^!
    但我想請問說,要怎麼將按讚後會出現一些fb上的人頭
    改掉呢?@@(因為不希望出現一排人頭...
    謝謝你喔!!

    回覆刪除
  4. 你搜尋程式碼中「show_faces=true」這段把他改成「show_faces=false」就可以了!試試看唷!可以記得回報一下(因為我沒試,哈哈)!謝謝你的留言!

    回覆刪除
  5. 謝謝你的分享,已經成功找到怎麼加在文章後面囉:D

    回覆刪除
  6. 也謝謝你的參觀瀏覽! 呵呵 教學相長囉...

    回覆刪除

張貼留言

這個網誌中的熱門文章

[交車篇] 交車驗車注意事項大全

有關C語言的static用法

[購車篇] 新車購買要訣與菜單分享文