將 Facebook 粉絲專頁嵌入至網頁

文章專區

網頁設計相關文章

在網頁設計上，可能需要將Facebook粉絲專頁的貼文內嵌至網頁內，而Facebook官方本身就有提供這方面的嵌入設定，就算對網頁不熟悉也可以輕鬆操作。

在頁面上可以看到許多的設定項目，而且可以隨時預覽呈現的方式。

首先貼上粉絲專頁的網址，寬度與高度的單位為像素，只要填入數字即可，下方的勾選項目可依據自身需求勾選。

確定好沒問題之後點選「取得原始碼」，會跳出兩種原始碼，分別為JavaScript SDK和iframe

其中iframe頁籤較為單純直接，只要複製貼上於網頁中要顯示的位置即可。缺點是必須設定寬度和高度，無法自動適應寬度變化，不支援RWD

而JavaScript SDK插入方式有兩段原始碼，第一段需插在<body>之後，第二段原始碼之前。而第二段則是跟iframe一樣，插入在要實際顯示的位置。

一般較推薦使用JavaScript SDK，只要設定時不指定寬度，且勾選「搭配外掛程式容器寬度」，插入的粉絲專頁即可在180~500pixel的範圍內自動縮放。

範例：

一化網頁設計