在 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 Developer 的「讚」按鈕(Like Button)產生工具

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

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

Facebook Developer 的「讚」按鈕(Like Button)程式碼

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

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

Blogger 部落格「版面配置」的「新增小工具」

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

Blogger 部落格的 HTML/JavaScript 小工具

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

Blogger 部落格的 HTML/JavaScript 小工具

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

修改 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 功力要夠才行。

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

Blogger 部落格文章標題下方的 Facebook 「讚」與 Google+ 按鈕

首先尋找「<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 != &quot;static_page&quot;'> 則是用來判斷目前的頁面是否為靜態網頁(static page),如果不是靜態網頁才顯示這些按鈕。

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

Blogger 部落格文章結尾的 Facebook 「讚」與 Google+ 按鈕

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

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

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

Facebook 的「讚」按鈕
<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 也有類似的按鈕形式:

Google+ 按鈕
<div class='g-plusone' data-size='tall' expr:data-href='data:post.canonicalUrl'/>
Google Plus +1 按鈕要修改樣式比較簡單,就直接更改其中的 data-size 參數就可以了,其餘的參數可以參考 Google Plus 開發者的網頁。

參考資料:Helper Blogger
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站

18 則留言:

  1. 你好,我想請問設了like button後,是不是不可以用"繼續閱讀"縮起文章?因為我設置了之後,"like"在首頁各文章概覽的顯示中,按一下變成全部文章都+1,但進入文章後再點,又恢復正常的"like"計數功能… 請問有方法可以解決嗎?謝謝!

    回覆刪除
    回覆
    1. 請問您是不是直接把從 Facebook/Google 產生的程式碼貼上去呢?還是使用這裡我修改過的程式碼?

      刪除
    2. 是直接貼facebook產生的程式碼。因為我只要facebook like功能,也試貼過您中間有一段facebook like button的程式碼,但無法顯示。我沒有資訊背景,其它的太複雜,所以看不懂… orz

      刪除
    3. 作者已經移除這則留言。

      刪除
    4. 剛剛又試了一次,照您的方法可以在文章下方放置按鈕了!! 謝謝!但有兩個問題:

      1。是不是不能直接把google的那四行去掉變成只剩like按鈕?

      2。有方法可以把like鈕放在原本文章下方按鈕的右邊嗎?謝謝。

      刪除
    5. 屬於 Google Plus 的部分是這三行,如果不要就把這三行拿掉。

      <!-- 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'/>

      至於要把 Facebook 的 like 放在原本文章下方按鈕的右邊,就要找到範本檔中原本按鈕的位置,再把我們自己的程式碼貼上去,看起來大概是這樣:

      <div class='post-footer-line post-footer-line-2'>
        <div class='post-share-buttons goog-inline-block'>
          <b:if cond='data:post.sharePostUrl'>
            <b:include data='post' name='shareButtons'/>
          </b:if>
          <!-- 自己的程式碼加在這裡 -->
        </div>
      </div>

      刪除
    6. 試了之後有成功!它會放在原本靠左的分享鍵下方,但也是靠左… 是我還需要改那裡嗎?謝謝你!

      刪除
    7. 那試試看這樣是否可行?

      <div class='post-footer-line post-footer-line-2'>
        <div class='post-share-buttons goog-inline-block'>
          <b:if cond='data:post.sharePostUrl'>
            <b:include data='post' name='shareButtons'/>
          </b:if>
        </div>
        <!-- Begin: Add by Seal -->
        <b:if cond='data:post.sharePostUrl'>
          <!-- facebook like button -->
          <div class='post-share-buttons goog-inline-block'>
            <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;'/>
          </div>
        </b:if>
        <!-- End: Add by Seal -->
      </div>

      刪除
    8. 可以了!!!!這位大大好勵害!!!!抱歉一直向您問問題,真是謝謝你啊~~~~!!! (灑花+轉圈圈~~耶耶~~)

      刪除
    9. 只是雕蟲小技,承蒙您不嫌棄。

      刪除
  2. 你好! 我跟你的方法,成功加入了Like按鈕,而且每一篇文章都有。但是,我按了其中一篇的Like後,其他文章的Like都自動Like了。

    請問可以怎樣解決? 謝謝!

    回覆刪除
    回覆
    1. 您好:

      請問您是不是使用第一種「Blogger 的小工具」的方式來加入 facebook 的 Like 按鈕?

      刪除
  3. 你好,跟著你的方法加了LIKE,但發現右側欄的標題中文字顯示不到啊。先謝謝你。
    是不是我有地方弄錯了嗎?
    http://sweetxhome.blogspot.hk/

    回覆刪除
    回覆
    1. 原來按回去,再打多一次就可以了。謝謝。不過,我之前加了向上的按鈕又不見了。。。讓我慢慢弄回來吧。。謝謝。

      刪除
  4. 你好! 我按照你的方法一步步~ 但是還是出不來! 不知道是哪裡出了問題?

    我的BLOG
    http://cherstravel.blogspot.tw/

    回覆刪除
    回覆
    1. 其實這樣我也很難看出來問題在哪裡,
      我也只能猜你是不是有哪個步驟漏掉了?

      刪除