給blogger來個讚 - like button - Fresh Meat

2013年2月18日星期一

給blogger來個讚 - like button

標籤： blogspot, facebook

到 facebook developers 填入基本參數，像是網址（URL to Like）、寬度（Width）、是否要顯示頭像（Show Faces）等等，然後點擊 Get Code，因為使用 IFRAME 的話，在首頁裡頭拿不到各別文章正確的網址，所以使用 XFBML 語法。

步驟：

到 Blogger 後台，先備份 template。點選「範本」、「編輯 HTML」，將以下語法放到</body>後面，即 XFBML 第一欄的 Code。

<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'));</script>

把 XFBML 第二欄，xmlns這個屬性新增到<html>標籤當中。

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

為了取得個別文章的網址，所以必須把第三欄其中的 href="http://humanity-pure.blogspot.tw"，用 expr:href='data:post.url' 取代，然後把整個語法放到<post-footer-line-2>後面。
```
  <div class='post-footer-line post-footer-line-2'>
          <fb:like expr:href='data:post.url' send='false' show_faces='false' width='450'/>
  </div>
```

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)