Google検索で上位表示するための基礎コース【SEO対策 入門講座】by Udemy

ブログ記事の文章を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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA