2014年12月14日

[教學]Facebook 讚按鈕﹍四種安裝方式深入剖析

A+
Facebook 與 Google 這樣的網路龍頭有著共同特色,不斷嘗試、修正錯誤,功能持續更新,因此產品的說明文件很難多年保持不變。讚按鈕(like button)經過多年的演化,已經跟當初不太一樣。雖只是約 38x20 像素的區塊,他的安裝方式、設定選項與應用方式,其實多得超乎想像。

我們從網路搜尋看到的單一安裝方式,都算是片面的用途,本篇綜合整理「讚按鈕」的完整安裝方式,讀者可從中審視自己的需求,選擇最適當的安裝方案。


首先進入 FB 讚按鈕的官網:


用途:「讚按鈕」安裝程式碼
網址:https://developers.facebook.com/docs/plugins/like-button?locale=zh_TW






如上圖,在各處選好設定後,按下「Get Code」可取得取得程式碼。




一共有四種安裝方式,為了說明方便,以下標題從後面的順序開始。



一、URL, 分享按鈕


選擇「URL」這個方案,會得到一個類似以下的網址字串:

http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.wfublog.com%2F&width=200&layout=button_count&action=recommend&show_faces=false&share=true&height=21

先說結論,這個方案屬於特殊用途,官方說明建議把這個網址用在自訂的 Iframe 之中,或是自己寫外掛工具程式時可使用這樣的網址。總之,一般用途不會選擇這個方案。

不過,網址字串有一種實用的安裝方式,例如很多人不喜歡看到 "讚"、比較偏好使用 "分享" 的字樣,那麼就可以改一下網址字串、放在「超連結 A 標籤」之中,自製這樣的圖片式分享按鈕:

<a href="http://www.facebook.com/sharer.php?u=http://www.wfublog.com/" target="_blank"><img src="http://4.bp.blogspot.com/-G6hhyoFN78c/VIwHT0yySnI/AAAAAAAAKv8/P_ZA1cIXtoQ/s1600/sharebtn.jpg"/></a>
以上藍色字串請改為自訂網址,綠色字串請改為自訂圖片網址,效果如同以下這個分享按鈕:



(圖片出處:bossfly.net)



二、IFRAME, 不用設定網址的方法


1. 特點

這個安裝方式對於多數使用者而言,如果沒有特殊需求的話,算是最推薦的一個方案

  • 最簡單的安裝方法,程式碼只要複製、貼上,一個步驟就完成,不會出錯
  • 不需安裝多餘程式,與網頁其他部分的執行不會產生衝突

不過這個方案有個很大的缺點,每個讚按鈕都必須個別設定頁面的網址才能執行,一般的免費部落格、網站,想要每個頁面都產生讚按鈕,如果不會自己寫程式的話,將是一件苦差事,得不斷地重複「複製網址、貼上」這個繁冗的流程。

而好消息是,本文後面會提供所有網站適用、自動執行的程式碼,來自動產生網址字串。


2. 非 Blogger 平台安裝程式

2016.3.22 更新:請參照這篇「FB 讚按鈕與 Google +1 按鈕最簡單安全的安裝方式﹍可解決對齊問題」,提供了較簡便的新版本 IFRAME 安裝碼,所有平台(包含 Blogger)都適用。


這個程式碼適用於所有網站,首先依照文章開頭的 FB 官網,在各處選好設定後,按下「Get Code」→「Iframe」→ 複製程式碼

<!-- FB 讚按鈕簡易安裝法 start -->
<script>
//<![CDATA[
(function () {
var iframe = '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.wfublog.com%2F&width=200&layout=button_count&action=recommend&show_faces=false&share=true&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>',
url = "http://" + location.hostname + location.pathname,
index1 = iframe.indexOf("=http"),
index2 = iframe.indexOf("&"),
part1 = iframe.substr(0, index1 + 1),
part2 = iframe.substr(index2),
html = part1 + url + part2;
document.write(html);
} )();
//]]>
</script>
<!-- FB 讚按鈕簡易安裝法 end, Designed by WFU BLOG -->

紅色字串是 WFU 在本文開頭示範的 Iframe 設定內容,但可能跟讀者的設定值不同。因此請將以上紅色字串,置換為你從官網 Iframe 複製的程式碼,以確保這顆讚按鈕能依照你的設定值來執行。

最後將所有程式碼,貼在網頁任何想顯示的位置即可;如要出現在文章中,則每篇文章在自訂位置貼入程式碼即可(必須在 html 模式下),以後再也不必逐一複製、貼上每篇文章的網址了。


3. Blogger 平台安裝程式

Blogger 平台由於官方已經提供文章網址的語法,因此 Iframe 的安裝變得很簡單:
  1. 可參考這篇「Blogger自訂讚按鈕」→「三、自訂讚按鈕」的步驟安裝
  2. 如果覺得 A 點的設定方式麻煩,也可直接使用「2. 非 Blogger 平台安裝程式」的程式碼。

只不過 Blogger 平台最好還是採 A 點方案,若採用 B 點會有個兩個缺點:
  • 因為「Blogger 無預警轉換區域網址」這個事件,年代比較久遠的文章,讚統計會比較不準確(以前網址 .tw 與 .com 數據會分別計算)。
  • 這個按鈕只能放在文章頁面。若出現在首頁、或標籤頁面,統計數據就會因為抓錯網址而出錯了。


4. 分享按鈕

2015.6.18 新增:另外提供 "分享按鈕" 的 Iframe 安裝方式,以下為 Blogger 平台、放在範本中的安裝程式碼──

<iframe allowtransparency='true' frameborder='0' scrolling='no' expr:src='"//www.facebook.com/plugins/share_button.php?href=" + data:blog.canonicalUrl + "&amp;layout=button_count"' style='border:none; overflow:hidden;'></iframe>
  • 以上紅色字串,如果放在範本中的文章區塊,可改為 data:post.canonicalUrl
  • 如果熟悉程式碼,非 Blogger 平台可自行將這一段程式碼,改為「2. 非 Blogger 平台安裝程式」的程式碼。



三、XFBML


1. 特點

XFBML 與 HTML5 其實算是同性質的安裝方式,原本應該一起敘述即可,不過為了平均分配篇幅,功能的部分後面再一起說明,以下先列出兩者的差異:

  • XFBML 的安裝步驟最多
  • XFBML 目前的相容性比 HTML5 好,目前 2014 年,還有部分瀏覽器版本對 HTML5 支援性不佳
  • XFBML 按下讚按鈕,多了 FB 分享按鈕的功用,可進行社群分享的各種設定
  • HTML5 按下讚按鈕,會出現留言功能,算是分享到自己的 FB 帳號,內容只有自己能看到
  • FBML(facebook markup language) 是 FB自創的標記語法,但官方從 2012 年開始就逐步捨棄部分內容,因此未來的延續性讓人存疑
  • HTML5 遲早一統瀏覽器,因此這個安裝法的未來性較安心


2. 安裝程式碼

安裝步驟非常繁複,可直接參考這篇的圖文說明「在文章頭尾安裝『Facebook讚』按鈕 - XFBML版」。



四、HTML5


1. 功能

現在詳細說明 XFBML 與 HTML5 安裝方式的共同功能與特色:

  • Iframe 方案能變更的設定較少,而 XFBML 與 HTML5 可以有非常多變化
  • 可以結合官方 API,撈取各種 FB 資料庫的數據
  • 有程式設計能力的話,就能開發出各種周邊功能與外掛
  • 也因為如此,不同的 FB 非官方程式之間可能會衝突、出錯,甚至某些功能會因官方 API 改版而失效

看完以上這些摘要,如果沒有這些需求,其實也不必自找麻煩,使用 Iframe 安裝法即可,輕鬆又愉快。


2. 安裝程式碼

安裝步驟非常繁複,可直接參考這篇的圖文說明「在文章頭尾安裝『Facebook讚』按鈕 - html版」。


3. 應用層面

既然使用 HTML5 或 XFBML 方案,就代表想要有跟別人不同的展現方式,或實現各種創意應用。以下列舉幾種範例:

感謝訊息:對於按讚的讀者,想要表達我們的感謝,可以監控讚按鈕,按完讚後顯示感謝文字。範例可參考這個網頁「Reward Users for liking your page」,文章最後面的 DEMO 區塊,按下讚按鈕後,會出現感謝訊息。

感謝動畫:既然能顯示文字,也可用 js 製作特效,或是擺放動畫檔。範例可參考本站,按下每篇文章尾端的讚按鈕、或 +1 按鈕。

監控讚按鈕的分享去向:如果想知道有哪些讀者按讚、分享到哪裡,可套用官方的 API,在按下讚按鈕時,讀取及收集這些 FB 數據。應用的範例為這篇「FB 留言板安裝懶人包 + 留言 email 通知」,利用監控 FB 留言板來取得留言者的身份、內容,並傳送留言 email 通知。



五、綜合要點


最後再整理一下各種安裝方式的特點,比較能一目了然。這些摘要若不易理解時,請對照以上本文的內容即可:

1. URL
  • 可把分享按鈕做成超連結
  • 最陽春的安裝方式,不過可自訂圖案

2. IFRAME
  • 效果跟 XFBML、HTML5 的基本款差不多,但安裝步驟最簡單
  • 建議勾選 "分享按鈕" 的選項,會同時出現讚按鈕與分享按鈕 → 訪客按讚可累積數據,也可按分享按鈕達到傳播效果
  • 如果有申請 appID 的話,那麼效果跟 HTML5 一樣,按下讚按鈕會出現留言功能


3. XFBML
  • 安裝步驟最多
  • 目前的相容性比 HTML5 好、未來則不一定存續
  • 一顆讚按鈕同時有 FB 分享按鈕的功用
  • 可套用官方 API,實現各種應用


4. HTML5
  • 安裝步驟麻煩
  • 目前的相容性較差、未來則是網頁的統一標準
  • 按下讚按鈕會出現留言功能
  • 建議安裝時勾選 "分享按鈕" 的選項,會同時出現讚按鈕與分享按鈕
  • 可套用官方 API,實現各種應用


讚按鈕可以討論的東西很廣泛,本篇先針對安裝的部分,之後會有其他相關主題的系列文章陸續發表。


Facebook 相關文章:

10 則留言:

  1. 您好,不好意思又來打擾了,根據這篇上面的步驟,在FB那邊點選了Get code後,並沒有四個安裝方式可以選,下方欄位的code只有顯示
    div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div

    若要使用IFRAME的方式的話,還是一樣可以貼這段網址嗎?
    謝謝!

    回覆刪除
    回覆
    1. 你好, FB 官網改了,把其他安裝方式都拿掉,只剩 HTML5 的安裝選項。

      不過實際上還是可以使用 IFRMAE 的安裝方式,這也是我比較喜歡的方式,WFU BLOG 就是用 IFRAME 安裝。可以用本文提供的程式碼安裝,也可用「二、IFRAME, 不用設定網址的方法」→「3. Blogger 平台安裝程式」,有另一篇文章說明如何安裝。

      刪除
    2. 您好,謝謝您的回覆,根據您的文章將
      iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?locale=zh_TW&href=" + data:post.canonicalUrl + "&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80&share=true"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px;'/
      加入後台的html後,仍然沒有跑出文章,想請問說是否我遺漏了哪個部分呢?
      謝謝!

      刪除
    3. 請附上文章網址,說明你安裝在哪個位置,才能看看是什麼情形。

      說不定只是放的地方不對,可參考「Blogger 範本﹍(3) 文章及留言區塊的程式碼」http://www.wfublog.com/2013/04/blogger-template-post.html 或系列文章

      刪除
    4. 您好,真的是為置放的不對,現在已經可以顯示了!
      真的很感謝您的回覆~~~

      http://vintagejhan.blogspot.tw/


      Thanks again!

      刪除
    5. 您好,不好意思再打擾一下了@@
      就是我FB按讚鈕下方要如何調整間距呢?
      因為按鈕到文章內容位置為止感覺空了好幾行的空間~
      http://vintagejhan.blogspot.tw/
      謝謝您:)

      刪除
    6. 請參考那篇安裝文章的說明改參數,調整寬、高的像素值,預設的高度是 80px,所以會跟下方有點距離。

      刪除
    7. 試了幾種高度數字後,現在已經可以正常顯示了,真的很感謝您有耐心的一一回覆!再次感謝~

      刪除
  2. 您好,我之前在blogger文章的語法內貼上下面一串語法,文章就會顯示臉書專頁的讚鈕
    style="font-family: "verdana"
    < style="text-align: center;">
    < class="fb-like" data-action="like" data-href="https://www.facebook.com/footwork01/" data-layout="buttoshare="true" data-show-faces="true">
    "
    (因為很多字元不允許所以刪除了一些)

    不知道我是不是刪到sidebar裡的哪一個小工具(可能裡面有藏甚麼語法),結果所有文章都不會再顯示臉書專頁的讚鈕了,不過我使用下面那個針對文章的讚鈕是可以顯示的,其他我從Facebook官網產生出來的code都不能使用了,麻煩請解答,感恩+感激~


    src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"


    回覆刪除
    回覆
    1. 是的,這個安裝方式有可能受到他處的影響。你可以改用本篇「二、IFRAME, 不用設定網址的方法」的這個安裝方式。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。