如何在部落格上放Facebook的「讚」來推薦文章?

話說Facebook是目前全球最大的社群網站,相信身旁的朋友都有Facebook帳號,大家幾乎天天都上Facebook上關心一下朋友動態或是發表一下自己的心情。當然,有時候在Facebook上面按「讚」按久了,到了一般網站看完文章覺得不錯時,也想按個讚來推一下文章,那如何在網站上放一個讚呢?

在Facebook上的社群工具中,有個「Like Button」外掛可以使用,只要將語法貼到部落格上就可以讓部落格或是網站上多一個讚,可以讓使用者看完之後順手按個讚來支持文章,當然按了讚之後,也會把這篇文章推到Facebook的個人動態上面,一來是對文章的一種支持,另一方面也增加網站曝光率。

這樣的做法就跟當年的funp推推王一樣,網站上放個推的按鈕,讓網友可以看完文章進行推薦,在社群網站上增加曝光率,替自己網站帶來流量與人氣,透過社群網站進行免費的社群行銷,不過話說回來,funp目前讓人感覺是漸漸走下坡,取而代之的就是最近火紅的Facebook這個全球最大的社群網站。

因為Facebook上有著廣大的人口,如果有機會把文章曝光在大家的個人動態頁面,相信可以替網站帶來不少的流量,算是免費曝光吧!又加上Facebook的使用人口非常的多,來擺個讚按鈕來讓網友好幫你推薦文章唷!

第1步 在Like Button的頁面上,依照畫面上的指示,依序將資料與設定輸入到欄位中,完成後點擊﹝Get Code﹞。

  • URL to Like:要推薦頁面的網址
  • Layout Style:樣式
  • Show Faces:是否顯示頭像
  • Width:寬
  • Verb to display:按鈕顯示的字樣,讚(Like)、推薦(Recommend)
  • Font:字型
  • Color Scheme:配色,亮、暗。

如何在部落格上放Facebook的「讚」來推薦文章?

第2步 接著將語法取得並貼到你要顯示按鈕的頁面就可以了,以WordPress來說,可以開啟佈景檔案中的single.php,找個位置貼上語法,就可以顯示在內頁。

如何在部落格上放Facebook的「讚」來推薦文章?

第3步 如下圖,貼上後就會出現讚的按鈕了,覺得不錯趕快按讚吧!

如何在部落格上放Facebook的「讚」來推薦文章?

為什麼推薦的頁面只有首頁?

或許根據上面的方法操作並貼上程式碼後,大家可能會好奇為什麼推薦的頁面只有首頁呢?因為你剛剛輸入的網址就是首頁,所以不管在哪個頁面出現的讚按鈕,他永遠只會推薦首頁。那該如何讓他可以順利依照頁面的不同而推薦不同的頁面呢?

以WordPress來說,如果要針對WordPress依照每個不同頁面推件不同的內容,那在語法上要做小小的修改,也就是說在語法上要透過您部落格系統本身的函式去呼叫該頁面網址,讓他會自動變動。

所以前面取得的語法中,在網址參數上,「like.php?href=」的後方就要接上一個函數「<?php echo urlencode(get_permalink());?>」,這樣才會依照不同的頁面可以推薦不同頁面的東西,不會全部推薦首頁。

因此,若您是BloggerWordPress的使用者,需要語法請到WordPress 中文指南的網站上這篇文章:為你的網誌加入Facebook推文按鈕(Like Button),取得按鈕的語法,如果看的懂原始碼可以依照自己的需求做一些簡單的調整喔!若您是其它BSP或者是自己做的網頁,那就可能每個頁面要手動貼上連結了。



  • fenfen

    請問香腸大大是否用輸出高度會和設定的高度值不同?這是為什麼?

    • http://sofree.cc/ 張香腸

      FB 自己可能有去算高度,或是你的iframe和周遭的DIV卡到,都有可能。

  • 田 梨

    感謝腸大回復,再請教一下那痞客邦的部落格有支援嗎?

    • http://sofree.cc/ 張香腸

      Pixnet 要看他們官方有沒有改,因為他們都是從系統端去針對全站加入的。

  • 田 梨

    請問香腸大為什麼我的讚按鈕不能像juksy網站一樣按下去會跳小視窗然後點下回應直接出現在他人的fb動態上嗎?

    • http://sofree.cc/ 張香腸

      應該是要採用 HTML5 的Facebook讚語法,如果你用iframe語法應該就無此功能

  • Hanher HU

    您好!我安裝FB的外掛,其中使用了 Like Button 這功能!
    設定為:<div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="false" data-share="true">

    我想知道的是,這個讚是統計哪裡的數據呢?
    我能知道是誰按了讚嗎?
    謝謝!

    • http://sofree.cc/ 張香腸

      無法得知誰按讚喔!!

  • http://ombwp.net/ 吳冠霆

    請問有辦法把"讚"圖示改成自己想要的圖示嗎?

    • http://sofree.cc/ 張香腸

      無法~

  • Paul

    請問是否能在一個網頁內針對不同的項目加入"讚"呢?

    因為我有試過在不同的項目底下加入語法,但是只要我單獨針對一個項目按"讚"的話,

    該網頁其他的項目也同時都會出現我按的"讚" !!

    我目前使用加入的語法提供如下 :
    第一段:

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

    第二段:

    • http://sofree.cc/ 張香腸

      不同讚主要是第二段,他應該會有個URL的參數,塞入你要網址即可。
      第一段引入一次即可。

    • Paul

      您好:
      有關您說的URL參數問題… 因為我的同一個網頁上有各自不同的產品(包含產品照片),如果要不同"讚"的話,塞入的網址是指那一部份呢?

      再請說明一下~ 或有例子可看! TKS.

    • http://sofree.cc/ 張香腸

      語法中加入 data-href="網址" 即可

  • Alison

    你好, 請問我現在已有按照您上面的教學,有Like Button出現在文章上,但請問有or可修改成是 “Recommend Button"嗎? 謝謝

    • http://sofree.cc/ 張香腸

      FB網頁那邊,把「Verb to display」這設定值做一個調整。

  • a11502030

    請問能讓它靠右嗎?

    • http://sofree.cc/s9011514/ 香腸

      可以啊~ CSS調整!

  • MAGGIE

    請問有支援無名系統嗎??我怎麼市都無法顯示出來耶