好用軟體一籮筐 臉書動態追蹤

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕!

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本

早上在indise.com.tw上看到「如何安裝Facebook Like按鈕在自己的網站上,讓網友們「讚」一下?」這篇文章,得知臉書新增了「Like Button」的Social Plugin功能,覺得相當有趣,因此也依樣畫葫蘆研究了一下。不過因為此篇文章並沒有很詳細的使用說明,再加上原本提供的外嵌程式碼,只能針對單一網址進行「按讚」的功能,因此阿祥Google了一下,在Cordobo這個網站上找到了支援動態網址的修改方式,下面就分享給大家。

不過由於我自己是使用Wordpress,因此範例將會以Wordpress後台為準,其他網誌系統的使用者,可能需要自行調整一下程式。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:呈出來的效果大概是這樣,有「按讚」的計數,也有按過按鈕Facebook使用者的頭像(這個功能可關閉)。

Facebook Like Button工具的設定

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:在Facebook的Social Plugin的頁面中的Like Button項目中,說明文的下方有一個程式碼的產生器,由上而下的功能分別是「Like Button置放的網址」、「按鈕呈現的形式」、「是否要開啟頭像」、「功能區的寬度」、「文案呈現」、「字型」和「配色」,設定完成後,按下最下面的「Get Code」,就會生成可以置放在網站中的Html碼,或是臉書app用的FBML碼。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本


圖:「Like Button置放的網址」請輸入你要置放按鈕功能的網址,以阿祥的網站為例,就可以輸入「https://axiang.cc/」,之後我們可以選擇「按鈕呈現的形式」,上圖的是「Standard版」,是有文案的版本。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:另一種「Button_Count」,呈現的就單純只有按鈕和計數。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:下面我們可以選擇是否要開啟頭像顯示的功能,如果不要,請將「Show Faces」的Checkbox打勾取消掉,另外下面的「Width」是決定這個功能區塊的寬度,請依你要置放位置的左右寬度來設定。至於下面的「文案呈現(Verb to display)」則是可以選擇在說明文案中顯示「喜歡(Like)」或是「Recommend(推薦)」,如果你前面的按鈕形式已經選擇沒有文案的版本,那就不需要理會這裡的設定了。上圖右上顯示的是「Like」的文案。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:這張圖右上顯示的是「Recommend」的文案。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本


圖:字型的部份只有英文的部份可以變化。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:在配色的部份,有兩種可以選,圖上右上預覽顯示的是「輕色調(Light)」的效果。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:另一個是「重色調(Dark)」的效果,如圖右上所示。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:設定完成後按下「Get Code」會跳出兩種不同的程式碼,我們需要的是上面的「iFrame」版本。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本


圖:由於「Like Button」預設是只能推單一網址,因此我把這部份的程式碼放在側欄,讓使用者可以針對阿祥的網誌進行推薦,我們可以直接到Wordpress後台的「外觀」中的「模組」,直接開一個支援「Html」的區塊,將剛剛複製的程式碼給貼上就ok了!

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:呈出來的效果就是這樣囉!

支援動態網址的修改

修改的方式其實還蠻簡單的,下面是從臉書Like Button工具生成的程式碼:

<iframe src=”http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.axiang.idv.tw%2Fblog%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:500px; height:60px”></iframe>

我們需要把其中的這一段(就是原本我們設定網址的地方):

like.php?href=http%3A%2F%2Fwww.axiang.idv.tw%2Fblog%2F

改成下面這樣:

like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:接下來把修改好的網址,貼到單篇文章(Single.php)的程式碼中,你可以在Wordpress後台的「外觀」中的「編輯」中找到(在右邊的清單裡),但記得編輯前確認一下你的佈景主題檔案的屬性是可以被編輯覆寫的。我自己是把Code包在一個div底下,避免版型會跑掉,另外我也加入了「★喜歡這篇文章嗎?幫我按個“讚”!」這行文案,你可以依自己的需求來決定是否要加入。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本
圖:設定完成後,臉書的的Like Button就會在文章指定位置處出現按讚的功能區塊了。不過如果還沒有人按過讚,在按鈕下面還是會有一些留白的區塊,因此在置放程式碼時,建議可以考量一下整體版型是否美觀,來調整置放的地方。

[Blog] 在你的網站上加入Facebook按個「讚」的按鈕! - 阿祥的網路筆記本


圖:被按讚之後,會在按鈕的臉書使用者個人塗鴨牆上顯示,上圖下面這一行是「單一網址按讚」的效果,上面的則是「動態網址按讚」的效果。

相關聯結:

如何安裝Facebook Like按鈕在自己的網站上,讓網友們「讚」一下? – Inside
Like Button – Facebook 開發人員
Facebook’s “Like” Plugin with WordPress | Cordobo

歷史上的這一天,我還寫了…

你也許會喜歡

21 留言

  • 回覆
    浩浩
    2014 年 05 月 26 日 於 06:15:00

    請問如何新增您網站右側的FB加G+的語法呢
    或是說只有FB但可以兩個粉絲業同時上下
    請祥哥賜教,謝謝

    • 回覆
      axiang1980
      2014 年 05 月 26 日 於 09:34:00

      右邊的fb是版型作者寫的,如果需要,可以參考一下 http://achang.tw/

      • 回覆
        浩浩
        2014 年 05 月 26 日 於 09:39:00

        我是和阿腸租主機的…也就是說這插件語法,在某版型裡面就有嗎?

        • 回覆
          axiang1980
          2014 年 05 月 26 日 於 09:46:00

          他釋出的免費版型都有哦 看看 http://achang.tw/themes.html

          • 浩浩
            2014 年 05 月 26 日 於 16:13:00

            OK謝謝我在拆來看

            順道問,「歷史上的這一天,我還寫了…」這個語法呢~~~
            我喜歡你的網站,有在交換連結嗎

          • axiang1980
            2014 年 06 月 08 日 於 12:08:00

            「歷史上的這一天…」是一個外掛,你可以找一下!

          • 浩浩
            2014 年 08 月 20 日 於 11:29:00

            已找到,抱歉晚回,感謝救火。

          • 浩浩
            2014 年 08 月 20 日 於 11:29:00

            OK哦,謝謝你的幫忙~

  • 回覆
    Dong Hua Lin
    2014 年 02 月 14 日 於 19:05:03

  • 回覆
    RONO
    2012 年 09 月 05 日 於 02:18:28

    你好~
    我想請問一下 要讓FB的一張照片讓很多人按讚
    該怎麼設定呢?

  • 回覆
    小二哥
    2010 年 06 月 09 日 於 14:10:04

    阿祥大哥請問一下

    若我要讓某張fb的照片讓人按讚來推薦,可以怎樣做設定??

    感謝喔

  • 回覆
    阿祥
    2010 年 06 月 09 日 於 00:54:00

    @mm:

    WordPress的留言限制讓你的code不太完整,是否可以用寄信的給我呢?

  • 回覆
    mm
    2010 年 06 月 07 日 於 00:33:08

    你好 我按照你的方式 修改了code,結果按下讚會變成錯誤,可否幫我看一下~

    原本↓

    修改↓

    <iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:80px;” allowTransparency=”true”>

  • 回覆
    Fiona
    2010 年 06 月 02 日 於 05:04:40

    我個人不喜歡”讚”這個功能,請問有啥方法取消或隱藏它?

    • 回覆
      阿祥
      2010 年 06 月 03 日 於 01:56:05

      @Fiona:

      不太懂你的意思?

  • 回覆
    Dato
    2010 年 04 月 30 日 於 22:24:15

    我也有一樣的問題耶,臉書登出狀態下
    看不到有多少人說讚耶

    • 回覆
      阿祥
      2010 年 05 月 03 日 於 11:31:52

      @Dato:

      的確,這個問題應該是臉書程式的限制吧?要登入才看得到詳細資料!

  • 回覆
    WilliamTai
    2010 年 04 月 30 日 於 17:01:43

    您好,我將多餘的amp;清掉,並修改get_permalink()就解決了

    • 回覆
      阿祥
      2010 年 05 月 03 日 於 11:32:26

      @William:

      不好意思,沒有及時回答你的問題…也感謝你分享解決方案!

  • 回覆
    WilliamTai
    2010 年 04 月 30 日 於 12:38:53

    看來是無法直接張貼,我貼在這:
    http://paste.plurk.com/show/242896/

  • 回覆
    WilliamTai
    2010 年 04 月 30 日 於 12:36:29

    您好,
    我照您給的步驟做了,但是按了「讚」之後,並沒有出現在FB的塗鴉牆上,而且讚的累積數目只要自己一登出之後就會歸零。

    我修改的code是這樣:
    <iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:65px; height:25px”>

  • 發表留言

    這個網站採用 Google reCAPTCHA 保護機制,這項服務遵循 Google 隱私權政策服務條款