在部落格中,除了方便與快速的系列分享按鈕之外,也需要提供讀者熟悉、而且具有「品牌辨識度」的官方按鈕。和 AddThis 一樣,官方按鈕也可以追蹤按讚狀況。更好的是,與系列分享按鈕相比,官方按鈕有三個優點:
- 分別而且確實的計數,假如讀者取消按讚,數字也會回扣
- 對於讀者來說更拒「公信力」,因為按鈕並非第三方提供
- 讀者可以看到分享狀況中是否已有自己好友,有助於分享擴散
本文將提供 Facebook 與 Google+ 按鈕的教學!
Photo credit: Kris Olin (CC BY-NC-SA 2.0) |
(一)登錄 Facebook App ID 讓按讚狀況可以追蹤
請先到 Facebook Developer 登錄成為開發者。完成以後,點選上方藍色橫列中的 Apps 並且選擇 Creat a New App。接著請在彈出視窗中的 Display Name 填入你的部落格名稱,Namespace 可以不用填,類別則依喜好自行選擇。按下「建立應用程式」,然後按照要求通過安全驗證。
點選左側的 Settings,App ID 框中的數字即是你的 App ID,請記下。在 App Domains 填上你的部落格首頁網址(不需要「http://」)。有些網路教學寫說填入 blogspot.com 即可,但目前看來似乎不正確,因為 Facebook 會跳出紅字警告錯誤。
接著,按下下方的 + Add Platform,在彈出畫面中選擇 Website。然後,在 Site URL 填入完整部落格首頁網址(包含「http://」)。Mobile Site URL 可以不用填。最後,記得按下右下角的 Save Changes。
取得 App ID 是個重要動作,有了 App ID 以後,可以安裝與管理 Facebook 留言板,以及使用其他 Facebook 工具元件。有興趣的人可以自行google 尋找安裝教學。
(二)Google+ 的 +1 可以追蹤嗎?
就我目前所知,Google+ 的 +1 狀況,似乎只能計數,而無法看到更多資訊。只要你的 blogger 有和 Google+ 個人頁面或專頁連結,就可以輕易看到 +1 的數量,因為任何一篇文章的 +1 都會總計到個人頁面或專頁的 +1 數上。這個數字可以透過 blogger 提供的「Google+ 徽章」小工具看到。
若有朋友知道 Google+ 的 +1 情況如何追蹤,還請留言告知。
(三)官方按鈕應該裝在哪裡?
秉持不要霸佔版面與維持簡潔的原則,我建議安裝的地方有兩個:
- 標題下方,出現在首頁,也出現在單篇文章。
- 文章頁尾,不出現在首頁,但出現在單篇文章。
之所以要放在標題下方,而且出現在首頁,是希望可以讓讀者快速看到按讚數量,方便讀者快速瞭解這篇文章的受歡迎程度,藉此吸引讀者點擊標題或者「繼續閱讀」進入全文細讀。不過,為了不要過度干擾標題,因此這裡的按鈕,我選擇以最簡單的形式為主。
那麼為何在單篇文章模式時,還是需要在頁尾擺放官方按鈕?這是為了方便認真與仔細的讀者。這類讀者通常會在閱讀全文以後,才決定是否按讚與分享,因此在頁尾提供按鈕可以讓這類讀者不需要再捲回頁頭。而且,因為在頁尾,所以這裡的按鈕可以採用比較「華麗」的形式,例如帶有文字敘述,或者可以看見朋友按讚頭像。
(四)為全站的按鈕準備好「基礎」的語法
在安裝按鈕之前,要先為這些按鈕準備「基礎」,這些按鈕才能正常運作。請先將下列「Facebook 基礎」與「Google+ 基礎」放在 </body> 之前:
<!-- Facebook 按鈕 begin --><div id='fb-root'/><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/zh_TW/all.js#xfbml=1&appId=1473450166226153;version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><!-- Facebook 按鈕基礎 end -->
<!-- Google+ 按鈕基礎 begin --><script defer='defer' type='text/javascript'> window.___gcfg = {lang: 'zh-TW'}; (function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script><!-- Google+ 按鈕基礎 end -->
請記得把紅色數字換成你的 App ID。不會找尋語法者,請見這篇文章。
接著,在 </head> 之前放置以下語法:
<meta content='100003331921432' property='fb:admins'/>
<meta content='1473450166226153' property='fb:app_id'/>
紅色數字仍然是你的 App ID。綠色數字則是換成你的管理者 ID,取得方法:請進入 Facebook 個人頁面,然後把網址前面的 www 換成 graph,按下 Enter 後出現的頁面,"id": 後面的數字就是你的管理者 ID。
(五)標題下方官方按鈕的安裝方式
請將下列語法放置在第二個「<div class='post-header-line-1'/>」之後:
<!-- Facebook 標題按鈕 begin --><div id='fb-root'/><div style='align:left;'><div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='true' expr:href='data:post.canonicalUrl'/><!-- Facebook 標題按鈕 end -->
<!-- Google+ 標題按鈕 begin --><div class='g-plusone' data-align='left' data-size='medium' expr:data-href='data:post.canonicalUrl'/></div><!-- Google+ 標題按鈕 end -->
藍色字體意義,文章最後會解釋。目前為止,按鈕已經可以在標題出現,但是會長成這樣子:
可以看到,一來按鈕距離標題太近,二來兩個按鈕並未對齊(處女座絕對無法忍受…)。所以我們還做一點小小修正。
首先,在「.post-header {」下方加入「margin-top: 8px;」 。這段語法用來調整標題下方物件與標題之間的距離,數值 8 可以自行調整。
接著,在 CSS 語法中加入「.fb-like>span { vertical-align: baseline!important; }」這段語法。不知道在哪裡修改 CSS 語法的朋友,請參考這篇文章。
透過這兩個修正,按鈕就會呈現目前在本站網頁中看到的樣子。
(六)文章頁尾官方按鈕的安裝方式
請將下列語法放在第二個「 <div class='post-footer-line post-footer-line-1'>」之後:
<b:if cond='data:blog.pageType == "item"'>
<!-- Google+ 頁尾按鈕 begin --> <div class='g-plusone' data-annotation='inline' data-size='tall' data-width='450' expr:data-href='data:post.canonicalUrl'/><!-- Google+ 頁尾按鈕 end -->
<!-- Facebook 頁尾按鈕 begin --><div class='fb-like' data-action='like' data-layout='standard' data-share='true' data-show-faces='true' data-width='500' expr:href='data:post.canonicalUrl'/><!-- Facebook 頁尾按鈕 end -->
</b:if>
粗體的第一行和最後一行語法,目的是讓頁尾按鈕只在單篇文章中出現。如果你希望頁尾按鈕在首頁時仍然出現,可以將這兩行拿掉。另外,如果你希望調整按鈕在頁尾的位置,例如高於或低於作者名稱和標籤,那就要挑選上述語法擺放的位置,調整方法可以參考這篇文章。
(七)從 Facebook 追蹤瀏覽與按讚狀況
完成上述工作以後,要怎麼樣才能看到 Facebook 的「報表」呢?請先到你的 Facebook 首頁,在左側最下方的找到「開發人員模式」,點選「洞察報告」。進入頁面以後,點選右上角的「你的洞察報告網站」。
在跳出的視窗中,上方寫了一段說明「新增 HTML meta 標籤至您的網頁…」。還記得嗎?這個我們在步驟(四)就做過了,所以不需要另外費心。只要在「網域」填入你的部落格首頁網址(不需要「 http://」),「連結對象」則選擇你在步驟(一)中填入的那個 Display Name(如果你按照本文教學,那麼就是你的部落格名稱)。最後按下「取得洞察告」即可。
只要按照前述方式,你就可以成功在部落格中安裝和本站一樣的官方按鈕,也可以開始在 Facebook 中閱讀「洞察報告」來觀察部落格的流量、分享、和按讚情況。
(八)藍色字體說明
如果你希望按鈕的形式、大小有所變化,就需要修改上述各種語法中的藍色字體。這些藍色字體代表的意義各不相同,很難一一詳述,請分別到 Facebook 按鈕訂製區與 Google+ 按鈕訂製區查看細節。
在 Facebook 按鈕訂製區,透過選擇不同的紅框選項,然後按下 Get Code,我們可以得到不同的按鈕法語。透過比較本文提供的按鈕語法與訂製得到的按鈕語法,很容易知道不同藍色字體代表的意義,然後你便可以透過修改藍色字體,自行調整喜歡的按鈕樣式。
Google+ 按鈕的調整方式也是一樣,就不再贅述。希望大家都能順利取得、安裝自己喜歡的官方按鈕樣式。