在pixnet部落格裡增加facebook like 讚按鈕

facebook有需多的外掛元件，可以從facebook developers裡面找到設定並安裝，這裡介紹如何在pixnet blog裡安裝”讚”這個按鈕。

一般不另任設定時，pixnet blog只能固定在某一個區塊顯示＂讚＂按鈕，像是在公告區塊或是左右側欄，不過這樣子並不太好用，而且也不能自動變換要推薦的文章網址（如何取得like button可參考 [分享] 如何在部落格上放入Facebook的「讚」？ ），就像下圖：（facebook plugin like button）

如果要放在其它地方要如何做呢？這裡示範在標題下方依每個標題連結自動產生一個讚的按鈕出來，結果會如下圖。

script的寫法使用pixnet原本就提供的jQuery來插入like button的iframe，然後把script碼放入公告區塊就可以用了，想更改放至其它地方也可依此做更改。

source如下：

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.article-body").each(function(i)
{
//iframe的語法設定可由
//http://developers.facebook.com/docs/reference/plugins/like
//來取得，只需調整href後的參數
    jQuery(this).before('<iframe src="http://www.facebook.com/plugins/like.php?href='+
    encodeURIComponent(jQuery(this).parent().find("ul").find('a').attr('href'))+
    '&amp;layout=standard&amp;show_faces=true&amp;width=600&amp;action=like&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:20px;" allowTransparency="true"></iframe>');
}
 );});</script>

不在首頁顯示的話，可以用以下這個，先判斷是不是blog首頁，不是的話才執行。

<script type="text/javascript">if(location.href.indexOf('/blog')!=location.href.length-5){
jQuery(document).ready(function(){
 
jQuery("div.article-body").each(function(i)
{
 
    jQuery(this).before('<iframe src="http://www.facebook.com/plugins/like.php?href='+
    encodeURIComponent(jQuery(this).parent().find("ul").find('a').attr('href'))+
    '&amp;layout=standard&amp;show_faces=true&amp;width=600&amp;action=like&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:20px;" allowTransparency="true"></iframe>');
}
 );});}</script>