2011年2月16日 星期三

-步驟-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 按鈕。

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

21 則留言:

  1. interest...i'm try not use javascript, just use inline syntax (source result by javascript).
    watch it...like this
    <a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=4918276818492892488&amp;postID=&quot; + data:post.id + &quot;&amp;target=facebook&quot;' target='top'>Facebook</a>
    what its the same ET galz...hihihi.
    correct me if me wrong :P

    回覆刪除
  2. i'm trying use the syntax link by default blogspot ET, for share/save/bookmark/etc lah....xixixi

    回覆刪除
  3. cool .. i have tried your code, its function is exactly the same as the official Blogger share button ! lol

    the "like button" script that Facebook made for us has less function than "share button" . i guess the "like button" is designed for those lazy guys, and "share button" is for those serious guys, so i just keep both of them. XD

    回覆刪除
  4. 如果是要放在部落格主页呢?要怎么做?
    每篇文章的下面我已经放好了
    现在我想在部落格主页放like button
    也就是banner的下面那边
    要怎么做啊
    你会不会?可不可以教我=]

    回覆刪除
  5. @LingQii :

    1. 到後台 Design -> Page Elements
    2. 在想插入按鈕的地方,按 Add a Gadget 新增小工具
    3. 選擇 HTML/Javascript 小工具
    4. 在內容欄位貼上 facebook 提供的程式碼
    5. 按儲存

    簡單吧 ^^

    回覆刪除
  6. 嗯嗯 是放到了 谢谢你啊XD
    还有一个问题想问你哦
    如果想在header下面放一些小工具
    但是没有【Add a Gadget 新增小工具】给我按
    那我要怎样加东西进header下面啊?
    还是就不可以放了?

    回覆刪除
  7. @LingQii :

    1. 到後台 Design -> Edit HTML
    2. 按 Ctrl + F 搜尋 b:section class='header
    3. 找到 b:section class='header' id='header' showaddelement='no'
    4. 把最後的 no 改成 yes
    5. 儲存樣板

    呵呵 ^^

    回覆刪除
  8. 有很多很好的“共享”按鈕,您就可以複製並粘貼在您的網站或博客。

    www.sharethisbutton.net
    www.bookmarksbutton.com
    www.bookmarkbutton.net
    www.sharehtml.net
    www.sharebutton.net

    回覆刪除
  9. 恩谢谢 哈哈
    我又有问题要问了
    我现在已经不想在每篇文章都有like button了
    要怎么去掉哦
    我试了很多次删掉那个html
    还是不行也

    回覆刪除
  10. @Diabolo Galaxy :
    感謝分享 XD

    @LingQii :
    1.在 Blogger 後台的 Design > Edit HTML,將 Expand Widget Templates 勾選
    2.按 Ctrl + F 搜尋 span class='facebook-like-button'
    3.找到以後把 span 到 /span 之間的一整段刪掉
    4.儲存樣板

    回覆刪除
  11. 求救啊.....

    請先看看這頁
    http://speciosa.blogspot.com/2011/05/dendrobium-hancockii.html

    我使用的碼是:
    div id="fb-root"/div
    span class='facebook-like-button'
    b:if cond='data:blog.pageType == "item"'
    script src="http://connect.facebook.net/zh_TW/all.js#xfbml=1"
    /script
    fb:like expr:href='data:post.url' send="true" width="450" show_faces="false" font="lucida grande"
    /fb:like
    /b:if
    /span
    (我把一些>去掉)

    但不知道為什麼每頁讚的人數都一樣是430, 超奇怪的....
    會是data:post.url出了問題嗎? 謝謝....這弄得我頭都大了
    謝謝

    回覆刪除
  12. 1. 經確認,data:post.url 是沒問題的,每篇文章都有正確反映出該文的網址。

    2. 觀察了一下,發現頁面上總共三組按鈕,header 跟 footer 的按鈕,是引入 http://connect.facebook.net/en_US/all.js#xfbml=1 這個英文語系的 script ,然而,第二組按鈕也就是文章中固定顯示 430 的按鈕,卻是引入 http://connect.facebook.net/zh_TW/all.js#xfbml=1 這個中文語系的 script。

    3. 目前懷疑是兩組 script 相衝突,可否把它們都統一成同一個語系的 script 試試?

    4. b:if 標籤其實是可以拿掉的,如果有需要的話~

    麻煩你測試一下 XDD

    回覆刪除
  13. 我也照著完成了,起初還跟fans page衝突,後來找到問題原來是FB的social plugin語法有更新所致。

    回覆刪除
  14. 我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The reference to entity "appId" must end with the ';' delimiter.

    Error 500

    一直出現這個錯誤訊息該怎麼辦><

    回覆刪除
  15. 樓樓上:感謝! XD

    樓上:你可以按 Ctrl -F 搜尋 appId 然後把附近的程式碼複製貼過來借我看一下嗎?

    回覆刪除
  16. 大大你好,我自己解決了XD
    但是我有另外兩個問題想要請教您:
    第一個是 留言區的部份,請參考
    http://0rz.tw/rjSyB

    第二個問題是 我發現我在首頁 點 文章標題連結,並沒有進入文章,還是從新回到首頁,可以麻煩您幫我看看嗎?><

    http://0rz.tw/7Wrj3
    這是我blog的程式碼

    我的email: champ2030@gmail.com

    感謝感謝

    回覆刪除
  17. (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=116906698359233";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    我的也這樣耶,而且我是直接抓fb網站上給的

    回覆刪除
  18. The reference to entity "appId" must end with the ';' delimiter.
    會出現以上的錯誤,是因為 google 本身 parse 檢查機制的問題,把 xfbml=1&appId= 這裡面的 & 改成 &amp; (也就是說變成 xfbml=1&amp;appId= ,就不會再出現這個錯誤了。

    (我貼這個留言,有點擔心,說不定它也會自己置換上述的字元,先試試看吧)

    回覆刪除