Pages

2012-03-12

替Google Blogger加入Facebook留言

Facebook Comments留言功能主要的優勢是挾帶3.5億臉書用戶的普及度,不需另行註冊即可在各種平台留言,帶來很方便的互動效果。然而,Google Blogger網誌設定中的「版面佈置/Blog Posts」區塊並不支援Facebook留言嵌入功能(畢竟是社群應用市場的競爭對手),因此我透過置底的「HTML/Javascript小工具」佈署這樣的功能。

1. 閱讀重灌狂人的教學文章「在部落格嵌入 Facebook 留言板,借3.5億個會員讓流量破表!」,取得Facebook Comments的嵌入程式碼。
Facebook Code

2. 在Blogger設定的「版面佈置」下方加入一個HTML/JavaScript小工具。Blog Posts處並無法嵌入語法,我也不想每次post文時都在文章下方把這些嵌入碼置入,畢竟模組嵌入的獨立原則概念必須把持。
Blogger Layout

3. 重點來了,留言的資料是依賴Facebook Plugin Code中的「data-href」來區別,但我們無法以伺服端語言自動產生網址,所以我用Javascript的document.location變數來代替,新增如下代碼:

<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>

4. 測試一切正常,雖然留言位置無法跑到最適當的文章下方,但還能接受。
Facebook Comments

Post a Comment