如何在部落格放 Facebook 的「讚」按鈕(以 WordPress 為例)

作者:

由於使用Facebook的人越來越多,透過FB上人際關係所引來的流量似乎也有快速增加的趨勢,如果你希望在部落格或網站上放上Facebook的「讚」按鈕,讓網友們讀完文章後可以馬上按「讚」把文章推薦給FB上的朋友,可以試試看Facebook提供的Social plugins外掛程式把「讚」按鈕放自己的部落格上。

FB的「Like Button」提供兩種嵌入按鈕到網頁的方式,一種是比較簡單的iframe插入,另外一種比較複雜,需透過XFBML與JavaScript SDK的方式來達成。以下介紹簡單的用iframe框架頁嵌入,只要填寫好你要顯示「讚」按鈕的網頁網址,並設定一下按鈕樣式、區塊寬度、字型...等等細節,最後再按一下「Get Code」按鈕即可完成。


  • 網站名稱:Facebook Social plugins
  • 網站網址:http://developers.facebook.com/docs/reference/plugins/like/
  • WordPress專用嵌入程式碼:

    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=600&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:35px;" allowTransparency="true"></iframe>

  • 重灌狂人Facebook粉絲專頁:http://www.facebook.com/briiancom

     

     

    使用方法:

    第1步  開啟Facebook Social plugins網站,按一下「Like Button」。網頁上還有很多實用的Facebook外掛工具,有興趣的話可以陸續試用看看。

    01  

     

    第2步  開啟「Like Button」設定頁面後,先在「URL to Like」方框填入「00000」,這是為了等等修改程式碼時好辨識用的。如果你的「讚」按鈕要放在固定網址的單一頁面,可以直接把網頁網址填上去。如果你是使用WordPerss或其他架站系統,可以先填上「00000」,然後等一下再把網頁網址的參數替換上去就可以。

    其他欄位請依照你的使用需求填一填,再按一下「Get Code」按鈕。

    02

     

      

    第3步  接著請將「iframe」方框中的程式碼全選後按右鍵、複製下來。

    03  

     

    第4步  本文是以WordPress架站程式為例,用純文字檔編輯器開啟「\wp-content\themes\佈景主題名稱」資料夾中的「single.php」檔案,找到「<?php the_title(); ?>」這一行,在下方貼上剛剛的「讚」按鈕程式碼:

    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=600&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:600px; height:35px;" allowTransparency="true"></iframe>

    記得要把程式碼中的「00000」替換成「<?php the_permalink() ?>」,修改完後請存檔並將檔案上傳到網頁伺服器上。

    04 

    注意!一般WordPress佈景主題的設計中,是「single.php」用這個檔案來控制單篇文章的內容呈現,如果你沒找到「single.php」檔案,則可能是整合在「index.php」檔案裡了。因為不同佈景主題有不同的設計與變化,請依照實際狀況修改。

      

     

    第5步  更新完佈景主題檔案後,我們可以看到網頁標題下方多出了一個Facebook的「讚」按鈕,請直接按下去試試看可否正常運作。

     05

     

    第6步  按完讚之後,還可以在上面直接發表留言。

    06



    无觅相关文章插件,快速提升流量

    非經授權,請勿全文轉載,本文網址:
    → 免費訂閱最新文章:  (如何訂閱?)
    作者: | 發佈日期: | Tags:
    注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤、當機或軟硬體衝突,影響您的工作或電腦運作。另外,在進行任何重要的操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。

     

    歡迎留下你的想法或意見...

    1. hello 說道:

      請問可以幫我用嗎 一直是錯誤 用了一整天都失敗 可給小費 可以幫忙嗎

    2. t19930916 說道:

      試了很多方法都是亂碼呢!
      只要有中文網站標題分享都變亂碼……

    發表迴響

    你的電子郵件位址並不會被公開。

    你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>