Thursday, September 30, 2010

[Facebook] Social plugins - Like Button 無痛導入

作者：
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='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=dark&amp;height=35&quot;' 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 +'&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=55&amp;action=like&amp;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方式，語法相當簡潔乾淨，我也是用這個方式。

另外，如果有任何問題，請留言給我，我會盡量回覆的，希望這篇可以幫上忙。

創用 CC 授權條款本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 3.0 台灣 授權條款授權.
at 17:55 作者： Labels: , ,

27 comments:

  1. ntmeOctober 2, 2010 at 5:20 PM

    可以請教如何放在LinkWithin的上方或下方嗎？
    (Blogger)

    ReplyDelete
  2. DiedOctober 2, 2010 at 8:04 PM

    放在 <div class='post-footer'> 之前試試看。

    ReplyDelete
  3. DiedOctober 2, 2010 at 9:03 PM

    補一個東西，有網友問到要怎麼把Like改成中文的"讚"
    只要把載入的js換成這個就好
    http://connect.facebook.net/zh_TW/all.js

    ReplyDelete
  4. ntmeOctober 2, 2010 at 9:43 PM

    Oh!~放在 之前會在LinkWithin的下方
    不過這樣我已經很滿意了
    謝謝大大熱心的回答
    祝萬事順心
    ^ ^

    ReplyDelete
  5. DiedOctober 2, 2010 at 9:50 PM

    有幫上忙就好了，恭喜 :)

    ReplyDelete
  6. UnknownNovember 23, 2010 at 4:57 PM

    版大你好！
    我是使用版大提供的iframe萬用型語法，
    但是，我朋友在我的天空部落某文按了讚之後，
    在我朋友的facebook出現的，只有該篇文章網址的路徑，
    而不是出現該篇文章的中文標題，

    我看別人的都是出現文章中文標題的連結，

    請問要如何修改呢？

    ReplyDelete
  7. DiedNovember 23, 2010 at 5:11 PM

    如果遇到facebook不能自動抓到你要的資訊的話，可以利用Open Graph protocol去設定，詳細的介紹請看這篇
    http://www.died.tw/2010/10/facebook-open-graph-protocol.html

    ReplyDelete
  8. DiedNovember 23, 2010 at 5:14 PM

    不然也可以換個方式，不使用讚，而是使用分享，下面這篇有介紹，使用分享的話，Facebook會自動抓比較完整的資料
    http://www.died.tw/2009/11/facebook-plurk-twitter.html

    ReplyDelete
  9. NikoJune 21, 2011 at 10:53 PM

    不好意思又有問題要請教您
    我如果想要把讚換到右邊去要怎麼改?

    div style='text-align: right

    這樣沒有用 orz

    ReplyDelete
  10. DiedJune 22, 2011 at 12:55 AM

    包住like的div設寬度，這樣就看的出來效果了，不然你的div會是一整行。

    ReplyDelete
  11. zachJune 26, 2011 at 6:27 PM

    看到這篇文章我好興奮，
    可是.. 我照著步驟做"萬用型" 不論是iframe 或 XFBML，我都不能成功顯示... 不知道為什麼~_~

    ReplyDelete
  12. DiedJune 29, 2011 at 1:38 AM

    理論上iframe應該適用於所有頁面，你的網站可以貼上來嗎 ? 研究一下。

    ReplyDelete
  13. sakuraismAugust 12, 2012 at 4:57 PM

    您好：你的教學受益良多。

    請問使用blogger＋XFBML之下
    like按鈕會先變成confirm再按第二次才會貼到按讚的人的塗鴉牆上
    請問該如何修改呢？
    謝謝

    http://sakuraism-caminodesantiagoinside.blogspot.tw/2012/08/zubiri.html

    以及前面有網友說要把按鈕改到右邊，是否可以再說清楚一點，謝謝

    ReplyDelete
  14. DiedAugust 12, 2012 at 5:17 PM

    https://developers.facebook.com/docs/reference/plugins/like/
    在Get Code 那邊可以試試用Html5的方式，看看會不會有問題

    ReplyDelete
  15. DiedAugust 12, 2012 at 5:17 PM

    然後FB常常修改他的東西，所以建議網誌上的文章參考就好，實際上還是要拿FB最新給的code比較好。

    ReplyDelete
  16. sakuraismAugust 21, 2012 at 7:55 PM

    謝謝版主熱心相助。

    試過了iframe跟XFBML等等方法，不管怎麼試都失敗。
    也換過瀏覽器，其中是chrome最嚴重，一按就跳掉了，其他瀏覽器則是要多confirm一次。
    個人猜測是因為facebook跟google是死對頭的關係。

    後來裝了wibiya也沒有比較好。就隨他去了。
    重點還是放在文章內容。

    我的部落格是西班牙朝聖之路的遊記，目前台灣較少繁中資訊，努力連載中。版主如果不嫌棄也請撥冗指教，謝謝。
    希望將來可以再把CCS等的技巧學的更好。

    http://sakuraism-caminodesantiagoyfisterra.blogspot.tw/

    ReplyDelete
  17. DiedAugust 21, 2012 at 9:00 PM

    to 小沙 :
    其實在blogger 的文章最底端也有內建各種分享方式啦...

    ReplyDelete
  18. sakuraismAugust 22, 2012 at 2:19 PM

    有試過耶，但是就是連內建的facebook按鈕都按不下去，盡力了。

    ReplyDelete
  19. DiedAugust 22, 2012 at 4:09 PM

    我用facebook debugger看了一下
    https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fsakuraism-caminodesantiagoyfisterra.blogspot.tw
    不曉得是動態網頁還是你的網址有轉址? fb抓不到資料，所以會有問題...
    可以按like但是資料不會計進去

    ReplyDelete
  20. sakuraismAugust 26, 2012 at 12:00 AM

    我沒有做轉址，動態網頁本身也有內建，內建的也按不下去就怪了。

    ReplyDelete
  21. sakuraismAugust 26, 2012 at 12:09 AM

    When I click the Like button, the popup window (or "flyout") doesn't show. Why?

    If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

    developer的網頁有這個敘述，可是在blogger裡抓不出來。

    ReplyDelete
  22. sakuraismAugust 26, 2012 at 12:54 AM

    我到處去別人家的部落格按讚，發現只要是blogger就會跟我一樣，
    不是按了之後消失，就是需要confirm，並且很難confirm。
    有的還是在講加讚按鈕的文章咧。

    只要不是blogger，通常confirm就會過，不然更好的就是跟FB一樣按一下即可。
    會不會真的就只是單純因為死對頭的關係。

    不好意思啊，看起來很像來亂版。再次謝謝版主分享。

    ReplyDelete
  23. UnknownMarch 7, 2013 at 10:57 AM

    HI 版主你好
    想請教您關於Like button的問題

    我將Like button安裝在網站上面
    如果不先登錄facebook帳號，就無法看到Like button
    Like button它會是空白的頁面
    先登錄了facebook的帳號，Like button就會顯示在網站上

    正常的Like button顯示不需要先登錄facebook的帳號
    在網站上的Like button都是直接讓大眾瀏覽的

    為什麼我的Like button需要先登錄facebook帳號才能看到呢
    若版主能回覆就感謝了!!!

    ReplyDelete
  24. DiedMarch 7, 2013 at 11:04 AM

    hi , 因為facebook api常常改，所以建議你直接上fb拿code比較穩
    https://developers.facebook.com/docs/reference/plugins/like/
    拿到嵌入的code之後再針對like的路徑做修改應該就可以達到你的目標了

    如果看不懂的話再跟我說XD

    ReplyDelete
  25. 瑋哥October 10, 2013 at 2:11 PM

    我弄了一整個早上 終於成功了 真是謝謝你啊!><

    ReplyDelete
  26. tzuyang555July 18, 2016 at 3:31 PM

    謝謝！這篇的XFBML語法方式比起其他用document.write去插語法來得簡潔許多!!

    ReplyDelete

Subscribe to: Post Comments (Atom)