在 Blogger 部落格加入 Facebook 「讚」（like）與 Google Plus +1 按鈕

Facebook 與 Google Plus 是現在最流行的社交網站，許多網站現在都會與這些熱門的社交網站結合，增加網站的瀏覽率與知名度。

如果想在 Google 的 Blogger 部落格加入 Facebook 的「讚」按鈕（like）與 Google Plus 的 +1 按鈕，有幾種方式，以下是各種方式的使用教學與優缺點。

使用 Blogger 的小工具

直接使用 Blogger 是最簡單的方式，Google Plus 的 +1 按鈕本來就有內建了，這個應該很容易，從小工具的選單選取就可以了。

Blogger 新增小工具

而 Facebook 就要使用 HTML/JavaScript 這個工具自己貼程式碼了。

Step 1
首先到 Facebook Developers 網站中，建立 Facebook 「讚」按鈕的 JavaScript 程式碼，一開始先填入自己部落格的網址，接著依照需求調整其他的參數，在調整參數時，右邊可以直接預覽調整過後的結果。

Facebook 按鈕產生工具

其中傳送的功能（Send Button）只限用於 XFBML 的程式碼版本，因為我們等一下會選擇使用 iframe 的版本，所以這個傳送功能在這裡是不能使用的，記得把這個選項取消。

Step 2
設定好之後，接著點選下方的「Get Code」就會產生程式碼，選擇 iframe 的版本。

Facebook 按鈕程式碼

然後把這裡產生好的程式碼複製起來。

Step 3
到 Blogger 部落格的管理介面中的「版面配置」，選擇「新增小工具」。

Blogger 管理介面

Step 4
從小工具的選單中選擇「HTML/JavaScript」。

Step 5
把剛剛複製好的程式碼貼上去。

Blogger 小工具

按下確定之後，就完成了。

修改 Blogger 樣板（Template）

上面所介紹的方式雖然比較簡單，不用太多技巧即可使用，但是卻有些限制，如果想要將 Facebook 與 Google Plus +1 按紐放在小工具以外的地方，就沒辦法了，例如每篇文章標題下方與文章本文結尾處等，這時候就可以使用修改樣板（template）的方式來達成。

Step 1
到 Blogger 管理介面的「範本」，點選右上角的「備份/還原」。

Blogger 管理介面

Step 2
點選「下載完整範本」。

Blogger 範本備份

Step 3
下載下來的檔案是一個 XML 檔，這個檔案就是整個部落格的範本檔，因為等一下我們要修改這個範本檔，為了怕不小心搞砸，在修改前請一定要先備份一個原始的範本檔，以免弄壞了改不回來。

如果有備份範本檔，即使等一下修改時，不小心把部落格搞砸了，把這個備份的範本檔案上傳回去，也可以復原。

Step 4
做好備份之後，用自己習慣的文字編輯軟體開啟這個下載下來 XML 範本檔，開始修改。

在檔案中找尋 </head>，然後在這個 </head> 之前加入 Google Plus +1 按鈕要使用的的程式碼：

    ]]>
  </b:template-skin>
  <!-- Begin: Add by Seal -->
  <!-- Google Plus +1 button -->
  <!-- Place this tag in your head or just before your close body tag. -->
  <script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
    {lang: &quot;zh-TW&quot;}
  </script>
  <!-- End: Add by Seal -->
</head>

程式碼中用 <!-- 與 --> 夾起來的部分都是註解，而 Begin: Add by Seal 與 End: Add by Seal 之間的程式碼就是我們加進去的，雖然註解很多，但是建議還是留著，免得以後回來完全看不懂這是什麼。

Step 5
接下來要決定按鈕擺放的位置，因為是直接修改範本檔，所以可以放在網頁中任何的位置，當然如果是比較特別的地方，自己的 HTML 與 CSS 功力要夠才行。

這裡我們把按鈕放在文章標題的下方，就像這樣：

首先尋找 <div class='post-header'>，這個 div 就是專門將小工具放在文章標題下方的用的，但是在管理界面中沒辦法放置自定的按鈕。

一樣加入 Begin: Add by Seal 與 End: Add by Seal 之間的程式碼。

<div class='post-header'>
  <div class='post-header-line-1'/>
  <!-- Begin: Add by Seal -->
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='socialMediaHeader'>
      <!-- facebook like button -->
      <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>

      <!-- Google Plus +1 button -->
      <!-- Place this tag where you want the +1 button to render. -->
      <div class='g-plusone' data-size='medium' expr:data-href='data:post.canonicalUrl'/>
    </div>
  </b:if>
  <!-- End: Add by Seal -->
</div>

這個程式碼主要包含了 Facebook 與 Google Plus +1 兩部分，上半部的 iframe 部分是 Facebook 所使用的，下半部的 div 則是 Google Plus +1 按鈕，兩個按鈕用 <div class='socialMediaHeader'> 包起來，這樣可以方便微調按鈕的位置。

而最外面的 <b:if cond='data:blog.pageType != "static_page"'> 則是用來判斷目前的頁面是否為靜態網頁（static page），如果不是靜態網頁才顯示這些按鈕。

Step 6
接著我們在文章結尾處也放置一份 Facebook 與 Google Plus +1 按鈕。

找尋 <b:if cond='data:post.hasJumpLink'>，然後一樣加入 Begin: Add by Seal 與 End: Add by Seal 之間的程式碼，這個跟上面的有點類似，但是修改了一些小地方，主要差異在於判斷按鈕出現的頁面，剛剛是讓非靜態網頁顯示按鈕，而這裡我們只需要讓單一文章的頁面顯示就可以了，如果在首頁也顯示的話，這樣按鈕會感覺太多，因此改為：<b:if cond='data:blog.pageType == "item"'>。

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

<!-- Begin: Add by Seal -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='socialMediaFooter'>
    <!-- facebook like button -->
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>

    <!-- Google Plus +1 button -->
    <!-- Place this tag where you want the +1 button to render. -->
    <div class='g-plusone' data-size='medium'/>
  </div>
</b:if>
<!-- End: Add by Seal -->

<div class='post-footer'>
  <div class='post-footer-line post-footer-line-1'>
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons goog-inline-block'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

Step 7
如果要微調按鈕的位置，就自己加入 CSS 來調整，這是我的作法：

.post-header {
  /* Modified by Seal */
  /* margin: 0 0 1.5em; */
  margin-top: 8px;
  margin-bottom: 8px;

  line-height: 1.6;
  font-size: 90%;
}

.socialMediaFooter {
  margin-top: 20px;
}

Step 8
修改完之後，就把改好的 XML 範本檔由上面的「備份/還原」功能上傳到 Blogger 上面，這樣就完成了。

人有失手，馬有亂蹄，如果不幸上傳之後有錯誤，或是整個部落格版面亂掉，那可能就是在修改範本程式碼的過程中有出錯，這時候就把之前備份的範本檔再上傳回去就可以復原了，如果沒有備份又改不回來的話，就要重新選擇預設範本，一切重來，所以備份是很重要的。

這裡我們加入的按鈕，都是使用最標準的按鈕型式，如果想要使用其他的樣式的話，下面是各種樣式的程式碼：

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>

若要使用這個樣式，就把之前程式碼的 iframe 部分換成這個就可以了。

Google Plus +1 也有類似的按鈕形式：

<div class='g-plusone' data-size='tall' expr:data-href='data:post.canonicalUrl'/>

Google Plus +1 按鈕要修改樣式比較簡單，就直接更改其中的 data-size 參數就可以了，其餘的參數可以參考 Google Plus 開發者的網頁。

參考資料：Helper Blogger