引文外掛程式

引文外掛程式能讓用戶選擇您專頁上的文字並新增至自己的分享內容,以便傳達更精彩生動的故事。請注意:使用此外掛程式無須建置「Facebook 登入」,也不需要透過應用程式審查來申請任何額外權限。

行動版網頁的引文分享功能

如果您正在打造行動版網站,或是所提供的按鈕不符您的網站設計,另有網頁分享對話方塊可將引文新增至連結分享。

iOS 和 Android 的引文分享功能

如果您使用的是 iOS 或 Android 原生應用程式,請改為使用原生的 iOS 分享對話方塊Android 分享對話方塊

試用外掛程式程式碼範例設定

試用外掛程式

選擇本句的一部分,查看此外掛程式的實際運作情形。

程式碼範例

data-href 值調整為您的網站網址,確認開放社交關係圖中繼標籤是最新版本,外掛程式的 data-href 也與 og:url 屬性相符。

<html>
<head>
  <title>Your Website Title</title>
  <!-- Comment #1: OG Tags -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Comment #2: SDK -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Comment #3: Content -->
  <h1>Your Headline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget tristique nibh, 
    vel consequat purus. Praesent molestie, turpis ut ultrices commodo, felis arcu cursus enim, 
    vel porttitor ante quam vel lacus. Quisque at laoreet sapien. Proin nec purus dolor. Integer 
    pharetra nec ligula a condimentum. Fusce sem orci, porta ut felis id, commodo imperdiet risus. 
  </p>

  <!-- Comment #4: Plugin Code -->
  <div class="fb-quote"></div>

</body>
</html>
自己動手嘗試!

程式碼註解

  1. OG Tags:您可以使用開放社交關係圖標籤自訂連結預覽。
  2. SDK:載入 Facebook JavaScript SDK。
  3. Content:您的頁面內容。
  4. Plugin Code:配置器中的「引文」外掛程式程式碼。您可以將程式碼置於文件的任何位置, 且系統只有在您反白容器中的文字時,才會顯示該程式碼。在此範例中,系統只有在您反白正文中的文字時才會顯示該程式碼。

設定

您可以變更以下設定:

設定 HTML5 屬性 說明 預設

href

data-href

要引用的網頁絕對網址。

目前的網址

layout

data-layout

  • quote: 選擇文字時,含有藍色 Facebook 圖示與「分享引文」字樣的按鈕會重疊顯示在畫面上;一旦有人點擊,系統就會開啟「分享」對話方塊,內含作為引文的反白顯示文字。
  • button:運作方式等同於「引用」選項,但按鈕中僅有藍色 Facebook 圖示。

quote

可引用的區域

網頁的某些區域無法從引用功能受益,例如功能表、邊欄、頁尾等。您可透過以下方式定義網頁可引用的區域:

  • HTML <article> 元素,或
  • 任何包含 fb-quotable 類別名稱的元素

您可隨意互相搭配這兩種元素來定義可引用的區域。

如果網頁既不包含 <article> 也不包含 class="fb-quotable",整個網頁會變成都可引用。

變更語言

您可透過載入 Facebook JavaScript SDK 的本地化版本,變更「引文」外掛程式的語言。載入 SDK 後,變更 js.src 的值來使用您的語言設定。將 en_US 替換為您的語言設定,例如 fr_FR 為法語(法國):

js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.6";

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