作者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