在每篇文章顯示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>前,貼上下面的程式碼:


步驟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教學

>> 你可能會喜歡豆丁的其他專欄:
*《微故事@豆氏村
*《豆丁遊世界
*《簡單食譜
*《嘰哩咕嚕

如果喜歡我們的文章,請即分享到︰