作者doomdied (Died)
看板Blog
標題[分享] FB Like(讚) 萬用版語法 - 無痛導入
時間Fri Oct 1 00:45:47 2010
http://www.died.tw/2010/09/facebook-social-plugins-like-button.html
Facebook之前推出了全新版本的Social plugins，項目還不少，先來
介紹泛用性比較高的Like Button。
在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/zh_TW/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方式，語法相當簡潔乾淨
，我也是用這個方式。
--
上班不務正業的證據
http://died.tw
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.134.16.110
1F：推 terrybob:不推怎麼對得起作者呢？！ 10/01 01:45
2F：推 ss163500:推推! 10/02 16:16
3F：推 mchen11:實用，感謝！ 12/07 14:24
4F：推 hipperlee:超讚!!! :D 01/21 20:46