「Facebookに保存する」ボタンをWordPressサイトに設置する方法

WEBページを読んでいて「これをちょっと保存しておきたいな」なんて時は、Pocketのようなページストックサービスを利用している人も多いかと思います。

その、ページをストックしておける機能がFacebookでも使えるようになったので、そのボタンの設置方法を紹介したいと思います。

スポンサーリンク
レクタングル(大)広告

Facebookに保存するボタンとは

「Facebookに保存する」ボタンは、Facebook版「あとで読む」機能みたいなものです。

ボタンを設置すると、サイト上に以下のようなボタンが表示されます。

Facebookに保存する(保存前ラージ)

ページなどを読んでいて、「この記事をストックしおいてあとでもう一度じっくり読みたいな」なんて時はボタンをクリックすれば、Facebookにページ情報がストックされます。

ページ情報がストックされるとボタンは以下のように青色になります。

Facebookに保存する(保存後ラージ)

そして、ブラウザ上に「保存されました」とポップアップが表示されます。

2016-04-18_11h56_00

「他の人には表示されません」と書かれているように、タイムライン上に出ることはありません。ですので、自分用のメモ的な使い方が出来るようになります。

太くしたページ情報は、保存済みリストで後から見ることができます。

Facebookの保存済みリスト

Facebookユーザーにとっては、「Facebookに保存する」ボタンが一般化した方が、他のストックサービスと併用する必要がなくなるので便利かもしれません。

主な手順

WordPressサイトに「Facebookに保存する」ボタンを設置するのに必要な主な手順は以下です。

  1. WordPressテーマのフッターにコードを貼り付ける
  2. 「Facebookに保存する」ボタン表示部分にコードを貼り付ける

基本的に、ほぼコピペのみで行えるので、それほど難しくはないと思います。

WordPressテーマのフッターにコードを貼り付ける

まずは、、Save Button – ソーシャルプラグインの「コードの取得」ボタンで生成されるコードを取得します。

Save Button Configurator

「Step 2」と書かれている部分のコードをコピーしてください。

FacebookのJavaScript SDKコード

「いいね!」ボタンを表示するだけなら、appidは不要なんですが、「Facebookに保存する」ボタンを利用する際は、必要なようです。appidがなくても、ボタンは表示できますが、Facebook上に保存できない模様。

取得したコードを、Wordpressテーマのfooter.phpあたりにある、</body>手前あたりに貼り付けます。

ボタン表示部分にコードを貼り付ける

「Facebookに保存する」ボタンを表示させたい部分に、以下のコードを貼り付けます。

<div class="fb-save" data-uri="<?php the_permalink() ?>" data-size="large"></div>

data-uri属性

data-uri属性の部分には、the_permalink()関数を利用して、それぞれの投稿、固定ページのURLが挿入されるようになっています。

data-size属性

data-size属性には、「large」と「small」を割り当てることができます。

ちなみに、「large」だとこんな感じ。

Facebookに保存する(保存前ラージ)Facebookに保存する(保存後ラージ)

「small」だとこんな感じの大きさになります。

Facebookに保存する(保存前スモール)Facebookに保存する(保存後スモール)

まとめ

こんな感じで、Wordpressに「Facebookに保存する」ボタンを設置するのは結構簡単です。

「Facebookユーザーに自分の記事を後からじっくり読んで欲しい」とか「Facebook保存ボタンを自分でも使いたいのでもっと流行って欲しい」なんて場合は、このFacebook機能を設置しておくと良いかもしれません。