專頁附加程式

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

Facebook 專頁網址
頁籤
寬度
高度
[?]
[?]
[?]
[?]

設定

除了以上設定,您還可變更以下項目:

設定 HTML5 屬性 描述 預設

href

data-href

Facebook 專頁的網址

沒有

width

data-width

附加程式寬度(像素)。下限為 180,上限為 500

340

height

data-height

附加程式高度(像素)。下限為 70

500

tabs

data-tabs

需要顯示的標籤頁,即 timelineeventsmessages。使用逗號分隔清單。以加入多個標籤頁,即 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 已停用。請使用屬性 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>

單一標籤頁

您也可以只加入單一標籤頁,並僅展示 timelineeventsmessages

<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 檔,以瞭解我們支援的本地語言。您可能需要根據不同的語言,調整社交附加程式的寬度。您可在本地化和翻譯頁面找到更多資訊。