想要在自己的部落格或網站中掛上自己Facebook粉絲專頁的資訊嗎?

除了提供點讚的介面,也可以讓訪客隨時知道你在FB發表了什麼。(像下圖那般)

Facebook, 粉絲專頁

現在的微部落格(像噗浪、推特、臉書)正盛行,部落格反倒是沒那麼流行了。

這些微部落格的特色就是訊息即時,影響範圍廣;所以很多部落客都會在部落格掛上自己的噗浪資訊,好讓讀者可以從噗浪連過來部落格,也可以從部落格中去得知站長正在發佈些什麼消息。

那要如何掛上FB的粉絲專頁呢?

 

1. 先到你Facebook的粉絲專頁把連結網址複製下來

2. 到Social plugins的Like Box網頁:http://developers.facebook.com/docs/reference/plugins/like-box

Like Box

先輸入粉絲專頁的網址,然後設定各項資料。

之後點Get Code。

 

Facebook, 粉絲專頁

會得到兩種程式碼,看你部落格支援哪一種。

 

接下來要到部落格中去掛上這外掛,據我所知,目前雅虎部落格什麼都不能掛;痞客邦則是幾乎都可以(站長工具、噗浪、粉絲專頁等),至於其他的部落格,印象中yam 天空、無名VIP、Google的blogger都可以掛,不過有段時間沒用這些部落格了。

以痞客邦來說。

部落格管理→側邊欄位設定→新增版位

Facebook, 粉絲專頁

把剛才複製下來的程式碼貼上,點送出即可。

 

Facebook, 粉絲專頁

接下來,你就可以在部落格的自訂欄位中看到你粉絲頁的資料了。

 

改版資訊

相同功能可改用「Page Plugin」插件:

https://developers.facebook.com/docs/plugins/page-plugin

2015.4.21

 

延伸閱讀

更多Facebook的使用技巧與介紹:Facebook 臉書【目錄】


, , , , , , , , , , ,
創作者介紹

Mr.闕小豪

闕小豪 發表在 痞客邦 PIXNET 留言(52) 人氣()


留言列表 (52)

發表留言
  • df df
  • 需要用VPn才可以登录,如果在大陆
    www.yesvpn.com
  • df df您好,我不是很清楚大陸的狀況說。:P

    闕小豪 於 2011/01/09 01:50 回覆

  • 小白
  • 所以無名的部落格只有VIP才能使用這項功能嗎??煩請大大幫忙解答了~感恩!!
  • 無名部落格我沒有升級過VIP,所以不確定喔。

    闕小豪 於 2011/03/12 22:41 回覆

  • 凱特Kate
  • 您好!我剛設定粉絲團於側欄位之後成功了!
    文章很受用謝謝
    有幾個問題想請教:
    1.另外請問我有看到其它格友的粉絲連結按鈕框框
    樣式是小長方型然後頭像也比我設定的大很多
    我反覆試了幾次都不行哩!我的頭相超小的....

    2.該如何於發表的文章裡放置粉絲連結按鈕框? 謝謝

  • 1, => 這個是要在FB產生連結那邊去設定的,4.5個選項可以更動搭配。
    2, => 妳是說每一篇文章都要有粉絲頁的按鈕嗎?:)

    闕小豪 於 2012/09/11 09:24 回覆

  • 凱特Kate
  • 1,我有在FB連結練那反覆更改並試了幾次,看看粉絲團連結紐該如何才會變成我想要的樣子,不過變來變去都變不了,我形容一下喔!是長方型框,然後框內從上到下有部落格名字,再來是頭相也是長方型相片,然後相片下方顯示目前有幾位粉絲......


    2 對呀!每一篇文章尾端都想要有粉絲頁的連結按鈕
  • 1, 可以的話,拍張圖給我看你想要怎樣的版面,還有你現在的版面。
    2, 也是拍張圖給我看。
    用文字有點不太清楚妳想要哪種版本。:)

    闕小豪 於 2012/09/12 15:27 回覆

  • 悄悄話
  • Lotus
  • 感謝!
    請問我想加寬側邊攔css原始碼編輯應該改哪裡
  • 這個你要去查一下PIXNET的教學,之前曾經有看過。:)

    闕小豪 於 2013/04/25 12:05 回覆

  • ViVi<3
  • 感謝分享唷^^一學就會了
  • 不用客氣 & 恭喜。:)

    闕小豪 於 2013/05/21 20:30 回覆

  • Elsie
  • 感謝您的教學文~成功放好了!!:P
  • 不用客氣。:)

    闕小豪 於 2013/05/23 10:56 回覆

  • Fanny(綾綾媽)
  • 寫得好清楚,一下子就搞定我的粉絲欄位了!!
    感謝你^^
  • 不用客氣。:)

    闕小豪 於 2013/05/31 14:56 回覆

  • 漢娜媽咪
  • 不好意思我試了很多次但是就是出不來耶!我只有標題有出來但是粉絲頁就是跑不出來@@ 你的方法我在別的網頁試過都可以!但在痞克邦就是不行!是要成為VIP才行嗎?
  • 跟VIP無關也。=_=a

    闕小豪 於 2013/09/20 10:26 回覆

  • 爛泥迪爾
  • 太讚了!!!!!!我也成功了
    請問一下有一種側邊會跑出臉書按鈕那個怎麼弄咧???
  • 恭喜。你說的是按讚的按鈕嗎?這裡也有教學喔。:)

    闕小豪 於 2013/10/07 14:46 回覆

  • 悄悄話
  • 悄悄話
  • 小個兒
  • 請問若再google的部落格
    到了部落格的後台要從哪裡貼上?
    才能在部落格前面看到臉書的連結外掛?
  • 我沒有研究過Blogger,您可以自行先了解一下。:)

    闕小豪 於 2013/10/14 20:48 回覆

  • 小個兒
  • 請問一下
    就如同你部落格右邊欄位中上--闕小豪 Facebook 讚的方式一樣
    該如何用?
    感恩
  • 這篇文章不就是介紹這個嗎?=_=a

    闕小豪 於 2013/10/16 21:45 回覆

  • 小個兒
  • 就是試到了複製程式碼
    到google部落格的新增小工具HTML/JavaScript
    貼上後都無法出現
    不知哪裡出現問題><
  • 有出現什麼錯誤訊息嗎?=_=a

    闕小豪 於 2013/10/18 10:52 回覆

  • 胡瑪菲
  • 我也有照貼~可是都沒顯示出來耶~!不知哪邊出問題
  • 看了一下您的部落格,感覺是語法上有寫錯喔。

    闕小豪 於 2013/11/12 09:00 回覆

  • 胡瑪菲
  • 你好~請問為什麼我一定要點進去某篇文章旁邊才會出現呢???
    回到部落格的文章首頁就是空的~??
  • 有可能是首頁掛了太多插件之類的。

    闕小豪 於 2013/11/12 08:46 回覆

  • 胖Qの娘
  • 剛好想試試部落格外掛FB粉絲頁
    但手機與平板我看粉絲專頁的連結網址@@"
    晚上再來用桌電試試
    謝謝分享^^
  • 沒問題,快去試吧。:)

    闕小豪 於 2013/12/12 22:01 回覆

  • green scarf
  • 簡單易懂的講解,我已經設定成功了謝謝!^^
    但再請教一下,我在痞客邦"同步發送更新通知"的地方,有沒有辦法可以直接連結到粉絲團?
  • 這部份我沒試過,之後若有心得再發文介紹。:)

    闕小豪 於 2013/12/22 00:42 回覆

  • 沐軒室內設計
  • 很抱歉,因為我自己設定完去看是空白的沒看到內容,所以不知道自己設定有沒有成功,才會貼上網址請板主看看,並不是來廣告的
  • 您可以請朋友幫你看,我去看是有的喔。:)

    闕小豪 於 2014/02/08 09:56 回覆

  • Jasmine Chiu
  • 感謝分享,我是貼在goole部落格上成功了!
    可是fb連結框好像要有登入fb帳號才會顯示吔
    看大家PIXNE的好像沒這問題
    是否有辦法提供?
  • 我沒用google的部落格,有問題的部份,可能要自己注意一下設定的方面喔。:)

    闕小豪 於 2014/02/14 21:27 回覆

  • 潔米小姐
  • 3Q~很實用!!!
  • 不用客氣喔。:)

    闕小豪 於 2014/05/15 13:56 回覆

  • 琦mei
  • 不好意思~看了您的文之後,我竟也成功了!!
    但是,朋友說若我po了一個文之後,他們的臉書是沒有我的動態~
    必須是要另外點入我的粉絲團他們才看得到我的動態!!
    請問是不是我設錯了!!
    我是設在"黃媚媚"內所管理的粉絲團....
    請賜教....感激不盡....!!
  • 這跟臉書的運作有關,你開粉絲頁時會有介紹。:)

    闕小豪 於 2014/05/19 15:44 回覆

  • 張碧娟
  • 版大您好,請教您~我用FB帳號登入留言,為什麼不會出現我的大頭照片呢?麻煩解或了,謝謝。
  • 臉書偶爾會有讀不到資料的情形,通常是偶發現象。:)

    闕小豪 於 2014/05/31 11:22 回覆

  • 烈獄泠焰
  • 感謝分享^_^
  • 不用客氣。:)

    闕小豪 於 2014/08/08 16:03 回覆

  • 凱莉王
  • 設定成功了!謝謝分享:D
  • 不用客氣呦。:)

    闕小豪 於 2015/01/14 17:22 回覆

  • 凱莉王
  • 想請問格主,如果想創造一個能放在文章末端(應該是選HTML型式我猜?)但想要讓顯示出來的物件置中的話,CODE應該要怎麼改才好呢?
  • 不太懂妳要放什麼東西,但編輯工具那邊有個置中的工具,把妳要的區塊反白起來,點一下那個文章置中的鍵即可。:)

    闕小豪 於 2015/01/15 10:59 回覆

  • 凱莉王
  • 感謝回覆:D
  • 您真是有禮貌,讚。:)

    闕小豪 於 2015/01/19 23:33 回覆

  • Queena
  • Hi 版主:

    我試了幾次好像都沒有出現哎
    也用朋友的帳號看過了~~~
    是我那裡出了什麼問題呢?? 求解~~
    http://queenadai.pixnet.net/blog
  • 我點去你家看的確是沒有,但是問問題可以來點禮貌嗎?

    闕小豪 於 2015/02/13 16:03 回覆

  • Queena
  • 版主您好:
    不好意思,剛剛太急著想求答,有失禮貌,深感抱歉。
    感謝版主的回覆,我會再試試看的,有勞你了,
    造成你的不悅,請見諒,會更注意禮貌的,謝謝你。
  • 我沒辦法看到妳後台出了什麼錯,如果有把幾個重要步驟拍一下,或許能找到問題所在。:)

    闕小豪 於 2015/02/14 10:53 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • かえで
  • 謝謝闕帥的詳細介紹,也可以簡單就操作步驟,可是沒看到我的粉絲專頁出現。我可以請問您,是該貼粉絲專頁的名片語法還是您分享的語法模式,我不懂為什麼很多網友是分開介紹這兩個功能。
    我都試著貼過了,但無效。可能還得再試試,謝謝分享^^
  • 用這個,相同功能可改用「Page Plugin」插件:

    https://developers.facebook.com/docs/plugins/page-plugin

    闕小豪 於 2015/04/25 09:11 回覆

  • かえで
  • 謝謝闕帥,可以囉(開心)!操作上都沒問題,原來是要使用電腦才能輕鬆設定,可能平板的複製網址可能不完全的關係。
    謝謝^^
  • 恭喜妳嘍,我這邊沒有平板,也無法測試平板的部份。也感謝您提供了很有用的資訊,有可能是程式APP沒寫好,使得使用平板操作是無法成功的。:)

    闕小豪 於 2015/04/27 09:53 回覆

  • 悄悄話
  • germanshop4u
  • 謝謝分享~
  • 不用客氣喔。:)

    闕小豪 於 2015/08/26 10:16 回覆

  • 馬卡人妻
  • 不好意思~我照著您的方式成功了 謝謝!
    請問如何在每頁下方都有fb粉專的外掛呢?
    因為看到有些部落格有、 很想知道
    謝謝噢(☆_☆)
  • 那個比較像是「部落格」功能,有些自訂部落格語法或部落格工具可用,可能看您是要哪種功能而決定要怎麼使用。

    闕小豪 於 2015/09/26 16:54 回覆

  • 米小摳
  • 謝謝分享
  • 不用客氣喔。:)

    闕小豪 於 2015/10/18 20:53 回覆

  • 美琪
  • 可以問一下嗎?我的手機是HTC我也想連結,美琪就是愛旅行也有粉絲頁,但真的弄不懂怎連結,請指教
  • 弄粉絲專頁用電腦操作會比較方便,就如同文章中介紹般操作即可。:)

    闕小豪 於 2015/11/08 09:26 回覆

  • 老饕的最愛
  • 請問可以一進入部落格畫面就有「問題匡」(像您網頁一進入這樣的設計),按了粉絲團才可以看得到部落格頁面,不知道我說得清楚嗎?

    謝謝!
  • 有點不太清楚您的問題是什麼?

    闕小豪 於 2016/04/23 19:44 回覆

  • 熊安全家族
  • 成功嵌入!謝謝分享,簡單易懂:-)
  • 不用客氣喔。:)

    闕小豪 於 2016/08/06 00:37 回覆

  • 佳雯鄒
  • 您好~
    謝謝您的分享

    想另外請教您
    如果我想把[個人臉書的名片貼]崁入自己的網站
    不知道要用什麼方法

    我在個人臉書右邊有個[查看活動記錄]的右邊三個橫點點
    點進去[在你的網站上崁入名片貼]
    結果顯示
    很抱歉,目前無法提供此內容
    你前往的連結可能已過期,或是你不屬於該頁面限定的分享對象。
    返回上一頁 · 前往動態消息 · 瀏覽使用說明

    不知道是哪個環節有誤
    如果您有空檔
    再麻煩您撥亢協助
    謝謝您喔
  • 佳雯 您好,

    我一直都有在網路上免費幫忙回覆臉書的問題,但最近工作比較忙碌,稿子也積欠的有點多,實在忙到無法回答您的問題。

    不過我有把寫過的臉書教學整理出來,裡頭有說到遇到問題時幾個主要的處理方向 ,給您參考一下:http://goo.gl/DdA4np

    近期還是盡量先以文章提到的解決方向為主,等我忙完手上工作後,才有辦法再度提供專人回答的服務。感謝。

    闕小豪 於 2016/10/15 14:18 回覆

  • goldrain720127
  • 用好了!謝謝分享!
  • 不用客氣喔,goldrain。:)

    闕小豪 於 2016/11/16 14:37 回覆