如何在 WordPress 網頁嵌入 Facebook 粉絲專頁+臉書社團?

如何在 WordPress 網頁嵌入 Facebook 粉絲專頁+臉書社團?

這是一篇教你在 WordPress,把「 FB嵌入網頁 (包含粉專&社團)」的教學。

經營個人部落格公司品牌官網架設電商網站,可能會有將 FB 粉絲專頁,或是社團嵌入自架網站的需求。

這幾種方式,能夠有效把訪客導入到社群媒體上,讓訪客更加了解你的品牌全貌,方便後續網路社群的拓展經營。

那麼我們該如何將 FB 粉專嵌入自架網站呢?

不會程式碼也不用擔心,我們將帶領各位一步步進行操作,幫助各位在 WordPress 嵌入 FB 粉專&社團。

這篇文章,章節如下。

WordPress 嵌入 FB 粉專或社團,影片教學

如何在 WordPress 網頁嵌入 Facebook 粉絲專頁+臉書社團?

1. 在WordPress 嵌入 FB 粉專

首先,可以前往 Facebook 粉絲專頁外掛程式,進入後在「 Facebook 粉絲專頁網址 」,可輸入自己的粉絲專頁網址。

也可設定視窗寬度、高度等,讓它符合網站上的版面尺寸,完成後點擊「 取得程式碼 」即可。

FB嵌入網頁 :取得粉專的程式碼
FB嵌入網頁 :取得粉專的程式碼

切換到 iFrame 並複製程式碼,這等下會用到。

FB嵌入網頁:複製 iFrame 程式碼
FB嵌入網頁:複製 iFrame 程式碼

前往 WordPress 網站 > 外觀 > 小工具,選擇「 自訂 HTML 」並放入側邊欄,點選新增。

FB嵌入網頁:使用 WordPress 網站小工具
FB嵌入網頁:使用 WordPress 網站小工具

可輸入標題,並把剛複製的粉絲專頁程式碼,貼入到欄位中,完成後儲存。

FB嵌入網頁:貼上粉專程式碼
FB嵌入網頁:貼上粉專程式碼

小分享:上圖紅框內的 width、height 分別是粉專欄位的寬度&高度,可依照自己網站需求調整。

最後前往 WordPress 網站前台,看一下成果啦~

FB嵌入網頁:粉絲專頁嵌入成功啦!
FB嵌入網頁:粉絲專頁嵌入成功啦!

以上是在 WordPress 網站,簡易嵌入 FB 粉絲專頁的教學。


2. 在 WordPress 嵌入 FB 社團

另一種常看到的就是,把 Facebook 社團嵌入到網站中,這章節會跟大家分享怎麼操作。

Step1:登入 FB & 註冊 Facebook for Developers 帳戶

前往 FB 社團外掛程式,與上一章節的嵌入粉專不一樣的地方是,這裡需先登入 FB & 註冊 Facebook for Developers(FB 開發者帳戶),等下嵌入的社團才有辦法正常顯示。

點選右上角登入到 FB,如果已是登入狀態,這步驟可省略。

FB嵌入網頁:登入 FB 或註冊 Facebook for Developers 的會員
登入 FB 或註冊 Facebook for Developers 的會員

將滑鼠移至右上角頭像,前往「 建立應用程式 」。

FB嵌入網頁:建立應用程式
FB嵌入網頁:建立應用程式

選擇「 企業商家 」的應用程式類型,完成後下一步。

FB嵌入網頁 :選擇應用程式類型
FB嵌入網頁 :選擇應用程式類型

任意輸入應用程式名稱、選擇應用程式用途等 ..,然後「 建立應用程式 」。

FB嵌入網頁:輸入相關資訊
FB嵌入網頁:輸入相關資訊

這樣一來,新的應用程式就建立成功囉!如果前往主控版,也會發現它的蹤跡:)

FB嵌入網頁:新的應用程式建立完成
FB嵌入網頁:新的應用程式建立完成

Step2:複製社團的程式碼

再度前往 FB 社團外掛程式,在相同地方輸入自己的社團網址、顯示寬度等 ..,然後點「 取得程式碼 」。

FB嵌入網頁:設定社團資料&取得程式碼
FB嵌入網頁:設定社團資料&取得程式碼

切換到 iFrame 格式,選擇剛建立的應用程式名稱,然後複製下面的整串程式碼,這等下會用到。

FB嵌入網頁 :複製社團嵌入程式碼
FB嵌入網頁 :複製社團嵌入程式碼

備註:上圖的紅色線,代表是有正常的帶入應用程式 ID(AppId),這樣等等在 WordPress 嵌入社團,才會正常顯示唷。

如果連結內沒有出現 AppId,那可能要重回前面的步驟,看是否有建立至少一個 FB 應用程式。

Step3:貼入到 WordPress 網站內

前往 WordPress 網站 > 外觀 > 小工具,選擇「 自訂 HTML 」並貼入剛複製的程式碼,然後儲存。

FB嵌入網頁 :嵌入到 WordPress 網站中
FB嵌入網頁 :嵌入到 WordPress 網站中

最後就能到前台看一下成果啦!我們的 FB 社團果然順利出現了:)

FB嵌入網頁:社團順利嵌入成功啦!
社團順利嵌入成功啦!

3. FB 嵌入額外分享(FB Messenger)

這篇文章分享了嵌入 FB 粉專&社團方法,那 .. 你還知道 FB 還有一個功能,可以達到線上即時聊天的效果,就是 FB Messenger

如果訪客有進一步需求,或是想了解更多商家服務、電商產品內容 等 ..,就可以直接線上與站長溝通。

FB嵌入網頁:在網站上嵌入 FB Messenger(功能示意圖)
在網站上嵌入 FB Messenger(功能示意圖)

有關如何串連網站 & FB Messenger,我在 如何嵌入 FB Messenger 有完整教學。

至於想讓 FB Messenger 擁有更強的客製化能力,例如自動回覆、訊息流程安排、關鍵字回覆等 ..,可參考 ManyChat 這款國外 聊天機器人軟體,將會對你有所幫助。

FB Messenger 可以讓訪客更好的找到你,有了近一步的接觸機會,將會有效的提升網站轉化率:)


常見問題

如何在 WordPress 嵌入 Facebook 粉絲專頁&社團?


按照上面的步驟逐一進行即可。

需要注意的是:嵌入 Facebook 社團時一定要申請應用程式,才會有 App ID 可進行嵌入,沒有申請應用程式,跑出來的程式碼會不完整,就無法成功嵌入哦!

在 WordPress 嵌入 Facebook 粉絲專頁&社團,有什麼好處呢?


現今是個社群行銷的時代,粉絲專頁對於商業經營的重要性遠超乎你的想像,是一種累積性的軟實力!

除此之外,在 個人網頁嵌入 Facebook 社群,可以讓訪客更快速方便地與你取得聯繫。

幫助你更好地完成:拓展業務、粉絲經營、客戶溝通等 .. 線下事務。

有什麼辦法可以更好、更即時的回覆訪客訊息?


我們還可以運用「 聊天機器人 」對訪客進行自動回覆,幫你先初步的招呼客人,讓訪問你的客戶有更佳的體驗:)


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端