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 平台安裝程式
這個程式碼適用於所有網站，首先依照文章開頭的 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 的安裝變得很簡單：
- 可參考這篇「Blogger自訂讚按鈕」→「三、自訂讚按鈕」的步驟安裝
- 如果覺得 A 點的設定方式麻煩，也可直接使用「2. 非 Blogger 平台安裝程式」的程式碼。
只不過 Blogger 平台最好還是採 A 點方案，若採用 B 點會有個兩個缺點：
- 因為「Blogger 無預警轉換區域網址」這個事件，年代比較久遠的文章，讚統計會比較不準確(以前網址 .tw 與 .com 數據會分別計算)。
- 這個按鈕只能放在文章頁面。若出現在首頁、或標籤頁面，統計數據就會因為抓錯網址而出錯了。
三、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 相關文章：