專頁附加程式

專頁附加程式可讓您輕鬆地在您的網站上內嵌和推廣任何 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 = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

支援的語言設定列於 Facebook 語言設定 XML 檔中。 您可能需要調整社交附加程式的寬度來容納不同的語言。您可在本地化和翻譯頁面找到更多資訊。