Facebook 引用プラグインをサイトに実装する方法

Facebookの引用プラグインは、選択したテキストを引用してFacebookの投稿に追加して共有する機能です。引用プラグインを使用するために、Facebook ログインの実装などは必要ありません。

Facebook 引用ログインとは？

Facebook 引用プラグインを導入しているサイトで、パソコンで表示しているウェッブページのテキストを選択すると、「言葉・文章をシェア」のボタンが表示されます。

以下は、テキスト「プラグインの動作」を選択した時に引用プラグインのボタンが表示される例です。

引用プラグイン利用例

Facebook 引用プラグインの利用についての具体的な例を以下に紹介します。ページ内のテキストを選択すると、選択した箇所がグレー色で示されて表示されます。その上にFacebookのアイコンと「言葉・文章をシェア」のボタンが表示されます。

このボタンをクリックすると、記事ページのURLと引用部が入力された状態で、Facebookの投稿ページが開かれます。引用箇所に加えて、ページにOpen Graphの出力が行われていれば、URLを入力すると画像と記事タイトルが表示されます。

シェアボタンを押して、投稿を行うアカウントを個人ではなく、Facebookのページから行う設定方法については、以下の記事をご覧下さい。

シェアボタンからFacebookのページアカウントで共有、投稿する方法

上記利用例は、以下のページで実際に行なったものです。

Bloggerの記事にTable of Contents（目次）を自動生成するプラグインを加える方法

備考：
Bloggerの情報を提供する関連サイト、Blogger101@ブロギングライフは、Facebook引用プラグインを実装しています。全てのページで引用ブラグインの機能が使用できます。

サイト運営者が、運営しているサイトの記事をFacebookで紹介する時にも、引用プラグインが実装されていると記事の紹介が簡単にできて便利です。

引用プラグインの導入方法

Facebook のSDKとプラグインコードをページ内に設置すると引用プラグインが利用できます。

Facebook SDK for JavaScriptの設置

Facebook ソーシャルプラグインを使用するためには、Facebook SDK for JavaScript をページ上に設置する必要があります。以下のコードをコピーして、<body> タグの直ぐ下に貼り付けます。

<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/ja_JP/sdk.js#xfbml=1&version=v2.6”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

備考：
Facebook SDKは、テーマなどで予め実装されている場合もあります。既に実装されている場合は、設置する必要はありません。設置すると重複してしまうので、しないで下さい。

Facebook ページプラグインも、Facebook SDKを使用して動作します。ページプラグインを設置しているサイトでは、SDKの設置は既にされているため、新たなSDKの設置作業は必要ありません。

Facebookタイムラインの設定オプションや通常ページに埋め込む方法については、以下の記事をご参照下さい。
Facebook ページプラグインをサイトに設置する方法