Blogger 與 FB 的互動

下午一時興起，把Blogger和FB做連結。
兩項工作：1.在頁尾置入「讚」；2.置入FB留言系統。



「讚」比較簡單，參考 http://webok.tw/2010/12/facebook-like-button.html 即可。
這裡順便備份方法。

1. 複製下列程式碼

<script>
document.write(&#39;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?href=<data:post.url/>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; style=&quot;border:none; overflow:hidden; width:450px; height:65px&quot;&gt;&lt;/iframe&gt;&#39;);
</script>

2. 開啟Blogger後台 > 設計＞修改HTML＞修改範本，記得勾選「展開小裝置範本」，尋找

<b:include data='post' name='post'/>

3. 在該行後輸入 </br> ，貼上剛剛的程式碼。

4. 存檔，收工。


置入FB留言系統
在網路上查了一些教學文章，方法好多...測試了一陣子才找到可以用的...
我是參考這兩篇：http://blog.seo-tw.org/2011/04/bloggerfacebook-commentsfacebook.html 、 http://blog.aeon.tw/2011/10/bloggerfacebook.html

1. 到 FB 申請APP應用 (http://developers.facebook.com/docs/plugins/) ，找到 Comments (https://developers.facebook.com/docs/reference/plugins/comments/)

2. 取得相關code之後，會發現裡面的code長得和網路上搜尋來的不太一樣...

Comments 生給你的code

   (1)

<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&appId=178020792315943";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

   (2)

<div class="fb-comments" data-href="http://chung-yen.blogspot.com" data-num-posts="3" data-width="470"></div>

網路上的code

<div id="fb-root"></div><script src="http://connect.facebook.net/zh_TW/all.js#appId=YOUR APP ID&amp;xfbml=1"></script><fb:comments href="" num_posts="2" width="500"></fb:comments>

最後我的方法是結合運用...

3. 開啟Blogger後台 > 設計＞修改HTML＞修改範本，記得勾選「展開小裝置範本」，尋找

<b:includable id='comments' var='post'>

貼上以下

<div id="fb-root"></div><script src="http://connect.facebook.net/zh_TW/all.js#appId=自行更換appid號碼&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="2" width="500"></fb:comments> 

4.存檔，收工！