如何將 Facebook 的"讚"與"分享" 加到 blogger 的每一篇文章

好不容易找到解決問題的文章，結果因為日期太舊已不適用，這是程式設計最遇到的麻煩

How To Add A Facebook Like/Share Plugin to Blogger/Blogspot Posts?

注意，本篇文章建立於 2017 年。Facebook 或 Blogger 隨時有可能升級而讓我的方式不再適用。因此，如果你發現這篇文章不再適用時，請告知我一聲，並且搜尋更新的文章。

其實在此刻，仍然可以 google 到一堆文章，只是 facebook 變化較大，許多介面都已經改觀，而不少人分享的作法也不再能用，因此重寫一篇作為筆記。

Step 1. 來到 Blogger 的後台(dashboard)→選擇「主題(Template)」→選擇「編輯HTML(Edit HTML)」

Step 2. 在編畫面中搜尋以下字串

<data:post.body/>

Step 3. 你會發現有 2 、3 個符合的字串，我們要找的 <data:post.body/> ，在它的上方通常會有一段註解：

<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->

Step 4. 就是在這個 <data:post.body/>，貼上以下程式碼，而你也不必理會 appID，直接貼上即可。

<div>
  <iframe allowTransparency='true' expr:src='&quot;https://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;height=80&amp;action=like&amp;share=true&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='80' scrolling='no' style='border:none;overflow:hidden' width='450'/>
</div>

以我自己在寫這篇文章的時候，即發現 2013 年(距離本篇 4 年前) 的文章就已經不適用，例如 XFBML 格式在 2017 已不再主動提供，因此我翻了不少文章才找到解決的方式。

Like 的形式有很多種，本篇範例以標準為主，其餘有更精簡的顯示方式，可以參考以下的文章[1]。

參考資料

[1] How To Add A Facebook Like Button to Blogger Posts, by Dana, 2013.

(Photo via Seabamirum / Expired, CC License)