11/07/2015

幫網站嵌入 Facebook 粉絲團專頁(Page Plugin)﹍簡易安裝法及各種應用方式

幫網站嵌入 Facebook 粉絲團專頁(Page Plugin)﹍簡易安裝法及各種應用方式

A+
wfublog-fb-fan-page-幫網站嵌入 Facebook 粉絲專頁(Page Plugin)﹍簡易安裝法及各種應用方式這個外掛以前稱為 Like Box(粉絲團讚視窗),更早叫 Fan Box(粉絲框),現在的名稱 Page Plugin 倒是比較直覺一些,就是 FB 粉絲專頁的外掛工具,可以將粉絲專頁嵌入網站的指定位置,是效果很好的行銷宣傳工具。

這個「Blogger論壇討論串」,原 PO 表示重新安裝 "FB 粉絲頁" 很多次,還是無法正常顯示。對於不熟悉語法的使用者而言,FB 許多外掛工具今年的改版,的確少了很多彈性,也增加了安裝的出錯率。(以往外掛都提供了多種安裝方式,現在只剩下一種)

以下先簡單介紹官方安裝方式,而為了讓嵌入 FB 粉絲專頁外掛更為方便,WFU 另外提供了簡易安裝法,只要一個步驟就能安裝成功,保證不會失敗。想節省時間可直接跳到「二、簡易安裝法」,最後並提供各種粉絲專頁的應用作法。



一、官方作法


首先這是 FB 官網粉絲專頁外掛的安裝網址:


1. 調整參數

fb-page-plugin-1-幫網站嵌入 Facebook 粉絲專頁(Page Plugin)﹍簡易安裝法及各種應用方式

參考上圖,需要修改的參數說明如下:

  • Facebook Page URL:填入粉絲團網址
  • Width:設定小工具寬度像素值 (最少 180, 最多 500)
  • Height:設定小工具高度像素值 (最少 70)
  • Adapt to plugin container width:是否自動調整寬度
  • Show Friend's Faces:是否顯示朋友頭像
  • Use Small Header:是否使用較小的標頭區塊
  • Hide Cover Photo:是否使用封面圖
  • Show Page Posts:是否顯示粉絲頁貼文

設定完成後,按「Get Code」即可取得程式碼。


2. 安裝程式碼

畫面會顯示兩段程式碼,第 1 段請貼在範本中 body 的下一行,第 2 段貼在外掛要顯示的位置即可:
  • 看起來並沒有很困難,不過對不熟悉程式碼的讀者,大概就是第 1 段的處理會出問題。
  • 如果是這樣的話也可乾脆將兩段程式碼,全部貼到你要顯示的位置。
  • 但這麼做也是有風險,因為有的站長會在網站多個地方都放粉絲頁外掛,那麼第 1 段程式就會在多個地方重複執行,是有可能出錯的。
  • 那麼最安全的懶人法,還是請參照「二、簡易安裝法」的步驟進行。



二、簡易安裝法


請將以下程式碼,貼到任何想顯示的位置:

<iframe allowtransparency='true' scrolling='no' src='//www.facebook.com/v2.5/plugins/page.php?href=https://www.facebook.com/WFU.BLOG&amp;width=300&amp;show_facepile=true&amp;small_header=false&amp;hide_cover=false&amp;show_posts=true&amp;locale=zh_TW' style='border:none; overflow:hidden;max-width: 100%; width: 300px; height: 500px;'></iframe>
參數的修改,請參照有顏色的字串,最重要的用紅色標示、其次為藍色:

  • 粉絲團網址:href 網址參數請改為自己的粉絲團網址
  • 小工具寬度:width 參數請改為自訂寬度 (最少 180, 最多 500, 有兩處要改)
  • 小工具高度:height 參數請改為自訂高度 (最少 70)
  • 是否顯示朋友頭像:show_facepile 參數 true 代表要顯示,若不要顯示則改為 false。
  • 是否使用較小的標頭區塊:small_header 參數 true 代表要顯示小尺寸標頭,若要顯示大標頭則改為 false。
  • 是否使用封面圖:hide_cover 參數 true 代表隱藏封面圖,若不隱藏則改為 false。
  • 是否顯示粉絲頁貼文:show_posts 參數 true 代表要顯示,若不要顯示則改為 false。
  • 語系:zh_TW 代表繁中語系

儲存後即可看到效果,非常簡單。

以 Blogger 為例,如果要放在側邊欄,請在後台新增「HTML/Javascript」小工具,把以上安裝碼貼進去儲存即可。



三、各種應用法


以下簡單舉例幾種尺寸的應用方式:

1. 側邊欄頂端



放在側邊欄最上方,宣傳效果好、可吸引注意的位置,設定方式舉例如下:
  • 寬: 300
  • 高: 150
  • 使用小標頭區塊
  • 隱藏文章


2. 側邊欄底部



放在可顯示較長的區塊時,例如 "側邊欄底部"、"頁尾"、"文章結束處" 等處,可適當加大這個外掛的寬、高,並顯示貼文。設定方式舉例如下:
  • 寬: 300 ~ 500
  • 高: 500 ~
  • 使用大標頭區塊
  • 顯示貼文


3. 加強版讚按鈕



也可把這個粉絲專頁外掛當成 "加大版" 的讚按鈕使用,放在任何適合按讚的地方。由於可顯示粉絲專頁的封面圖,看起來比陽春的讚按鈕美觀許多,相信更能夠吸引讀者幫專頁按讚。設定方式舉例如下:
  • 寬: 180 ~ 300
  • 高: 70
  • 不顯示朋友頭像
  • 使用小標頭區塊
  • 不顯示貼文
  • 依自己需求,選擇是否顯示封面圖


更多 Facebook 相關工具:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

58 則留言:

  1. 您好!!
    感謝專業的教學,我用第一個方法已經成功在文章內放置粉絲專頁了!!
    可是想請問假如要放在首頁而不是放在文章內該如何操作呢?

    感謝!!

    回覆刪除
    回覆
    1. 你好,需要參考的文章有這些:

      Blogger 七種頁面形態判斷語法詳解 http://www.wfublog.com/2013/12/7-blogger-pagetype.html (或是本站其他判斷式語法相關文章)

      Blogger 範本﹍(1) 各種註解方式及區塊的修改 http://www.wfublog.com/2013/02/blogger-template-remark.html (以及相關系列文共 3 篇)

      刪除
  2. 您好,我想弄第三個加強版的,但是一直失敗,
    看起來怪怪的,寬度就是很寬@@
    但是我怎麼改寬度都非常寬耶,我是設定180,高70

    回覆刪除
    回覆
    1. 你好,請留下發生問題的網址,以及告知擺放的位置,看看是什麼情形。

      刪除
  3. 我按照第一種方式貼上語法了,但是只有顯示 粉絲團的名字 可以連結,但是無法顯示出粉絲團的封面和其他東西?是哪裡出了問題,可以幫我解答嗎? 謝謝

    回覆刪除
    回覆
    1. 第一種方法有可能失敗,這就是為何要介紹「簡易安裝法」的原因囉,請按照第二種方法安裝就好了。

      刪除
    2. 貼上去顯示,在網頁上顯示 找不到檔案和目錄

      刪除
    3. 請提供出問題的網址、你擺放的位置,才能看是什麼問題

      刪除
  4. 請問簡易安裝法.如果語系我想用成英文,請問縮寫是什麼?
    (語系:zh_TW 代表繁中語系)

    回覆刪除
  5. 万分感激你这篇分享文 谢谢

    回覆刪除
  6. 我的網站是PHP但是也弄不進去,我試了很多方法,也不知是什麼問題

    回覆刪除
    回覆
    1. 不好意思,我沒有 PHP 環境可以測試,要請自行研究了。

      刪除
  7. 你好請問最近fb有做什麼更動嗎?
    原本網誌上的粉絲專頁按讚外掛程式以及留言外掛通通無法顯示了

    回覆刪除
    回覆
    1. 你好,可參考 http://www.wfublog.com/2015/11/facebook-block-web-post-url-confirm-button.html

      刪除
  8. 你好,安裝官方版後,body下一行加上臉書給的code,卻出現
    "剖析 XML 時發生錯誤 (第 3330 行,第 64 欄):The reference to entity "version" must end with the ';' delimiter. "
    直接copy paste的,怎麼會有錯誤呢@@

    http://www.rihpx.com/

    回覆刪除
    回覆
    1. 我直接複製測試沒有問題,請仔細檢查你貼上的 code 是否正確。
      你也可以先貼在 html/javascript 小工具測試

      刪除
  9. 我的專頁是https://www.facebook.com/Travelbag.hk/
    最近我這個專頁都無法刊登在我的網頁上,我本身是用專頁附加程式,我也試過你的二方法,也用過wordpress的jetpack去做,也是不行。
    請問你知道是什麼原因嗎?謝謝

    回覆刪除
    回覆
    1. 你好,可參考留言 #9 的回覆,是不是你遇到的狀況。
      如果你測試別人的粉絲專頁可以顯示,但自己的不行,那就是你的被封鎖了。

      刪除
    2. 謝謝﹗但我都沒有帖文內所出現的問題,即是Q1-Q6。

      刪除
    3. 總之,如果你測試別人的粉絲團網址 ok, 但測試自己的粉絲團網址不行,那麼問題就出在你的粉絲團。
      找不出原因的話,建議直接跟 FB 反應喔。

      刪除
  10. 您好,請問為什麼我明明放在footer的地方,結果右邊側欄sidebar也出現一個?

    http://blog.drcyh.com

    回覆刪除
    回覆
    1. 有時還原範本時,會出現多餘的小工具,可到後台「版面配置」刪除就好了。

      刪除
  11. 想問一下是否可以嵌入個人fb頁面? 發現好像都只能嵌入粉絲團而已 謝謝

    回覆刪除
    回覆
    1. 官方沒有提供這樣的工具
      不過你可以內嵌特定個人 FB 貼文

      刪除
  12. 請問WFU有沒有辦法像您文章最後的地方顯示如下這種呢?

    「如這篇文章對你有幫助,歡迎「分享」或給我個讚:「FB讚」」

    很想知道這種超級迷你的「讚」按鈕怎麼嵌入?

    回覆刪除
    回覆
    1. 這就是一般的讚按鈕喔,可參考 https://www.wfublog.com/2014/12/fb-like-button-4-installation.html 用官方網站的讚按鈕產生器,填入指定網址,再取得程式碼就可以囉~

      刪除
  13. 謝謝 簡易安裝法非常成功

    回覆刪除
  14. 簡易安裝非常好用耶~~~太感謝了!!^^

    回覆刪除
  15. https://lh3.googleusercontent.com/-Ehn1jqTjajs/W3cNxM5Zz6I/AAAAAAAAXf0/EnpeCnnbVPsbpmT2DxaiqYtw-I-Chz2QACHMYCw/24.PNG

    想請問大大,我想要讓專頁顯示寬一點,但是卻被側欄吃掉了,用Blogger 主題設計工具把側欄調寬還是照吃不誤,有辦法解決嗎?(頭痛。(抱歉上一則忘了勾通知我orz

    回覆刪除
    回覆
    1. 這表示你的專頁寬度大於側邊欄寬度,解決方式有兩種,讓專頁寬度變小、或是加大側邊欄寬度。

      如果不知道你的專頁參數有沒有設定正確,建議留下網址。

      刪除
    2. 網址在這邊,https://datebw.blogspot.com/
      側邊攔可以用Blogger 主題設計工具增加寬度,但是專頁的寬度不會變,專頁寬度參數在310~500間好像就不會變了@@。

      刪除
    3. 請仔細比對本文的參數說明,你的寬度設定 310px,當然只能顯示這個寬度

      刪除
    4. 噢真抱歉因為都沒變所以我就設回310了,我現在參數改回寬500 長840。但和參數寬310 長500的狀態是一樣的。重新看了一下參數說明寬應該是180~500都行,高則是大於70就可以了才對,不知道是不是我哪邊理解錯了?

      刪除
    5. 可能 FB API 有變更,以前的參數沒作用了,「二、簡易安裝法」我修改了跟 width 有關的參數,有兩處要改,請再試試看。

      刪除
    6. 成功了。:.゚ヽ(*´∀`)ノ゚.:。。
      感謝Wayne Fu大orz。

      刪除
    7. 不客氣~
      我看你的粉絲團沒有顯示完全,代表側邊欄寬度不到 500px,但粉絲團設了 500px,會有部分顯示不出來,需要再測試及調整 width 的值~

      刪除
  16. 你好 我想請問一下 我的粉絲專頁的網址貼上去 可是東西沒有跑出來
    請問這是甚麼問題...

    回覆刪除
    回覆
    1. https://lh3.googleusercontent.com/-kO3LomHS7M0/W5TAnlz-lzI/AAAAAAAAXmg/NetssaypcXk3fvMgZzEIZSY4kgw62XqPwCHMYCw/%25E6%2593%25B7%25E5%258F%2596.JPG

      刪除
    2. 請附上出問題的網址 才能幫你看是什麼狀況

      刪除
    3. 請問一下 這張圖可以嗎
      這是粉專的網址 https://www.facebook.com/NAOMI-x-KOREA-816429208563027/?ref=settings

      刪除
    4. "請附上出問題的網址 才能幫你看是什麼狀況" → 請留裝粉絲團的網頁的網址

      刪除
    5. 喔喔 不好意思
      這是我的粉專網址 https://www.facebook.com/NAOMI-x-KOREA-816429208563027/

      刪除
    6. 請爬一下其他人的留言
      看看你應該要留的是什麼網址

      刪除
    7. 好的 不好意思 我在詳讀一次

      刪除
  17. 不好意思,請問一下 我的粉絲專頁的網址貼上去 可是東西沒有跑出來
    請附上出問題的網址 才能幫你看是什麼狀況:https://www.facebook.com/groups/187908441987729/
    這是我的設定﹕https://lh3.googleusercontent.com/-Mjjj9jMw9r0/W5qPbMrBDdI/AAAAAAAAXoY/-fNlu1Qe2yITyE2ap9YpG71vfwXvcd3rgCHMYCw/%25E6%2588%2591%25E7%259A%2584%25E8%25A8%25AD%25E5%25AE%259A.png

    感謝你

    回覆刪除
    回覆
    1. 你好 不是附粉絲專頁網址給我喔 請參考留言 #18, 你可能剛好看到這個錯誤的示範, 我沒辦法處理
      請附上你的部落格網址, 我才能看是哪裡出的問題喔

      刪除
    2. 你好:
      我的部落格網頁:https://gina12252545.blogspot.com/

      不好意思,讓你費心了,再次感謝你,這一星期每天都在拜讀你的文章,對我收益良多。

      刪除
    3. hi, 從你的首頁,看不出有安裝粉絲團,所以你需要跟我說裝在哪裡。

      如果要裝在側邊欄,請在後台新增「HTML/Javascript」小工具,把安裝碼貼進去即可。

      刪除
  18. 不好意思,我的是社團,不是粉絲團就不能安裝了嗎?感謝、感謝。

    回覆刪除
    回覆
    1. FB 社團不行喔,這是粉絲團外掛~~ XD

      刪除
    2. 非常抱歉,是我未弄清楚了,造成你的困擾。如果我想問有關於DW的問題,是否要跑到有關那個網頁再作詢問?

      刪除
    3. 不太瞭解你的意思,DW 如果是指 dreamweaver 的話,可以買書來看或是 google 找相關討論區詢問。

      刪除
    4. 好的,DW是dreamweaver,感謝你的回答,我會去尋找相關討論區。

      刪除
  19. 簡易安裝一次就成功,非常感謝!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP