WEBページを読んでいて「これをちょっと保存しておきたいな」なんて時は、Pocketのようなページストックサービスを利用している人も多いかと思います。
その、ページをストックしておける機能がFacebookでも使えるようになったので、そのボタンの設置方法を紹介したいと思います。
目次
Facebookに保存するボタンとは
「Facebookに保存する」ボタンは、Facebook版「あとで読む」機能みたいなものです。
ボタンを設置すると、サイト上に以下のようなボタンが表示されます。
ページなどを読んでいて、「この記事をストックしおいてあとでもう一度じっくり読みたいな」なんて時はボタンをクリックすれば、Facebookにページ情報がストックされます。
ページ情報がストックされるとボタンは以下のように青色になります。
そして、ブラウザ上に「保存されました」とポップアップが表示されます。
「他の人には表示されません」と書かれているように、タイムライン上に出ることはありません。ですので、自分用のメモ的な使い方が出来るようになります。
太くしたページ情報は、保存済みリストで後から見ることができます。
Facebookユーザーにとっては、「Facebookに保存する」ボタンが一般化した方が、他のストックサービスと併用する必要がなくなるので便利かもしれません。
主な手順
WordPressサイトに「Facebookに保存する」ボタンを設置するのに必要な主な手順は以下です。
- WordPressテーマのフッターにコードを貼り付ける
- 「Facebookに保存する」ボタン表示部分にコードを貼り付ける
基本的に、ほぼコピペのみで行えるので、それほど難しくはないと思います。
WordPressテーマのフッターにコードを貼り付ける
まずは、、Save Button – ソーシャルプラグインの「コードの取得」ボタンで生成されるコードを取得します。
「Step 2」と書かれている部分のコードをコピーしてください。
「いいね!」ボタンを表示するだけなら、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」だとこんな感じ。
「small」だとこんな感じの大きさになります。
まとめ
こんな感じで、Wordpressに「Facebookに保存する」ボタンを設置するのは結構簡単です。
「Facebookユーザーに自分の記事を後からじっくり読んで欲しい」とか「Facebook保存ボタンを自分でも使いたいのでもっと流行って欲しい」なんて場合は、このFacebook機能を設置しておくと良いかもしれません。