-步驟-Blogger 在文章標題下方、文章底部，插入 facebook 官方的 like button insert facebook official like button in Blogger post header / footer, and make it display only in single post pages - my Blogger template tweak

-- 2011-04-11 更新：
想要讓每篇文章的 like button 在首頁顯示時，也可以有正常功能（而非指向首頁網址）的話，在按鈕中加入這一段  expr:href='data:post.url' 文字即可，詳細位置請見內文的程式碼。文章中的程式碼是設定成只在單篇文章時顯示 like 按鈕，如果要改成全部頁面都顯示，只要把包裹在 like 按鈕前後的 b:if 條件式標籤刪除即可，以上。改得有點匆促，語意不清之處請留言指教 ^^b
--

告解：神啊！我禁不起誘惑，我在網誌上安裝了萬惡 facebook 提供的 social plugin 之 like button ，只為了更方便的分享自己寫的文章...


身為一個信奉 do no evil 的 Google fan，我對 facebook 這間公司的印象並不是很好，所以，即使 facebook 提供官方的 social plugin 已經好一段時間了，仍舊一直都不想去用它。

不過昨天，看我最愛的 iThome 網站 時，在幾篇好文下面，順手按了 like 按鈕。按完後發現，它有一個 add comment 連結，按下之後，會在原地出現一個輸入框框，讓我在 like 按鈕中打字，輸入完成後按下 post 鈕，就會直接把這篇文章的連結，跟我剛才附上的 comment ，張貼到 facebook 的塗鴉牆上。（如果按下 unlike ，則會直接從塗鴉牆上刪除，連同之前的 comment 一起刪掉）

這個效果，跟一般的 facebook share button 效果幾乎完全相同，但是，share button 需要另外打開一個視窗，而 like button 只要在網頁中原地操作，節省了許多時間。讚嘆之下，我不禁拋下之前的堅持，在自己的網誌上也安裝這個屬於 facebook social plugin 之一的 like 按鈕。

我追隨 iThome 的作法，將 like 按鈕放在兩處，一是文章標題下方，獨立一行。二是文章底部，緊接在分享按鈕的右方。

樣板功能：Blogger 在文章標題下方、文章底部，插入 facebook 官方的 like button，以及，讓它只在單篇文章的頁面中顯示，以避免抓錯網址的問題

首頁及多篇文章頁面，like button 不會出現：

單篇文章頁面，將 like 按鈕放在 post header：

單篇文章頁面，將 like 按鈕放在 post footer：

步驟：

1. 到 facebook developers 網頁 http://developers.facebook.com/docs/reference/plugins/like ，往下捲到 Step 1 的地方，依照自己的需求，調整選項後，取得屬於你的程式碼。以我為例：
   
   
   • URL to Like - 要按讚的網址留白不填，這樣它會自動抓取目前頁面的網址
   • Layout Style - 我用的樣式是 Standard ，文字說明最完整的版本
   • Show Faces - 我把顯示頭像取消勾選，這樣就只需要一行的高度，不佔空間
   • Width - 我採用寬度是預設的 450 像素，要有 comment 功能的話，寬度不能小於 400 像素（這是iframe版的限制，若用XFBML版的程式碼則無此限制）
   • Verb to display - 我的顯示文字是預設的 like
   • Font - 我選的字型是 tahoma
   • Color Scheme - 我的配色是 light
   
   選好選項後，按 Get Code 按鈕，會出現一個小視窗，裡面有兩種版本的程式碼。第一種字很多的，是 iframe 版本，第二個字很少的，是 XFBML 版本，我選擇的是 XFBML 版本，因為它沒有寬度限制，也看起來比較清爽。另外，我不太喜歡在網頁中插入 frame 頁框之類的東西，所以，可以不用 iframe 的話，就盡量不用。
   
   按 Ctrl + C 複製你想要的程式碼後，就可以切回 Blogger 後台。
2. 在 Blogger 後台的 Design > Edit HTML，將 Expand Widget Templates 勾選，展開小工具內的程式碼。然後，按 Ctrl + F 搜尋 post-header-line ，可以找到像這樣的文字，這是文章標題下方區域的程式碼：
       <div class='post-header'>
       <div class='post-header-line-1' />
   
   如果你跟我一樣，把文章分類標籤放在文章標題下方的話，則會看到這樣：
       <div class='post-header'>
       <div class='post-header-line-1'><span class='post-labels'>
           <b:if cond='data:post.labels'>
             <data:postLabelsLabel/>
             <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
             </b:loop>
           </b:if>
         </span>
       </div>
3. 將紅色的文字，插入這段程式碼的下方，並且把 / 去掉：
       <div class='post-header'>
       <div class='post-header-line-1' />
         <span class='facebook-like-button'>
           <b:if cond='data:blog.pageType == "item"'>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='tahoma' show_faces='false' width='450'/>
           </b:if>
         </span>
       </div>
    
   或者，如果你想要跟我一樣，把 like button 放在文章分類標籤下方的話，則改用這段文字：
       <div class='post-header'>
       <div class='post-header-line-1'><span class='post-labels'>
           <b:if cond='data:post.labels'>
             <data:postLabelsLabel/>
             <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
             </b:loop>
           </b:if>
         </span>
       </div>
       <div class='post-header-line-2'>
         <span class='facebook-like-button'>
           <b:if cond='data:blog.pageType == "item"'>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='tahoma' show_faces='false' width='450'/>
           </b:if>
         </span>
       </div>
   
   其中，紫色粗體字的部份，請換成你先前從 facebook 官方網站中複製下來的程式碼。
4. 到這裡，在文章標題下方插入 facebook like button 的步驟就完成了。接下來要在文章底部，Blogger 官方分享按鈕的右邊或下面，也放置一個 like 按鈕。
5. 按 Ctrl + F 搜尋 post-footer-line，會找到類似這樣的一段文字：
       <div class='post-footer'>
       <div class='post-footer-line post-footer-line-1'/>
         <div class='post-footer-line post-footer-line-2'><span class='post-comment-link'>
   ...
   
   之所以說「類似」是因為，post footer 這個文章尾部的地方，總共有三行，分別是 post footer line 1 ~ post footer line 3，這三行內的小外掛，像是作者、分享按鈕、留言連結、五顆星評價、讀者反應調查...等，位置是可以隨意更動的。
   
   假如，你曾經在 Design > Page Elements頁面，按 「網誌文章」的「編輯」，用滑鼠拖曳的方式調整這些小外掛的位置的話，那麼，在你的樣板中，程式碼的順序也會跟著更動。
   
   這些小外掛各自的功能，可以從程式碼中看出來，像是<span class='post-comment-link'>指的是文章回應的連結，<span class='post-author vcard'>指的是作者名片的連結...等。
6. 假設你跟我一樣，想要把 like 按鈕放在 Blogger 官方分享按鈕右方的話，按 Ctrl + F 搜尋 class='post-share-buttons' ，可以找到像這樣一段文字：
         <div class='post-share-buttons'>
           <b:if cond='data:post.sharePostUrl'>
             <b:include data='post' name='shareButtons'/>
           </b:if>
         </div>
   注意，從 <div ... 到 </div> 是一個完整的單位，如果看到多出一個 </div> 的話，那是上一層元素 post-footer-line-x 的結束標籤，在貼上程式碼之前，記得把上一層的結束標籤分離，讓它自己獨自一行，以免和我們等一下要貼的程式碼混在一起，那樣的話，會產生標籤對應錯誤（開頭標籤跟結束標籤不成對）的問題。
7. 把紅色字的部份貼到上面這段程式碼的下方，變成這樣：
         <div class='post-share-buttons'>
           <b:if cond='data:post.sharePostUrl'>
             <b:include data='post' name='shareButtons'/>
           </b:if>
         </div>
         <span class='facebook-like-button'>
           <b:if cond='data:blog.pageType == "item"'>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='tahoma' show_faces='false' width='450'/>
           </b:if>
         </span>
   其中，紫色粗體字的部份，一樣用你自己的程式碼代替。
8. 到這邊，在文章底部分享按鈕右邊，插入 facebook like 按鈕的步驟，就完成了。
9. 假設，你想要讓 post footer 的 facebook like 按鈕，跟 post header 一樣，自己獨立一行、不要接在別的外掛之後的話，請回到步驟 6 ，搜尋 post-footer-line-1 後，在post-footer-line-1之前、post-footer之後，插入這段文字（紅色代表插入的部份）：
       <div class='post-footer'>
       <div class='post-footer-line post-footer-line-4'>
         <span class='facebook-like-button'>
           <b:if cond='data:blog.pageType == "item"'>
   <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='tahoma' show_faces='false' width='450'/>
           </b:if>
         </span>
       </div>
       <div class='post-footer-line post-footer-line-1'/>
   ...
   其中，紫色的部份一樣換成你自己的程式碼。如此一來，就產生了一個獨立的、第四行的 post footer line，專門容納這個 like 按鈕。
   
   上述作法是讓 post-footer-line-4 放在 post footer 的最上方，如果你希望換位置，可以自己手動把它跟 post-footer-line-1 , post-footer-line-2 , post-footer-line-3 等前後挪動。注意，挪動程式碼的時候，要仔細檢查 html 的標籤是否成對，不然會產生語法錯誤。（如果你對 html 很陌生，那麼，如果不是很龜毛的話，還是盡量不要挪動吧！）
10. 以上，大功告成！

這個按鈕中的文字，是英文 en_US，根據官方的說明文件，可以改成自己的語言，國人的語言自然是 zh_TW。不過，即使修改了語言設定，它仍然是顯示英文，大概是因為正體中文的版本還沒做好的關係吧，所以我就不去更動語言設定了。

另外，大家可以發現，在 facebook 提供的程式碼前後，包裹著一個 b:if 條件式，條件式的意思是「假設目前的頁面，是單篇文章的頁面的話，則顯示裡面這些內容...」

為什麼要這樣做呢？那是因為，facebook 的 like button 預設是抓取目前頁面的網址，而不是按鈕所在的文章的網址。所以，如果在首頁中，同時有很多篇文章的時候，按下任何一篇文章的 like，都會變成「對網誌的首頁按讚」而不是「對某篇文章按讚」，然後，首頁上所有的文章內的 like 按鈕都會顯示為被按下讚的狀態。這當然不是我們希望的狀況，所以，我們要在樣板中指定，只有單篇文章頁面，才會秀出這些 like 按鈕。

以上，有問題歡迎留言喔 ^^