引用プラグイン

引用プラグインを使用すると、ページ上のテキストを選択してシェアに追加できるため、より表現豊かな記事を作成できます。このプラグインを使用するために、Facebookログインを実装したり、追加のアクセス許可を、アプリレビューを通じてリクエストしたりする必要はありません。

モバイルウェブでの言葉・文章のシェア

モバイルウェブ向けのウェブサイトを作成する場合や、提供されるボタンがウェブサイトのデザインに合わない場合でも、ウェブシェアダイアログでリンクシェアに引用を追加できます。

iOSやAndroidでの言葉・文章のシェア

iOSやAndroidのネイティブアプリの場合は、ネイティブのiOS版シェアダイアログAndroid版シェアダイアログを使用する必要があります。

プラグインを試すコードサンプル設定

プラグインを試す

この文章の一部を選択して、プラグインの動作を実際にご確認ください

コードサンプル

data-hrefの値を自分のウェブサイトのURLに変更します。Open Graphメタタグが最新の状態になっていて、プラグインのdata-hrefog: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: Open Graphタグを使用すると、リンクのプレビューをカスタマイズできます。
  2. SDK: Facebook SDK for JavaScriptを読み込みます。
  3. Content: ページのコンテンツです。
  4. Plugin Code: 構成ツールから取得した引用プラグインのコードです。ドキュメント内の好きな場所に配置でき、 該当するコンテナ内のテキストをハイライト表示したときにのみ表示されます。この例では、本文内のテキストをハイライト表示したときにのみ表示されます。

設定

次の設定を変更できます。

設定 HTML5属性 説明 デフォルト

href

data-href

引用の対象となるページの絶対URLです。

現在のURLです。

layout

data-layout

  • quote: テキストを選択すると、青いFacebookアイコンと[言葉・文章をシェア]の文字付きのボタンがオーバーレイとして表示されます。利用者がこのボタンをクリックすると、シェアダイアログが開き、テキストが引用としてハイライト表示されます。
  • button: 「引用」のオプションと同様に動作しますが、ボタンには青いFacebookアイコンのみが表示されます。

quote

引用可能な領域

ウェブページのメニュー、サイドバー、フッターなど、引用を可能にするメリットがない領域もあります。次の方法で、ページの引用可能な領域を定義できます。

  • HTMLの<article>要素、または
  • fb-quotableというクラス名のついた要素

2つまでの組み合わせを使用して、引用可能な領域を定義できます。

ページに<article>またはclass="fb-quotable"のいずれも含まれていない場合は、ページ全体が引用可能になります。

言語を切り換える

Facebook JavaScript SDKのローカライズバージョンを読み込むことで、引用プラグインの言語を変更できます。SDKを読み込む際のjs.srcの値を、使用する言語に変更します。たとえば、フランス語(フランス)の場合は、en_USfr_FRに置き換えます。

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

サポートされる言語については、FacebookLocales.xmlファイルをご覧ください。 使用する言語によっては、ソーシャルプラグインの幅の調整が必要になる場合があります。詳しくは、「ローカライズと翻訳」ページをご覧ください。