2014-06-23

打造部落格(二之二):完美安裝 Facebook 與 Google+ 讚賞按扭

13 則留言
據我瞭解,部落格格主寫作其實不是為了賺錢。雖然我們會在網誌裡面放上廣告,但除非是非常知名的部落客,不然對於一般格主來說,廣告收益可能只夠每個月多喝上一杯咖啡。我們寫作,是因為真的喜歡分享、想要表達。因此,讀者的正向回饋無疑是我們持續寫作的正向動力。

在部落格中,除了方便與快速的系列分享按鈕之外,也需要提供讀者熟悉、而且具有「品牌辨識度」的官方按鈕。和 AddThis 一樣,官方按鈕也可以追蹤按讚狀況。更好的是,與系列分享按鈕相比,官方按鈕有三個優點:
  1. 分別而且確實的計數,假如讀者取消按讚,數字也會回扣
  2. 對於讀者來說更拒「公信力」,因為按鈕並非第三方提供
  3. 讀者可以看到分享狀況中是否已有自己好友,有助於分享擴散

本文將提供 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 可以不用填,類別則依喜好自行選擇。按下「建立應用程式」,然後按照要求通過安全驗證。

How to put Facebook button into blogger

點選左側的 SettingsApp ID 框中的數字即是你的 App ID,請記下。在 App Domains 填上你的部落格首頁網址(不需要「http://」)。有些網路教學寫說填入 blogspot.com 即可,但目前看來似乎不正確,因為 Facebook 會跳出紅字警告錯誤。

How to put Facebook button into blogger

接著,按下下方的 + Add Platform,在彈出畫面中選擇 Website。然後,在 Site URL 填入完整部落格首頁網址(包含「http://」)。Mobile Site URL 可以不用填。最後,記得按下右下角的 Save Changes

How to put Facebook button into blogger

How to put Facebook button into blogger

取得 App ID 是個重要動作,有了 App ID 以後,可以安裝與管理 Facebook 留言板,以及使用其他 Facebook 工具元件。有興趣的人可以自行google 尋找安裝教學。


(二)Google+ 的 +1 可以追蹤嗎?

就我目前所知,Google+ 的 +1 狀況,似乎只能計數,而無法看到更多資訊。只要你的 blogger 有和 Google+ 個人頁面或專頁連結,就可以輕易看到 +1 的數量,因為任何一篇文章的 +1 都會總計到個人頁面或專頁的 +1 數上。這個數字可以透過 blogger 提供的「Google+ 徽章」小工具看到。

Google Badge

若有朋友知道 Google+ 的 +1 情況如何追蹤,還請留言告知。


(三)官方按鈕應該裝在哪裡?

秉持不要霸佔版面與維持簡潔的原則,我建議安裝的地方有兩個:
  1. 標題下方,出現在首頁,也出現在單篇文章。
  2. 文章頁尾,不出現在首頁,但出現在單篇文章。

之所以要放在標題下方,而且出現在首頁,是希望可以讓讀者快速看到按讚數量,方便讀者快速瞭解這篇文章的受歡迎程度,藉此吸引讀者點擊標題或者「繼續閱讀」進入全文細讀。不過,為了不要過度干擾標題,因此這裡的按鈕,我選擇以最簡單的形式為主。

那麼為何在單篇文章模式時,還是需要在頁尾擺放官方按鈕?這是為了方便認真與仔細的讀者。這類讀者通常會在閱讀全文以後,才決定是否按讚與分享,因此在頁尾提供按鈕可以讓這類讀者不需要再捲回頁頭。而且,因為在頁尾,所以這裡的按鈕可以採用比較「華麗」的形式,例如帶有文字敘述,或者可以看見朋友按讚頭像。

(四)為全站的按鈕準備好「基礎」的語法

在安裝按鈕之前,要先為這些按鈕準備「基礎」,這些按鈕才能正常運作。請先將下列「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 = &quot;//connect.facebook.net/zh_TW/all.js#xfbml=1&amp;appId=1473450166226153;version=v2.0&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script><!-- Facebook 按鈕基礎 end --> 
<!-- Google+ 按鈕基礎 begin --><script defer='defer' type='text/javascript'> window.___gcfg = {lang: &#39;zh-TW&#39;}; (function() {var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true; po.src = &#39;https://apis.google.com/js/platform.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[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 == &quot;item&quot;'> 
<!-- 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 首頁,在左側最下方的找到「開發人員模式」,點選「洞察報告」。進入頁面以後,點選右上角的「你的洞察報告網站」。

Facebook Insight

在跳出的視窗中,上方寫了一段說明「新增 HTML meta 標籤至您的網頁…」。還記得嗎?這個我們在步驟(四)就做過了,所以不需要另外費心。只要在「網域」填入你的部落格首頁網址(不需要「 http://」),「連結對象」則選擇你在步驟(一)中填入的那個 Display Name(如果你按照本文教學,那麼就是你的部落格名稱)。最後按下「取得洞察告」即可。

只要按照前述方式,你就可以成功在部落格中安裝和本站一樣的官方按鈕,也可以開始在 Facebook 中閱讀「洞察報告」來觀察部落格的流量、分享、和按讚情況。


(八)藍色字體說明

如果你希望按鈕的形式、大小有所變化,就需要修改上述各種語法中的藍色字體。這些藍色字體代表的意義各不相同,很難一一詳述,請分別到 Facebook 按鈕訂製區 Google+ 按鈕訂製區查看細節。

在 Facebook 按鈕訂製區,透過選擇不同的紅框選項,然後按下 Get Code,我們可以得到不同的按鈕法語。透過比較本文提供的按鈕語法與訂製得到的按鈕語法,很容易知道不同藍色字體代表的意義,然後你便可以透過修改藍色字體,自行調整喜歡的按鈕樣式。



Google+ 按鈕的調整方式也是一樣,就不再贅述。希望大家都能順利取得、安裝自己喜歡的官方按鈕樣式。

13 則留言 :
  1. Very interesting! I learned a lot from the post :)

    回覆刪除
  2. 果然是處女座!! 版面都修的好整齊漂亮
    等我買好新的版型我再來向你請教怎樣把版面改得更簡潔美觀XD

    回覆刪除
  3. 我發現一個地方怪怪的,我按文章底部的+1數字有變多,但是標題下方的+1沒有同步更新耶!! 這是故意設計分開計算的嗎?

    回覆刪除
  4. 噗! 我不是老牌部落客啦@@ 我資歷還沒滿一年呢! 你太抬舉了...


    那個..免費版型好像都做不出我要的效果...所以才想去找好看的收費版型XD

    回覆刪除
  5. 不不不~我想你誤會了! 我不是說我自己的網誌是你這篇!!
    你文章標題下方的跟文章底部addthis上方的那個"官方"+1 我當時按的時候的確沒有即時同步,現在看來好像也是呢@@

    回覆刪除
  6. 哈哈,原來你是說我這篇…我看起來有同步啊~上面顯示 1,下面旁邊有寫「1 人說這讚。」 XD 對了,你按完讚以後,有看到自己的頭像吧?

    回覆刪除
  7. 不好意思,請問一下~ 關於 APP 那些的都沒有問題,因為我安裝在小工具(透過後臺界面非自定範本 HTML)都可以成功,但一放到 .post-header 的 DIV 就完全不會出現(連純文字也會被忽略)。我確定 post-header 的 container 是存在的,因為我有透過 CSS 讓它顯是為黑色背景,但不管其中放置什麼內容,都會直接被忽略 @@ 我爬了很多文了,至今仍無頭緒,請問大大可以幫忙看一下嗎? 小的感激不盡。
    http://timescavenger.blogspot.com/
    PS. 我會選擇在這篇文章發問是因為我 GOOGLE 日期過濾設定成「一年之內」,離 2015 最近,還請多多賜教了 @@

    回覆刪除
  8. 您好,抱歉回覆晚了一點。我看了一下你的 html,也許你把東西放到 XXXXX 這個 DIV 裡頭試試看?

    回覆刪除
  9. 不會晚 ^^ 感謝大大願意相助~~~~

    這是我修改後的範本原始碼:
    (雲端記事本)https://hollenxd.hackpad.com/Coding-Design-Problem-SN03P4uJzP5
    (GIF 截圖)http://gyazo.com/14060c43548ec49375ba426c643d7699


    我照您說的,把 改成  括住語法,還是沒有出現耶~
    我到呈現網頁上查看原始碼,它還是直接把那些語法省略掉了。

    回覆刪除
  10. 奇怪 @@ 我之前的訊息好像被吃掉了....
    呃.... 反正就是我照大大您說的做了,但還是被 Blogger 無視了。
    這是我的範本語法,可自由修改~
    https://hollenxd.hackpad.com/Coding-Design-Problem-SN03P4uJzP5

    回覆刪除
  11. 嗨,Hollen,抱歉,前鎮子太忙,一直沒有批核你的留言!我知道問題在哪裡了,是個很多人都弄錯的地方:搜尋 會找到兩個,你的語法要放在第二個,就是比較下面的那個!

    有兩個選擇,直接放在 XXX 或者 XXX 應該就可以了!

    回覆刪除
  12. 效果非常顯卓!感謝您的幫忙!
    熱心的站主、充實的內容,必須推啊!

    回覆刪除