Blogger 的標題加上 Facebook 官方的推文按鈕

之前協助 Rogan 在他的 Blogger 上加上Facebook 計數推文按鈕
才知到原來沒什麼人寫這樣的文章
今天也為自己的 Blogger 加上推文按鈕
順便寫下教學文


首先先到 Facebook 分享 選好需要的樣式
如果要選擇『自訂網址』請再輸入匡填入 data:post.url
所以你會看像這的 HTML 程式碼：

<a name="fb_share" type="button_count" share_url="data:post.url" href="http://www.facebook.com/sharer.php">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

再來要符合 Blogger 樣版語法必須在 share_url 前面加上 expr:
這樣我們才可以使用 data:post.url 這個樣版變數
再來為了讓 UI 有更清楚的標示再加上 title="分享至 Facebook" 這個屬性
最後修改就會像下面這樣：

<a name="fb_share" type="button_count" expr:share_url="data:post.url" href="http://www.facebook.com/sharer.php" title="分享至 Facebook">分享</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

打開『版面配置』→『修改HTML』
將『展開小裝置範本』打勾

找到 <h3 class='post-title entry-title'>及 </h3>
小技巧：所有的瀏覽器都有搜尋功能(Ctrl + F)，只要搜尋 "post-title" 就可以找到這行了
將 <a name="fb_share"... 這行貼在 </h3> 前面

再去搜尋 </body> 這一行
將 <script src="http://static.ak.fb... 貼在 </body> 前面


這時候就可以先預覽如果沒問題就存檔
這時候應該會看起來會像這樣：


下面是其他人寫的教學：
Blogger + facebook分享計數按鈕
如何在Wordpress或Blogger加上【Google Buzz推文分享按鈕】？