Blogger 嵌入 Facebook Comments
超級簡易版
<div id="fb-root"></div>
<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'));
document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>
後台管理版
1.首先要去 Facebook 開發人員網頁建立一個新的應用程式（可按我前往）
2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID，方法如下：
Facebook查看個人首頁，如果網址是以下這種，那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字
如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱
代表你的個人首頁已經命名過了，那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱
進去後會看到「"id":"數字"」，那串數字就是你的帳號ID。
3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾，開始艱辛的修改程式碼的步驟（變動前最好先將整份範本備份一下）。
（可按下Ctrl+F）搜尋 "<head>" (是""裡的字串不包括"")，在這行下方新增一行貼上這兩行：（記得帳號ID和應用程式ID要置換成你剛剛取得的）
<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>
4. 搜尋 "<body" (是""裡的字串不包括"")，在這行下方新增一行貼上以下的程式碼：
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '你的應用程式 ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('xfbml.render', function(response) {
});
FB.Event.subscribe('auth.sessionChange', function(response) {
// 當 Facebook session 改變時通知
});
FB.Event.subscribe('edge.create', function(response) {
// 當有人按讚時通知
});
FB.Event.subscribe('comments.create', function(response) {
// 當有新留言時通知
});
};
(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#appId=你的應用程式ID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼，通常建議都放每篇文章結束後的下方，所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括"")，找到這個位置，在下面新增一行貼上這行：
<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>
2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID，方法如下：
Facebook查看個人首頁，如果網址是以下這種，那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字
如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱
代表你的個人首頁已經命名過了，那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱
進去後會看到「"id":"數字"」，那串數字就是你的帳號ID。
3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾，開始艱辛的修改程式碼的步驟（變動前最好先將整份範本備份一下）。
（可按下Ctrl+F）搜尋 "<head>" (是""裡的字串不包括"")，在這行下方新增一行貼上這兩行：（記得帳號ID和應用程式ID要置換成你剛剛取得的）
<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>
4. 搜尋 "<body" (是""裡的字串不包括"")，在這行下方新增一行貼上以下的程式碼：
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '你的應用程式 ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('xfbml.render', function(response) {
});
FB.Event.subscribe('auth.sessionChange', function(response) {
// 當 Facebook session 改變時通知
});
FB.Event.subscribe('edge.create', function(response) {
// 當有人按讚時通知
});
FB.Event.subscribe('comments.create', function(response) {
// 當有新留言時通知
});
};
(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#appId=你的應用程式ID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼，通常建議都放每篇文章結束後的下方，所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括"")，找到這個位置，在下面新增一行貼上這行：
<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>
而我們辛辛苦苦這麼多做這麼多步驟，無非就是為了可以管理呀（不然就用超級簡易版就好了）！按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了，或者你也可以去專屬的後台網站去管理，網址是：https://developers.facebook.com/tools/comments。
如上圖藍色部分，如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的，如果這塊有奇奇怪怪的錯誤資訊，代表你有哪個地方沒設對，可以去 Debugger網站抓一下 bug，網址是：https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區，代表你有哪個環節有問題，請自行照上面的錯誤提示去修改囉！修改完再測一次，紅色區塊消除的話，代表設定成功囉！
全站熱搜
留言列表
