FB Like(讚) 萬用版語法 - 無痛導入 - 部落格

By Joe
at 2010-10-01T00:45

Table of Contents

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/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方式，語法相當簡潔乾淨
，我也是用這個方式。

--
上班不務正業的證據
http://died.tw

--

Tags: 部落格