粉絲專頁外掛程式

粉絲專頁外掛程式方便您在自己的網站上內嵌和推廣任何 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


已過時的屬性

  • data-show-posts 屬性已過時。請使用 tabsdata-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 檔案中。 您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。