加入FB 讚＋寄出，於每篇文章前或後

Add Facebook XFBML Like Button to Blogger

(XFBML) version－－Like button along with count and send
--for XFBML (have FB Page) user only

這個版本加了二個革命性的重要功能：1、幫你做精準行銷 2、病毒行銷

功能一

除了可以按「讚」外，還多了一個「寄送」的選項，若是有讀者特別喜歡你的某篇文章，甚至想要收藏起來、或是寄給某個需要該文內容的目標對象，這簡直就是直接幫你做推薦、轉介紹、以及精準行銷，連行銷對象都幫你設定好了！（呵呵，突然在我腦海裡出現一個武俠畫面－－－尚方寶劍，出鞘必見血！）好啦，我知道我太投入了……

功能二

讓我們按讚的同時，還可以留下評論，這樣使讚的功能更為大幅提高，不但加大了讀者打開連結網頁的機會，甚至無形中，還讓你的讀者群有機會將你的某篇文章，因為按讚分享出去後，還產生了討論的效應！

好吧，接下來我們就來看範例，究竟這件事是怎麼發生的……

The best feature of XFBML version is when someone likes your post and wants to share it in their Facebook profile, it will open a comment box to add his comment. They can also send your post to their friends whom they like to.

首先，必須到FB的官網申請專屬於你的程式碼（記得先登入FB），接下來你就會看到這個頁面，把空格處填入相關資訊，再按下「Get Code」鍵即可。

In the XFBML part there will be two set of snippets, the first one is the script and next is the button snippet (highlighted in blue) to render it.

Step 1.

進入後台，選擇 範本 > 修改HTML > 按繼續 >勾選"展開小裝置範本"。

Step 2.

打開「修改HTML」後，找到下面我以粗體字標示出來的地方：

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

在這段文字的後面，加入如下的語法

xmlns:fb='http://ogp.me/ns/fb#'

記得要加入一個半形字的空格，所以，出來的結果應該看起來像這樣：

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

這個語法的功能是，讓舊版本的瀏覽器（如IE），也可以產生作用。

Step 3.

找到 <body> (若你用的是Google Blogger內建的範本，請找這段語法：<body expr:class='"loading" + data:blog.mobileClass'>
找到之後，直接（不須任何空格或分段）在後面加入你剛才在FB官網取得的程式碼第一段，如下：

<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 = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

請記得要確認程式碼中標式的語文是否是繁體中文（zh_TW），大部份直接給的會是英文（en_US）,記得把它代換為繁體中文，否則你的網友們看到的就不是「讚」，而是「Like」了。

當然，如果你的部落格不是使用繁體中文，也請記得將語言改為您使用的文字（紅色部份），在這裏的例子（zh_TW）舉例的是台灣，使用繁體中文。

**上例原作者將FB官網提供的程式碼稍作修正，但是更為方便，連粉絲頁的APP ID都不必寫進去了！

Step 4.

找到 <data:post.body/> ，在後面（或前面，看你想把他放文章最前面或最後面）直接加入你剛才在FB官網取得的程式碼第二段，如下：

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='like'>
<fb:like expr:href="data:post.url" send="true" show_faces="true" width="450" font="arial"></fb:like>
</div>
</b:if>

在這裏加的是第二段程式碼，原作者也做了更好的修正（即語法中綠色的部份），原來官網產生的程式碼在按「讚」後，只會在FB牆上顯示該篇文章的URL，而作者使用的修正碼則會直接顯示超連結。

至於你看到藍色語法的部份，也是原作者額外加入的，這個目的是讓「讚」與「寄送」的選項會在你所有的頁面。

這個部份是比較困難的步驟，要注意哦：

中間被”fb:lke”標籤包圍的部份，是必須再依每個人的狀況更改的。

當你在FB官網依序填入你的選擇後，會產生一組程式碼，也就是出現在程式碼第三段的語法

只會在以我個人為例，我喜歡如下圖的呈現方式：

337

Send

所以我的程式碼就是：

<fb:like href="http://blog-me-sharon.blogspot.com/" send="true" layout="button_count" width="150" show_faces="false"></fb:like>

但因為必須將href="http://blog-me-sharon.blogspot.com/"改為 expr:href="data:post.url”，所以在修改後，這一行的語法會變成：
<fb:like expr:href="data:post.url" send="true" layout="button_count" width="150" show_faces="false"></fb:like>

接著，再把改好的語法，放進由藍色<if>包圍的中間，那麼前面整段語法會變成：
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='like'>
<fb:like expr:href="data:post.url" href="http://doctor-lin.blogspot.com/" send="true" layout="button_count" width="700" show_faces="false"></fb:like>
</div>
</b:if>

另外，包括寬度單位（width）、是否顯示大頭貼（show_faces="true"）、是否出現「寄送」選項（send="true）都是可以依你自己的喜好更改，不要就是false，要就是true，你可以隨心所欲的設定。

Step 5.

到這裏就大功告成囉！！別忘了在存檔後，也將你的範本下載到你的硬碟裡備份。

到處亂說

Linkbar