豆丁主義（生活。遊記。插畫。故事）: 在每篇文章顯示like或+1

2013年10月16日星期三

在每篇文章顯示like或+1

有好些網友問過豆丁，如何在每篇文章加「like」等社交資訊，豆丁都不好意思分享，因為豆丁覺得自己的方法笨笨的><~ 今天，豆丁如常推介了一些網頁，但是好奇心催使我也試一試，才發覺笨方法也有笨方法的好^^~

先介紹專業人士的聰明方法吧！

豆丁推薦以下這個網頁：
http://www.bloggersentral.com/2012/01/aligning-google-1-twitter-and-facebook.html

如果想進一步修改上面Bloggersentral提供的程式碼，可以看：
http://www.digitalkonline.com/blog/how-to-add-social-media-buttons-to-blogger-posts/

Bloggersentral提供的方法簡單，而且顯示多種社交網站的按鈕。豆丁也跟着做了一次，但不知為什麼，在預覽時，所有數字都是正常的，但是回到實際網誌，全部數字都變成零。（豆丁發現，自己按了'like'，'like'的數字會變正常，但是從另一台電腦看，還是零><...）

豆丁不是電腦人，「研究」了很久，還是解決不了問題，唯有回到自己的笨笨方法^^""

＊歡迎高人指點指點～

豆丁的笨笨方法

豆丁的笨方法是：用人手為每篇文章加'like'或'+1'。

豆丁特別選擇了「like」或「+1」，皆因讀者大多使用facebook和Google+～

由於以下方法涉及程式碼，需要特別小心處理，豆丁建議大家先做備份！（備份方法，請看《美化Blogspot，備份要緊！》。）

步驟1）到「範本」＞「自訂HTML」

步驟2）貼Google+的程式碼

先以Ctrl+F尋找 </body> ，然後在</body>前，貼上下面的程式碼：

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

步驟3）貼Facebook的程式碼

以Ctrl+F尋找 <body ，然後在 <body那行文字的後面加上以下程式碼：

<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/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

步驟4）儲存範本的程式碼

恭喜你！成功了一半啦～

上述步驟算是把「軟件」裝到你的網誌吧，現在要為文章輸入資料，啟用「軟件」。

步驟5）複製文章的網址

在文章右欄的設定，複製網址（上圖黃圈）。
＊自訂網址的好處，請看《提高網誌的搜尋排名：入門班》。

步驟6）編寫文章後，按「HTML」，在心水位置貼上以下程式碼：

<table id="social-media" class="tftable" border="0" vertical-align="middle"><tr><th><g:plusone href="文章網址"></g:plusone></th><th><div class="fb-like" data-href="文章網址" data-send="true" data-width="450" data-show-faces="true" data-font="arial"></div></th></tr>
</table>

備註：
1. 把文章網址貼到上面「文章網址」處（共出現兩次）。
2. 要顯示facebook的"send"（即share），請保留data-send="true"；
不想顯示"send"，請把true換成"false"。
3. 大家可於data-width，修改Facebook按鈕所佔的空間（包括顯示已按'like'的朋友）。
4. 要顯示已按'like'的朋友，請保留data-show-faces="true"；

不要這項顯示，請把true換成"false"。

恭喜你！你完全成功啦！

每次想文章顯示like或+1，就要重覆步驟5和步驟6。

豆丁不是要大家都變得笨笨的，覺得麻煩的，不要問豆丁如何可以變聰明啊～豆丁暫時不知道了～（＊你應該試試文章開始所介紹的聰明網頁吧～）

參考：
https://developers.google.com/+/web/+1button/
https://developers.facebook.com/docs/plugins/like-button/
https://support.twitter.com/articles/231474

＞＞繼續閱讀《Blospot教學》

＞＞你可能會喜歡豆丁的其他專欄：
＊《微故事＠豆氏村》
＊《豆丁遊世界》
＊《簡單食譜》
＊《嘰哩咕嚕》