專頁附加程式

專頁附加程式可讓您輕鬆地在您的網站上內嵌和推廣任何 Facebook 公開專頁。就像在 Facebook 一樣，您的訪客無須離開您的網站，便可讚好和分享專頁。您可以在任何不受限制（如國家/地區限制或年齡限制）的專頁使用專頁附加程式。

相關主題：社交附加程式常見問題 | 其他社交附加程式

Facebook 專頁網址

分頁

闊度

高度

使用小型頁首

配搭附加程式容器闊度

隱藏封面相片

顯示朋友的大頭貼

取得代碼

設定

除了以上設定，您還可變更以下項目：

設定	HTML5 屬性	說明	預設
`href`	`data-href`	Facebook 專頁的網址	無
`width`	`data-width`	附加程式寬度（像素）。下限為 `180`，上限為 `500`	`340`
`height`	`data-height`	附加程式高度（像素）。下限為 `70`	`500`
`tabs`	`data-tabs`	需要顯示的分頁，即 `timeline`、`events`、`messages`。使用逗號分隔清單，以加入多個分頁，即 `timeline, events`。	`timeline`
`hide_cover`	`data-hide-cover`	在標題隱藏封面相片	`false`
`show_facepile`	`data-show-facepile`	當朋友對此讚好時，系統將顯示個人檔案相片	`true`
`hide_cta`	`data-hide-cta`	隱藏自訂呼籲字句按鈕（如有）	`false`
`small_header`	`data-small-header`	改為使用小標題	`false`
`adapt_container_width`	`data-adapt-container-width`	嘗試配合容器寬度	`true`
`lazy`	`data-lazy`	`true` 代表您可透過設定 `loading="lazy"` iframe 屬性來使用瀏覽器的延遲載入機制。隨之產生的影響是，如果附加程式並非靠近檢視區，則瀏覽器不會顯示附加程式，且您可能永遠無法看到此附加程式。其設定可以是 `true` 或 `false`（預設）其中一個。	`false`

已停用的屬性

屬性 data-show-posts 已停用。請使用屬性 tabs／data-tabs 和值 timeline，顯示專頁生活時報上的帖子。

將專頁附加程式加入網站

專頁附加程式的標準設定僅包含標題和封面相片。其大小非常適合用於在細小空間（如邊欄頂部）推廣專頁。

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

呼籲字句

如果您的專頁有自訂呼籲字句按鈕，系統就會顯示這個按鈕，而不會顯示預設呼籲字句（「分享」按鈕）。

如果附加程式寬度不到 280 像素，系統會顯示預設的「分享」按鈕，以免在不同的翻譯版本中出現設計錯位的問題。

專頁分頁：生活時報、活動和訊息

您現在可在附加程式中查看生活時報、活動和訊息標籤：

生活時報分頁：這會顯示 Facebook 專頁生活時報的最新帖子。
活動分頁：用戶可從此附加程式追蹤您的專頁事件並訂閱事件。
訊息分頁：用戶可直接從您的網站向專頁傳送訊息。用戶必須登入才能使用這項功能。

啟用專頁的訊息功能

如要啟用 Facebook 專頁的訊息功能，請前往專頁的 Settings。在 Messages 列勾選顯示「傳送訊息」按鈕，允許用戶私下與我的專頁聯絡。（直接連結：https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view）。

加入多個標籤頁

使用 data-tabs 屬性中的逗號分隔清單，以加入多個分頁：

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

單個分頁

您也可以只加入單個分頁，並僅展示 timeline、events 或 messages：

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

調適型寬度

附加程式將會預設在頁面載入時調適母容器的 width（下限 180px／上限 500px），以協助您變更版面：

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

如果母元素的 width 大於專頁附加程式的 width，則將保持 data-width 中定義的值：

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

附加程式一定不會小於 180px：

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

您可取消勾選調整至附加程式容器寬度選項，以關閉調適型寬度；這樣，無論母容器寬度為何，附加程式都會以指定的寬度顯示。

無動態調整大小

專頁附加程式可與回應型、彈性和靜態版面一同使用。您可以使用媒體查詢或其他方法設定母元素的 width，但是：

附加程式將在頁面載入時確定其 width
頁面載入後，附加程式就不會對方塊模型的變更有所反應。

如果您想在變更視窗大小時調整附加程式的 width，則需要手動重新顯示附加程式。

顯示朋友頭像

以用戶的真實個人資料相片顯示讚好專頁的用戶，而非只顯示數字。到訪專頁的用戶會看到對該專頁讚好的朋友人數及其個人檔案相片。

只需勾選配置工具中的 Show Friend's Faces，即可啟用此選項。

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

設有私隱限制的專頁

設有私隱限制的 Facebook 專頁無法內嵌。

變更語言

您可以載入 Facebook JavaScript SDK 的本地化版本，以此變更專頁附加程式的語言。載入 SDK 後，變更 js.src 的值來使用您的本地語言。將 en_US 替換為您的本地語言，例如 ru_RU 為俄文（俄羅斯）：

範例

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

請參閱 Facebook 本地語言 XML 檔案，了解我們支援的本地語言。視乎您選擇的語言，您或需要調整社交附加程式的寬度。如需更多資訊，請瀏覽本地化和翻譯頁面。