在Facebook Like Button Documentation裡，有一個語法的產生器，可以讓你產生 iframe 跟 XFBML 的語法插入到你的網頁上，但是這樣子Like到的網址都是固定的，所以如果要每篇文章分開計算的話，就要使用一些技巧去達到，網路上的文章大都是教iframe的語法怎麼修改，我這邊直接大放送，把iframe/XFBML的blogger與一般網頁萬用語法都一次說完，基本上只要複製貼上就會動了，讓大家可以無痛導入。
先來介紹Like Button的一些參數
href - 要Like(讚)的網址。
layout - 三個選項，預設為 standard ，可以顯示大頭，剩下兩個 button_count 與 box_count 則沒有大頭圖。
show_faces - 選擇顯不顯示大頭圖。
action - 選擇要顯示'like(讚)'或是'recommend(推薦)'
font - 選擇要用的字形，選項有 'arial'(預設), 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
colorscheme - 選擇色系，選項有 'light'(預設), 'dark'
ref - 設定連結來源以方便追蹤，這個我沒研究
iframe的方式
for blogger：重點為紅色部分，這樣的設定可讓每篇文章有獨立的Like計算，橘色部分則依照需要去修改設定就好。
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&action=like&colorscheme=dark&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;' allowTransparency='true' />
萬用型語法：這個方法使用jQuery去更改iframe所包的網址，各種系統的網頁只要有支援Java Script皆可使用，同樣的重點為紅色部分，橘色部分請依需求修改，另外，這個方式建議使用在該網頁的網址列不會變動的狀況下，因為我是使用jQuery去將現在的網址列指到iframe裡，如果網址列變的話，Like的數據會無法累計。
在<head>與</head>間插入下面的語法
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script language='javascript' type='text/javascript'>google.load("jquery",
"1.4.2");</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#facebook_iframe').attr('src','http://www.facebook.com/plugins/like.php?href='+ location.href +'&layout=standard&show-faces=true&width=530&height=55&action=like&colorscheme=light');
});
</script>
然後在你要放Like(讚)的地方把下面的iframe放上去
<iframe src=''
frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:55px' allowTransparency='true' id="facebook_iframe"></iframe>
XFBML的方式
使用XFBML來呈現，在頁面上會比較漂亮，而且語法也很簡單，使用上會需要在<head>與</head>間插入下面的語法
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true, xfbml: true});
};
</script>
for Blogger：將下面語法插到你要顯示Like Button的地方，重點為紅色部分，如果有預設值之外的設定要設需自行加上(如橘色部分)
<fb:like expr:href='data:post.url' width='800' show_faces='true' ></fb:like>
萬用型語法：這也是使用jQuery去達成在各種網頁都可使用的目的，需在<head>與</head>間插入下面的語法
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script language='javascript' type='text/javascript'>google.load("jquery","1.4.2");</script>
<script type='text/javascript'>
$(document).ready(function(){
$('#fb_like').attr('href',location.href);
});
</script>
然後在要顯示Like Button的地方插入
<fb:like href='' width='800' show_faces='true' id='fb_like'></fb:like>
然後就完成了！！！！！
以blogger使用者來說，個人建議使用XFBML方式，語法相當簡潔乾淨，我也是用這個方式。
另外，如果有任何問題，請留言給我，我會盡量回覆的，希望這篇可以幫上忙。
可以請教如何放在LinkWithin的上方或下方嗎？
回覆刪除(Blogger)
放在 <div class='post-footer'> 之前試試看。
回覆刪除補一個東西，有網友問到要怎麼把Like改成中文的"讚"
回覆刪除只要把載入的js換成這個就好
http://connect.facebook.net/zh_TW/all.js
Oh!~放在 之前會在LinkWithin的下方
回覆刪除不過這樣我已經很滿意了
謝謝大大熱心的回答
祝萬事順心
^ ^
有幫上忙就好了，恭喜 :)
回覆刪除版大你好！
回覆刪除我是使用版大提供的iframe萬用型語法，
但是，我朋友在我的天空部落某文按了讚之後，
在我朋友的facebook出現的，只有該篇文章網址的路徑，
而不是出現該篇文章的中文標題，
我看別人的都是出現文章中文標題的連結，
請問要如何修改呢？
如果遇到facebook不能自動抓到你要的資訊的話，可以利用Open Graph protocol去設定，詳細的介紹請看這篇
回覆刪除http://www.died.tw/2010/10/facebook-open-graph-protocol.html
不然也可以換個方式，不使用讚，而是使用分享，下面這篇有介紹，使用分享的話，Facebook會自動抓比較完整的資料
回覆刪除http://www.died.tw/2009/11/facebook-plurk-twitter.html
不好意思又有問題要請教您
回覆刪除我如果想要把讚換到右邊去要怎麼改?
div style='text-align: right
這樣沒有用 orz
包住like的div設寬度，這樣就看的出來效果了，不然你的div會是一整行。
回覆刪除看到這篇文章我好興奮，
回覆刪除可是.. 我照著步驟做"萬用型" 不論是iframe 或 XFBML，我都不能成功顯示... 不知道為什麼~_~
理論上iframe應該適用於所有頁面，你的網站可以貼上來嗎 ? 研究一下。
回覆刪除