金句附加程式

金句附加程式可以讓用戶選擇您專頁中的文字,並將其加入他們的分享內容中,以呈現更豐富的分享動態。請注意:使用此附加程式無須建置「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 檔中。 您可能需要調整社交附加程式的寬度來容納不同的語言。您可在本地化和翻譯頁面找到更多資訊。