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>前,貼上下面的程式碼:





步驟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/
https://support.twitter.com/articles/231474



>> 繼續閱讀《Blospot教學

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

12 則留言:

  1. 我都整左個面書讚好,因為blogger預設G+ and FB share,所以洗剩個like :)

    回覆刪除
  2. 豆丁都要「研究」了很久,咁我唔整lu. heheheh

    回覆刪除
    回覆
    1. 你唔整,大家都識去你個網誌~~~~^^

      刪除
  3. 豆丁方法一D都唔笨,係海豚兒心目中,直頭係博士級呀呀呀!!!

    回覆刪除
  4. mamamia,太難了,完全失控,放棄!

    回覆刪除
    回覆
    1. 一步一步跟着做,可能會比較容易~
      不過,不要緊吧~ 網誌有好的內容最重要^^

      刪除
  5. 多謝你牙,我原本都試過好多方法唔WORK,本來想放棄,之後用左你個方法我個FACEBOOK LIKE就出左來喇^^多謝你好用心咁教我地,繼續支持你~

    回覆刪除

Related Posts Plugin for WordPress, Blogger...