5步驟迅速在WordPress建立FB留言板|只要簡單複製貼上即可

在WordPress加上臉書留言板

如何在不動到程式碼的情況下,該怎麼在WordPress建立FB留言板呢?

影片適合對象:想要使用FB留言外掛功能的新手。

影片介紹

正在建置網站的你,若想在WordPress網站建立一個與顧客或粉絲互動的FB社交留言板,
但卻不想動到程式碼的情況下,我的可以要FB的Facebook for Developers網站使用【留言外掛程式】(comments)
實際操作接下來會一一細說喔。

WordPress建立FB留言板-實際操作方式

以下分為5步驟詳細說明:

步驟 1

首先,我們可以先到Facebook for Developers的【文件】(Docs)

到Facebook for Developers的【文件】(Docs)

往下滑會看到社交網站整合

社交網站整合

往下看,會有一項Social Plugins,翻譯成中文就是【社交外掛】的意思

Social Plugins (社交外掛)

步驟 2

當我們到社交外掛的頁面時,在他的左側欄有一項【留言】,這一項留言就是【將FB嵌入網站的留言外掛程式】
如果大家找不到這個網站,可以直接點擊以下連結:
https://developers.facebook.com/docs/plugins/comments

社交外掛的【留言功能】

步驟 3

我們往下滑,會看到【留言外掛程式的程式碼產生器】

留言外掛程式的程式碼產生器

那我們只要把【自己的網域】複製到【留言外掛的程式產生器】,它就會產生FB留言板的樣式

FB留言板樣式

步驟 4

我們點擊樣式左下角的【取得程式碼】

點擊【取得程式碼】

這時他會跳出【JavaScript SDK】的視窗,
可以看到下列有顯示【步驟 1:選擇你的應用程式編號和語言】

【步驟 1:選擇你的應用程式編號和語言】

如果你沒有自己的應用程式,你必須在右上角有一項【我的應用程式】 ,先建立【全新的應用程式編號】,建立好你才可以進行下一個步驟。

若沒有我的應用程式,先在【我的應用程式】建立全新的應用程式編號

步驟 5

建立好【應用程式編碼後】,我們可以再進行【步驟 2:包含粉絲專業的JavaScript SDK一次,
最好是接在開頭的內文標籤後(接在開頭的<body>之後)】,
加上【步驟二】下方的程式碼,我們可以將這一串SDK放在HTML,且必須要往上擺。

【步驟 2:包含粉絲專業的JavaScript SDK一次,最好是接在開頭的內文標籤後(接在開頭的<body>之後)】

以我的網站舉例來說, 我使用的是WordPress,佈景主題是採【Blocksy】

佈景主題是採【Blocksy】

我們可以在【外觀】【自訂】

點擊【外觀】的【自訂】

點進去後,我們在左側欄找到【首頁】

點擊【首頁】

再找到元件裡的【HTML】

找到元件裡的【HTML】

【HTML】拖移到右側【主要列】的中間

將【HTML】拖移到右側【主要列】的中間

這時你的【HTML】在網頁上方【主要列】,
SDK必須先加載,才能順利使用臉書前端的功能,所以要盡量擺在網頁的上面,它才不會出現其他錯誤
放置好之後,我們就可以點擊左側欄的【發佈】。

SDK必須先加載,才能順利使用臉書前端的功能,所以要盡量擺在網頁的上面,它才不會出現其他錯誤

接著我們可以再執行【步驟 3:將此程式碼放置在你希望外掛程式顯示的頁面位置】,意思是將程式碼貼在我們想要顯示臉書留言板的地方

【步驟 3:將此程式碼放置在你希望外掛程式顯示的頁面位置】

我們可以先到自己的網站頁面,將【步驟三】的程式碼複製,貼在古騰堡【HTML】的模式,完成後我們就可以點擊右上角的【更新】。

將【步驟三】的程式碼複製,貼在古騰堡【HTML】的模式

再到網頁前端查看FB留言板是否有成功顯示即完成

到網頁前端查看FB留言板是否有成功顯示即完成

影片連結