Blogger新範本文章網頁嵌入Facebook官方留言板
今天看到一篇新聞報導：繼臉書後，社群網站Google+也捲入個資外洩風暴，數十萬用戶資料曝光，Google因此宣布個人版Google+將走入歷史。給予用戶10個月時間下載並轉移資料，預定明年(2019)8月完全停止服務。Google+終止消費端功能後，未來只會開放給企業客戶，供企業內部交流使用。
畢竟Google+的使用者無法有效提升，停止社群網站Google+服務也是早晚的事。所以先把原本的Google+留言板改為Facebook臉書官方留言板，爬了很多文，都找不到一篇針對Blogger新主題(範本Contempo、Soho、Emporio、知名)各個文章網頁安裝fb官方外掛留言框的文章。
Facebook官方留言板原始設定是整個網站使用同一個留言板，也許有的人喜歡，但我想要的是每一個文章網頁都有屬於它自己的留言板，後來自己參考Google+留言板官方所提供的程式碼<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>，和Facebook官方留言板的程式碼做比對，
將data-href="https://licoriceguava.blogspot.com"
換成expr:data-href="data:post.canonicalUrl"
便可以讓每一個文章網頁都有屬於它自己的facebook官方留言板
詳細作法如下：
首先要到facebook for developers申請使用facebook官方留言板
回應的網址：輸入你的部落格網址，如https://licoriceguava.blogspot.com/
寬度：可輸入像素值或寬度的比例%，我是用100%
按下[取得程式碼]
步驟一、將Step 2 的程式碼加到body tag中，如</body>的上一行。
若發生主題無法判讀的程式碼，如js.src = 'https://connect.facebook.net/......的這一行，可以複製此行，到修改成範本語言網站，貼上，按下[make it friendly]，將產生的程式碼替換原本的無法判讀的程式碼即可。
步驟二、將Step 3 的程式碼加到新增小工具[HTML/JavaScript]，然後移動此小工具到想顯示facebook官方留言板的位置。
基本上這樣算完成了。不過這個原始設定是整個網站使用同一個留言板，但我想要的是Blogger每一個文章網頁都有屬於它自己的留言板，所以就要把Step 3 取得的程式碼做修改，把程式碼中的
data-href="https://licoriceguava.blogspot.com"
換成Google+留言板官方所提供之程式碼中的 expr:data-href="data:post.canonicalUrl"
結果fb官方Step 3 的程式碼修改如
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="100%" data-numposts="5"></div>
這樣，Blogger網誌中每一個文章網頁都有屬於它自己的Facebook官方留言板。
最後如果想在Blogge新主題範本(Contempo、Soho、Emporio、知名)中，不使用小工具顯示facebook留言板，而是要在每篇網誌文章底部的這個位置加入Facebook官方留言板，且不在首頁出現，則不需執行以上步驟一和步驟二，直接到後台【主題】→【編輯 HTML】，按【Ctrl】+【F鍵】搜尋字串
<b:include data='post' name='post'/>
在此字串的下一行插入Step 2和Step 3合併的程式碼
<b:if cond='data:blog.pageType == "item"'>
<!--fb官方Step2程式碼-->
<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 = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1&appId=5792070499&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--fb官方Step3程式碼-->
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="100%" data-numposts="5"></div>
</b:if>
上方程式碼中appId=，須是自己的[應用程式編號]，而<b:if cond='data:blog.pageType == "item"'>和</b:if>，用意是讓程式只在個別文章中顯示，不在首頁顯示。
若要在facebook官方留言板中加入如上圖的[審核工具]，做fb留言板管理，則要在<head>的下一行，插入下面兩個字串的其中一個。
<meta content='123456789012345' property='fb:app_id'/>
<meta content='1234567890123456' property='fb:admins'/>
fb:app_id那一行的數字123456789012345為[應用程式編號]，可以在facebook for developers的[我的應用程式]中看到。
fb:admins那一行的數字1234567890123456為[粉絲專頁編號]，可以在粉絲專業左側欄的[關於]中看到。
fb官方說明有兩個重點：
1、以 Facebook 應用程式設定（建議方式）。
2、您可指定 fb:app_id 或 fb:admins，但不可同時指定兩者。
以上便完成了在Blogger新主題(Contempo、Soho、Emporio、知名)中，facebook官方留言板只各個文章底部的位置中顯示，而在首頁不顯示。
推薦網誌：宜蘭傳藝中心門票限時優惠買1送1 - 小美輕鬆旅
畢竟Google+的使用者無法有效提升，停止社群網站Google+服務也是早晚的事。所以先把原本的Google+留言板改為Facebook臉書官方留言板，爬了很多文，都找不到一篇針對Blogger新主題(範本Contempo、Soho、Emporio、知名)各個文章網頁安裝fb官方外掛留言框的文章。
Facebook官方留言板原始設定是整個網站使用同一個留言板，也許有的人喜歡，但我想要的是每一個文章網頁都有屬於它自己的留言板，後來自己參考Google+留言板官方所提供的程式碼<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>，和Facebook官方留言板的程式碼做比對，
將data-href="https://licoriceguava.blogspot.com"
換成expr:data-href="data:post.canonicalUrl"
便可以讓每一個文章網頁都有屬於它自己的facebook官方留言板
詳細作法如下：
首先要到facebook for developers申請使用facebook官方留言板
寬度：可輸入像素值或寬度的比例%，我是用100%
按下[取得程式碼]
若發生主題無法判讀的程式碼，如js.src = 'https://connect.facebook.net/......的這一行，可以複製此行，到修改成範本語言網站，貼上，按下[make it friendly]，將產生的程式碼替換原本的無法判讀的程式碼即可。
步驟二、將Step 3 的程式碼加到新增小工具[HTML/JavaScript]，然後移動此小工具到想顯示facebook官方留言板的位置。
基本上這樣算完成了。不過這個原始設定是整個網站使用同一個留言板，但我想要的是Blogger每一個文章網頁都有屬於它自己的留言板，所以就要把Step 3 取得的程式碼做修改，把程式碼中的
data-href="https://licoriceguava.blogspot.com"
換成Google+留言板官方所提供之程式碼中的 expr:data-href="data:post.canonicalUrl"
結果fb官方Step 3 的程式碼修改如
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="100%" data-numposts="5"></div>
這樣，Blogger網誌中每一個文章網頁都有屬於它自己的Facebook官方留言板。
最後如果想在Blogge新主題範本(Contempo、Soho、Emporio、知名)中，不使用小工具顯示facebook留言板，而是要在每篇網誌文章底部的這個位置加入Facebook官方留言板，且不在首頁出現，則不需執行以上步驟一和步驟二，直接到後台【主題】→【編輯 HTML】，按【Ctrl】+【F鍵】搜尋字串
<b:include data='post' name='post'/>
在此字串的下一行插入Step 2和Step 3合併的程式碼
<b:if cond='data:blog.pageType == "item"'>
<!--fb官方Step2程式碼-->
<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 = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1&appId=5792070499&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--fb官方Step3程式碼-->
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="100%" data-numposts="5"></div>
</b:if>
上方程式碼中appId=，須是自己的[應用程式編號]，而<b:if cond='data:blog.pageType == "item"'>和</b:if>，用意是讓程式只在個別文章中顯示，不在首頁顯示。
若要在facebook官方留言板中加入如上圖的[審核工具]，做fb留言板管理，則要在<head>的下一行，插入下面兩個字串的其中一個。
<meta content='123456789012345' property='fb:app_id'/>
<meta content='1234567890123456' property='fb:admins'/>
fb:app_id那一行的數字123456789012345為[應用程式編號]，可以在facebook for developers的[我的應用程式]中看到。
fb:admins那一行的數字1234567890123456為[粉絲專頁編號]，可以在粉絲專業左側欄的[關於]中看到。
fb官方說明有兩個重點：
1、以 Facebook 應用程式設定（建議方式）。
2、您可指定 fb:app_id 或 fb:admins，但不可同時指定兩者。
以上便完成了在Blogger新主題(Contempo、Soho、Emporio、知名)中，facebook官方留言板只各個文章底部的位置中顯示，而在首頁不顯示。
