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

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 相關文章：