粉絲專頁外掛程式

粉絲專頁外掛程式方便您在自己的網站上內嵌和推廣任何公開的 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 檔案中。您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。