有好些網友問過豆丁，如何在每篇文章加「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>前，貼上下面的程式碼：
步驟3）貼Facebook的程式碼
以Ctrl+F尋找 <body ，然後在 <body那行文字的後面加上以下程式碼：
步驟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/
＞＞ 繼續閱讀《Blospot教學》
＞＞ 你可能會喜歡豆丁的其他專欄：
＊《微故事＠豆氏村》 ＊《豆丁遊世界》
＊《簡單食譜》
＊《嘰哩咕嚕》
先介紹專業人士的聰明方法吧！
豆丁推薦以下這個網頁：
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>前，貼上下面的程式碼：
步驟3）貼Facebook的程式碼
以Ctrl+F尋找 <body ，然後在 <body那行文字的後面加上以下程式碼：
步驟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/
＞＞ 繼續閱讀《Blospot教學》
＞＞ 你可能會喜歡豆丁的其他專欄：
＊《微故事＠豆氏村》 ＊《豆丁遊世界》
＊《簡單食譜》
＊《嘰哩咕嚕》
請按此登錄後留言。未成為會員? 立即註冊