2014年12月1日 星期一

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

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

Wayne Fu 0 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 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP