社交外掛程式

留言外掛程式

用戶可以利用留言外掛程式，直接在您的網站上以自己的 Facebook 帳號回應網站內容。用戶還可以選擇在 Facebook 上將這類留言活動分享給他的朋友（和朋友的朋友）。留言外掛程式同時包含內建的審核工具。

歐洲地區社交外掛程式的變更

由於在歐洲地區使用 Facebook 產品的用戶所看到的 Cookie 同意提示更新，因此您可能會開始發現社交外掛程式受到一些影響。除非歐洲地區用戶都已 1）登入其 Facebook 帳號，且 2）同意接受「應用程式與網站 Cookie」控制項，否則我們將不再支援他們使用「讚」與「留言」社交外掛程式。如果這兩項要求均獲得滿足，用戶將能看到「讚」與「留言」按鈕等外掛程式並與其互動。若未滿足上述任一項要求，用戶將無法看到這些外掛程式。

歐洲地區係指一份明確的國家／地區清單，包括：

  • 歐盟（EU）：奧地利、比利時、保加利亞、克羅埃西亞、賽普勒斯共和國、捷克共和國、丹麥、愛沙尼亞、芬蘭、法國、德國、希臘、匈牙利、愛爾蘭、義大利、拉脫維亞、立陶宛、盧森堡、馬爾他、荷蘭、波蘭、葡萄牙、羅馬尼亞、斯洛伐克、斯洛維尼亞、西班牙、瑞典

  • 非歐盟成員國，僅屬於歐洲經濟區（EEA）、歐洲自由貿易協會（EFTA）或關稅同盟：[僅屬於 EEA 或 EFTA] 冰島、列支敦斯登與挪威；瑞士：[EU 關稅同盟] 海峽群島各島、曼島、摩納哥；英國駐賽普勒斯主權基地區；[歐洲關稅同盟] 安道爾、聖馬利諾、梵蒂岡。

  • 非歐盟成員國，但屬於歐盟外延地區（OMR）：馬丁尼克、馬約特、瓜地洛普、法屬圭亞那、留尼旺、聖馬丁、馬德拉、亞速群島、加納利群島。
  • 英國（整個不列顛群島）

逐步說明

1.選擇網址或網頁

選擇要使用留言外掛程式的網站網址。

2.程式碼配置器

複製網址並貼至底下的程式碼配置器。您可以調整設定，像是留言外掛程式的 width 或預設顯示的貼文數（num_posts）。點擊「取得程式碼」按鈕，產生您的留言外掛程式程式碼。

3.複製並貼上程式碼片段

複製該程式碼片段，然後貼至要實作留言外掛程式的網站或網頁的 HTML。

留言外掛程式的程式碼產生器

回應的網址
寬度
貼文數量
取得程式碼

設定

以上程式碼配置器僅使用了留言外掛程式所有可用設定的一部分。您還可變更以下設定：

設定 HTML5 屬性 說明 預設值

colorscheme

data-colorscheme

留言外掛程式使用的色彩配置。可為「light」或「dark」。

「light」

href

data-href

與外掛程式中張貼的留言永久相關的絕對網址。在 Facebook 上與使用留言外掛程式張貼的留言相關的所有分享動態都會連結至此網址。

目前的網址。

lazy

data-lazy

true 意指透過設定 loading="lazy" iframe 屬性來使用瀏覽器的消極式載入機制。其效果為，如果外掛程式沒有靠近檢視區，瀏覽器將不會呈現該外掛程式，並且可能永遠不會顯示。可為 true 或 false（預設值）其中之一。

false

mobile

data-mobile

此布林值指明是否顯示適合行動裝置瀏覽的版本。

自動偵測

num_posts

data-numposts

預設顯示的留言數。最小值為 1。

10

order_by

data-order-by

留言顯示的順序。可為「reverse_time」或「time」。關於各種順序類型的詳細說明，請見留言排序部分。

「reverse-time」

width

data-width

留言外掛程式在網頁上的寬度。可為像素值或彈性寬度的比例（例如：100%）。留言外掛程式的行動版會忽略寬度參數，而使用 100% 的彈性寬度。留言外掛程式支援的寬度下限為 320px。

550

留言排序

用戶可使用留言外掛程式右上角的功能表，按照時間來排序留言。

您可使用 data-order-by 屬性和以下其中一個值來定義預設順序：

reverse_time（預設值）

留言會以張貼先後的相反順序顯示，頂端是最新的留言，底端是最早的留言。

time

留言會以張貼的先後順序顯示，頂端是最早的留言，底端是最新的留言。

變更語言

您可透過載入 Facebook SDK for JavaScript 的本地化版本，變更留言外掛程式的語言設定。載入 SDK 後，變更 src 的值來使用您的語言設定。例如，您可以將 en_US 替換為您的語言設定，如 fr_FR 為法語（法國）：

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1"

您可能需要調整社交外掛程式的寬度來配合不同語言。深入瞭解本地化和翻譯。

留言審核

留言外掛程式包含了強大的審核工具。這個工具可讓您的社群管理團隊輕鬆快速地同時審核多則留言。

設定

若要使用留言審核工具，您必須完成審核設定指示。

審核設定指示

請注意，您無法使用圖形 API 來回覆透過留言外掛程式所發表的留言。

主控板

有 2 種前往審核工具的方式：

1.應用程式型的審核檢視：前往 developers.facebook.com/tools/comments。您會看到您所有 Facebook 應用程式的清單，以便審核與各應用程式相關的所有留言。如果您未於任何 Facebook 應用程式中使用留言外掛程式，就無法使用這種檢視。

2.粉絲專頁型的審核檢視：點擊留言方塊旁的審核工具連結（請見以下的螢幕截圖）。這種檢視僅會顯示張貼至此網頁（網址）的留言。

審核檢視

以下的螢幕截圖顯示了這兩種審核檢視。如果您使用的是應用程式型的審核檢視，可使用功能表在應用程式之間切換。

視留言的狀態而定，您可在審核表中批准或隱藏留言。若要變更多則留言的狀態，請使用左欄的核取方塊。

1.粉絲專頁型的審核檢視

此審核檢視會顯示針對特定網址的所有留言。

2.應用程式型的審核檢視

此審核檢視會顯示針對您應用程式的所有留言。

3.已標幟佇列

此處會顯示用戶或 Facebook 標示的留言。視應用程式設定和檢舉留言的方式而定，此清單中的留言可為公開或隱藏。

設定

您可為各個應用程式定義自訂設定。使用「設定」按鈕（在工具的右上角）開啟設定對話方塊。

版主

您可將其他用戶升級為留言的版主。在方塊中輸入朋友的名稱，便會出現輸入提示，協助您選擇要成為版主的用戶。

留言排序依據

您還可控制留言排序方式。如需詳細資訊，請參閱留言排序。

審核

您可變更新留言的預設能見度。舉例來說，您可能想要審核每則新留言。如果留言尚未批准，在版主批准留言之前，只有留言人才能看到該則留言。

有三種不同的審核模式：

公開

所有留言都會公開。所有留言也都會顯示在「審查」頁籤中。

不公開

所有留言都會隱藏。

黑名單用戶

版主可在「黑名單用戶」頁籤中搜尋已封鎖的用戶。如果新留言來自黑名單用戶，該則留言會自動限制能見度並顯示在「審查」頁籤中。

網址設定

關閉討論串

您可以在使用留言外掛程式的任何網址上關閉留言討論串。這樣做就表示用戶無法在該網頁的討論上新增留言。您可以在「網址設定」功能表中關閉討論串。

覆寫自動關閉

如果您啟用自動關閉功能，就可覆寫已關閉的討論串，亦即重新開放留言。若要這麼做，請前往「網址設定」，接著開啟覆寫自動關閉，然後針對正在審核的網址設定所需的關閉狀態。

審核設定

若要使用審核工具，您必須將 Facebook 帳號或 Facebook 應用程式連結至您的留言外掛程式實作。

以 Facebook 應用程式設定（建議方式）

如果網站有多個留言方塊，建議您將 Facebook 應用程式編號指定為管理實體，這表示所有的應用程式管理員都可審核留言。這樣一來就會在 Facebook 上啟用版主介面，從該介面就可輕鬆同時審核由該應用程式編號管理的所有外掛程式的留言。

<meta property="fb:app_id" content="&#123;YOUR_APP_ID&#125;" />

除了您使用版主設定新增的用戶之外，您應用程式的所有管理員也都能管理留言，但只有版主會收到新留言通知（如果已啟用通知）。

當您在網站上實作多個留言方塊，並且透過指定應用程式編號將這些留言方塊關聯在一起，所選擇的審核設定會套用至所有的留言方塊。

舉例來說，將審核設定變更為限制能見度時，同一應用程式編號下的所有留言方塊都會受到影響。如果需要在網站不同區域套用不同的審核設定，您必須使用兩個以上的應用程式編號，然後便可對各組留言方塊套用不同的審核設定。

您可指定 fb:app_id 或 fb:admins，但不可同時指定兩者。

將 Facebook 帳號指派為管理員

若要將 Facebook 帳號指派為留言外掛程式實作的管理員，請在使用留言外掛程式的每個網頁上，將下列中繼元素加入 <head> 區段：

<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID&#125;"/>

若要新增多位版主，請為每一個 Facebook 編號加入一個元素：

<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID_1&#125;"/>
<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID_2&#125;"/>

留言計數器

在網頁的 <span> 元素中使用 fb:comments-count 值可顯示指定網址的留言數。然後可使用 CSS 來設定此 <span> 元素的樣式，以配合網站其他部分。請注意：此功能目前無法在 HTML5 中使用。

例如，若要顯示 example.com 上的留言數，請使用以下程式碼：

<span class="fb-comments-count" data-href="https://example.com/"></span>
awesome comments

將顯示以下畫面：

69391 awesome comments

透過圖形 API 可存取指定網址上的留言數。例如，example.com 上的留言數可透過網址節點上 comment_count 欄位的 share 屬性取得：

https://graph.facebook.com/v2.4/?fields=share{comment_count}&amp;id=<YOUR_URL>

Webhooks

您可將 Webhooks 設為有用戶發佈新留言時，傳送通知到伺服器上的指令碼。若要開始操作：

  1. 前往應用程式主控板
  2. 點擊左側導覽區域的「+ 新增產品」
  3. 在「Webhooks」區塊中，點擊「設定」
  4. 在下拉式功能表中，選擇「應用程式」
  5. 點擊「訂閱此主題」按鈕
  6. 在對話方塊中，輸入要收到通知的指令碼網址，例如 https://example.org/mywebhook.php
  7. 輸入權杖，可以是任意字串。此權杖會傳送到指令碼進行驗證
  8. 最後，點擊「驗證並儲存」按鈕即可完成設定

但在設定之前，請先參閱 Webhooks 說明文件，深入瞭解指令碼建置方式的完整細節。

以下是以 PHP 撰寫的簡單 mywebhook.php 範例說明。

首先是驗證部分：

<?php
if ($_GET['hub_verify_token'] === 'make-up-a-token') {
  echo $_GET['hub_challenge'];
}

此 make-up-a-token 與您在上述步驟 7 中輸入的字串相同。

然後，只須如實記錄所有留言：

file_put_contents(
  'log.txt',
  "\n" . file_get_contents('php://input'),
  FILE_APPEND
);
?>

請注意，在 PHP 中 $_POST 無法發揮作用，您必須使用 file_get_contents('php://input')

驗證 Webhook 後，您會在應用程式主控板的「Webhooks」區塊看到「plugin_comment」和「plugin_comment_reply」。

點擊「測試」，使用範例回應檢查建置是否成功，然後點擊「訂閱」以啟用設定。

如需有關回應的詳細資訊，請查看 Webhooks 參考資料文件。