如何在部落格上放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或者是自己做的網頁,那就可能每個頁面要手動貼上連結了。

  • 可以用PHP改href哦?然後我看不太懂要怎麼改,還是說本來就要一個個網址自己改(自己做的CSS+HTML網頁)

  • FL Ulan

    您好~我在痞客邦文章末已經設定好LIKE BUTTON!!妙的是電腦上看都正常 ,手機上看LIKE BUTTON就只有FB名稱沒有照片?求解答謝謝!!

    • 手機可能得看痞客有沒有額外改什麼嚕!

    • FL Ulan

      恩~謝謝喔!

  • Bobbie

    請問怎麼可以加您blog 上最下面的這個Recommended 功能呢, 不需要分享到FB, 只想看看多少人喜歡, 求解答~謝謝您

  • Orz Tree

    不好意思,不知道現在留言會不會被看見,我想請問,我的文章之前有幾千個like,今天打開竟然只剩下13個!非常懊惱呢,不知道是什麼原因?用辦法修復嗎?

    • 沒得修復,FB最近有砍掉一些假帳號讚,不知道是否因此影響(3/12開始清理)

  • fenfen

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

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

  • 田 梨

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

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

  • 田 梨

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

    • 應該是要採用 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">

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

    • 無法得知誰按讚喔!!

    • 我還以為有data-show-faces就代表可以看得到,但我發現現在FB永遠都顯示成為你朋友中第一個案讚~~完全看不到誰案讚,show-face好像就沒意義了

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

  • 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’));

    第二段:

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

    • Paul

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

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

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

  • Alison

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

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

  • a11502030

    請問能讓它靠右嗎?

    • 可以啊~ CSS調整!

  • MAGGIE

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

  • 香腸哥:

    我按上面的網址 他跳出來的畫面和您的不太一樣也,我按get code

    他沒有 IFRAME的
    且按 IFRAME 他說This plugin does not have an iframe implementation with the selected options. Please use the JavaScript SDK and the HTML5 or XFBML implementations, or change the value of the send parameter.

    要如何弄呢?是不是他這程式有改版呢?

    另外 URL to Like 這要填入的網址是填入我要放 贊的那個wp網址,還是填入臉書粉絲團的網址呢?

    另外 URL to Like 光打網址他不接受,要加上http:// 也

    請指導我一下。感恩

  • 郭金珠

    http://developers.facebook.com/docs/reference/plugins/like/
    裡面的 URL to Like (?)填入網址後就只能有1個固定頁面能按讚..
    要怎樣自動偵測本頁網址呢?我想在每篇文章都貼同一組語法就好

    分享到臉書

    以上就是自動偵測網址的語法.可是我不知道哪裡到哪裡才是正確的

    另外一個問題是.如下圖

    http://developers.facebook.com/docs/reference/plugins/like/ 申請出來的會是下圖中藍色框框裡面的效果.
    如果我想要紅色框框裡面的效果又該如何用呢?

    圖片網址:http://i.imgur.com/uD7Hn.jpg

  • 我還是不會弄….
    要把它貼到哪裡
    是要複製語法嗎??
    那要貼到哪裡??

  • 您好,按照指示設定後,按讚後卻必須再按一次"確認"才算成功,不曉得應該怎麼更改設定呢?
    謝謝
    http://blog.gogolook.com.tw/wordpress/?p=16

  • fts

    請問如何在Discuz 2x 加入讚呢

  • steven

    我試了幾個禮拜,找不到方法。真的不行了。

    請問:
    我點「讚」之後,原本文章裡的 圖 有時候會不見,變成一個不知道什麼東西的圖,有時候會跑出 google+ 的 icon。

    我用香腸的方法,IFRAME、XFBML、HTML5 都試過,也用 javascript SDK 和 Open Graph,不知道是哪裡錯了,請指點迷津。

    http://www.innofaci.com

  • 我是blogger 使用者,请问拿到了code之后该贴去那里?

    • OH YEAH..我终于弄到了~打扰了真不好意思xD

  • gai

    請問有沒有辦法可以設定不要出現多少人按讚呢?
    也就是只要有讚的符號出現就可以了

  • 小凡

    香腸大大!為何我這個讚加上去之後,在自己的網站按讚於fb看到的都是亂碼?
    還有那個臉書留言也都是亂碼?(為何我按別的網站的讚就不會亂碼?)

    香腸回應:
    有看過這樣的情況,可能你的WP原始檔編碼有問題@@

  • 高山茶

    讚!!
    感謝您的用心分享!!

    香腸回應:

    :)

  • Andrew

    請問Like要如何改成中文的讚~_~
    還是[讚]比較有感覺阿!

    香腸回應:
    程式碼內如果有en_US改成 zh_TW

  • 我按了之後都會出現錯誤噎~

    香腸回應:
    我的文章嘛!!?

    • 不是呀~哈哈
      是我的~後來又改一下就好了~謝謝香腸!

      香腸回應:

      :D

  • 小軒

    請問是不是無法貼在無名部落格?

    香腸回應:
    好像是喔!

  • 照你的方式貼了,但沒有用:((
    http://hsmt.0fees.net/?p=15

    香腸回應:
    可能要在試試看~ 我之前使用也有一陣子怪怪的 最近又正常

  • 小逸

    想請問一下~~
    為什麼我的樣式選擇button_count
    讚的人數破千之後~~
    他只會顯示1000人呢~~
    但如果選擇standard卻是顯示完整的1,1xx人醬子~
    有辦法用button_count樣式但讓他顯示完整人數嗎..>.<..

    香腸回應:
    應該是寬度設定問題,他的iframe不夠寬,造成超出部分被蓋掉了吧~

  • 怪怪的耶!
    我把語法放到Html語法上面
    但雖然有顯示讚
    卻不能按?
    why?

    香腸回應:
    你是貼到哪邊~~?

  • cbernie

    不好意思我想請問一下facebook現在要怎麼拿到金鑰啊?
    他說要透過手機傳可是上面卻沒有台灣的電信業者連台灣這個國家都沒有= =
    直接打國際碼傳也都收不到….

    香腸回應:
    不知道你說的金鑰是指?

  • 正常了 XD
    謝謝香腸的回應 ^_^

    香腸回應:

    :)

  • 謝謝您的教學~
    我照站長的方式做了
    但是為什麼這篇文章的人數好像顯示怪怪的
    http://blog.guitar.com.tw/guitar-teacher-in-kaohsiung

    請問站長看到讚的人數是多少?
    原本還有 49 竟然變成 5

    我在想說會不會是被Facebook懲罰了
    因為之前在Facebook短時間大量的請朋友幫我點讚
    不知道會不會被Facebook懲罰?

    香腸回應:
    不會是懲罰啦~那是有時候FB更新的問題~我現在看到是51

  • 版主請教一下,我照你的方式貼上了,感謝。

    不過請問要如何看到是哪些人推薦我呢?謝謝。

    香腸回應:
    看不到耶~~

  • 路過

    讚語產生器 論壇網頁的文章 有支援iframe的話 是可以用的
    http://happyintime.pixnet.net/blog/post/26977370

  • SEVEN

    請問
    如果想放在Discuz!要怎辦呢
    在網上有找到方法
    可是讚完之後 在FB只顯示論壇名稱
    但連接是帖子連接來的
    那要怎麼改成讚它是顯示帖子名稱的呢

    香腸回應:
    這可能要改code,這部分我沒有研究

  • Wanda 火箭

    無名超爛 因為他不支援 iframe語法
    我問過客服 客服還繞了一大圈去問工程師
    真的是科技公司聽起來一點都不科技

    連這種基本的東西都不知道甚麼時候才開放
    比中國鎖一些境外網站和關鍵字,無名鎖的內容還多,真可笑

    香腸回應:
    也不允許JS

  • 您好。不好意思,為什麼我順利加進去了,可是網頁跑完後,左下角為出現驚嘆號的完成,按讚卻都是錯誤呢?

    之前所存的檔案 還能開嗎?

    請解答,謝謝^^

    祝安

    香腸回應:
    這個我不清楚耶,對Blogger沒有研究…
    你找看看其他Blogger使用者有放讚的,看看他們是否有這類問題@@

  • mm

    請問有支援天空部落嗎?有出現讚字,但是按下去卻出現錯誤

    香腸回應:
    不清楚,這部分您要自己測試看看~
    錯誤可能是天空不支援ifram語法,或是您語法有誤

  • ~岳龍~

    ~給你一個"讚"~~

    香腸回應:
    感謝岳龍哥~

  • 評論 是 FB 的一個功能 : Facebook Connect
    利用 API金鑰 去弄出來 (like 和留言 box 一齊弄出來)^^

    香腸回應:
    感謝您~~

  • 我到現在連 噗浪 臉書 都還沒申請過帳號… =_=

    沒時間養那些小寵物 XD

    香腸回應:
    我也沒在養

  • Facebook Social Stats這個外掛可以在後台統計每篇文章被說讚以及分享評論的次數 ,還滿好用的

    香腸回應:
    感謝分享哩~~

  • archy

    FB的讚我記得有些按了之後還可以再接著打上評論

    香腸回應:
    沒看過耶,有範例網站嗎0.0