WEBマスターの手帳 > ソーシャルメディアマーケティング > ブログ記事の文章をFacebookで引用付きでシェアできるようになる「引用プラグイン」を導入しよう

ブログ記事の文章をFacebookで引用付きでシェアできるようになる「引用プラグイン」を導入しよう

ブログ記事の文章をFacebookで引用付きでシェアできるようになる「引用プラグイン」を導入しよう

Facebookのソーシャルプラグイン(Facebook Page Pluginやシェアボタンなど)を導入しているWEBサイトは多いと思います。

特にシェアボタンはシェアするときに便利ですよね。でもWEBページ内の文章を特にピックアップしてシェアしたいときってありませんか?WEBマスターの手帳でも外部のWEBサイトの記事をシェアする際に、その記事の本文から特に共感した一文や注目した一文を、シェアする際にコメントに「引用(“”を付けて)」することがよくあります。

Mediumなどでも本文のなかで任意(選択した箇所)をシェアする機能がありますが、実はFacebookのソーシャルプラグインを使えば、どんなWEBサイトでも同じように引用付きのシェアをすることができるようになります。



Facebookでシェアするときに「引用」を付けられる

Facebookで引用付きシェア

Facebookで、見かけることは今のところほとんどありませんが、Facebookでシェアされた投稿に↑のように左側にグレーの帯が付いた引用文が表示されていることがあります。これが引用付きシェアです。

引用プラグイン。利用者はページ上のコンテンツをハイライトして、リンクシェアとペアにして追加できます。
引用元:シェア機能 – Facebook for developers

引用付きシェアのやり方

Facebookで引用付きシェアをする方法

引用付きシェアに対応しているWEBサイトで、引用したい部分をドラッグ(選択)するとポップアップが表示されます。

あとは「言葉・文章をシェア」をクリックすれば引用付きシェアが可能です。このページも引用付きシェアに対応しているので、本文の好きなところをドラッグしてみてください。

導入方法はコードを貼り付けるだけ

引用付きのシェアができるようにするのは意外と簡単です。すでにOGPを導入している場合は1行だけ追加すれば完了です。

OGPを導入しているWEBサイトの場合

すでにFacebookのOGPを導入している場合は以下の1行を<body></body>内に追加すれば実装できます。

<div class="fb-quote"></div>

OGPを導入していないWEBサイト場合

今の御時世で、シェアされるWEBコンテンツがあるWEBサイトでFacebookのOGPを導入していないということは殆ど無いと思いますが、GOPを導入していない場合は、OGPタグとFacebookのJavaScriptを読み込むコードも必要になります。

OGPタグを設置する

<head></head>タグ内にFacebookのOGPタグを設置しましょう。OGPタグについてよくわからない!という方は、たったの3ステップ!JimdoでFacebookがシェアされた時の画像を指定する方法。 | WEBマスターの手帳をご参照ください。

貼り付けるOGPタグは以下です(それぞれのWEBサイトに合わせてURLなどの差し替えが必要)。

<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>

Facebook SDK for JavaScriptを読み込む

OGPやFacebook Page Plugin(Facebookページのウィジェット)を導入している場合は「Facebook SDK for JavaScript」のコードが<body></body>内に設置されていると思います(設置されていないとどれも機能しません)。

もし心当たりがない場合は以下のコードをご自身のWEBサイトで探してみてください。無い場合は<body></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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

OGPタグとJavaScriptコードを追加したら、以下の引用シェアプラグインのコードを<body></body>内に追加しましょう。

</body>(bodyの閉じタグ)の直前に貼り付ければOKです。

<div class="fb-quote"></div>

コード全体の参考

WEBページ全体でのコードの参考は以下の見本コードを参考にしてください。

引用付きシェアプラグインの導入について詳細はQuote Plugin – ソーシャルプラグイン(英語)をご参照ください。

<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 = "//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>
関連用語:

この記事をシェアして頂けると嬉しいです


Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

最新記事一覧

カテゴリー

ピックアップ記事一覧

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事