ボタン1つでFacebookにWebサイトを保存できる「保存ボタン」を設置する方法

Facebook

WebサイトをFacebookに保存できる「保存ボタン」の提供が始まったみたいです。「Facebookに保存って何のことだ？Webサイトを保存？」という方は、以下に仕組みを書きましたのでご参考ください。

Facebookの保存ボタンの仕組み

Webサイトに設置できるようになった「保存ボタン」・・・

保存ボタンを押すと・・・

保存されたことが通知されるので「Facebookで見る」のリンクを選択。

または、Facebookから「保存済み」ページを選択。

Facebookの投稿や写真などを後で見直せる「保存済み」ページに、保存ボタンを押したWebサイトが保存されます。

この「保存ボタン」を私が管理しているWebサイトやWeb制作案件で設置することがありました。

今後も設置することがありそうなので、以下に手順を書きました。もし似たような機会がありましたらご参考ください。

Facebookの保存ボタンをWebサイトに設置する方法

まずはFacebookの公式ページSave Buttonにアクセスして、下の画像の箇所までスクロールして設置用のコードを取得します。

「保存したいWebサイトのURL」と「ボタンのサイズ」を指定して「コードを取得」ボタンを押しましょう。

以下の2つのコードが取得できます。

  1. Facebook SDKコード
  2. ボタン表示用コード

この2つのコードで1セットです。それぞれ見ていきましょう。

Facebook SDKコードを取得

保存ボタンを設置するには、以下のようなFacebook 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/ja_JP/sdk.js#xfbml=1&version=v2.6";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※Facebookアプリを作成している方は、Facebook SDKコードにアプリのID（appId）のパラメーターが入ります。

アプリを作成していなくても保存ボタンを設置・利用することはできますので「アプリとか作ってないし、よくわかんないや」という方は、今は特に気にしなくてもOK。

Facebook SDKの読み込みは1度だけでいいです

すでにFacebook純正の「いいね！ボタン」や「シェアボタン」を設置されている方は、上記のFacebook SDKを改めて読み込む必要はないです。

表示したいWebサイトにつき、1度だけFacebook SDKが読み込まれていればOKです。

次に、ボタンを表示したい場所に表示用のコードを入れます。

ボタン表示用コードを取得

ボタン表示用のコードは以下（例）です。

<div class="fb-save" data-uri="https://www.instagram.com/facebook/" data-size="large"></div>

以上の2つのコードを書けば設置できますが、ここでOGPの値について注意しましょう。

OGPの値に注意しよう

Facebookの保存ボタンを設置したURLのOGP「og:url」「og:title」の値に気を付けましょう。

og:url 表示コードで指定したURLと同じ値を指定する
og:title 指定したタイトル名で保存される

どう注意すればいいですか？

例えばURL「https://www.imamura.biz/blog/26029」を保存するボタンを設置する場合、ボタン表示用コードは以下のように書きます。

<div class="fb-save" data-uri="https://www.imamura.biz/blog/26029" data-size="large"></div>

ボタン表示用コードに合わせて「og:url」は以下のように書きます。

<meta property="og:url" content="https://www.imamura.biz/blog/26029"/>

URLを合わせておくことが重要、ってことですね。

設置方法については以上です。

自分のWebサイトに保存ボタンを表示するかどうか、考えてみよう

私のこれまでの体験上ですが、Facebook SDKは読み込みが遅いです。非同期で読みこむ、特定の位置までスクロールされたら読みこむ、ソースコードの最後あたりで読みこむ(</body>の直前など)という方法などもありますね。

今回紹介した「保存ボタン」含め、Facebook純正の「いいね！ボタン」「シェアボタン」などはFacebook SDKの読み込みが完了しないとボタンが表示されないので、どの方法を採用したとしても、読み込みが遅ければそれだけボタン表示までの時間がかかります。

「保存ボタンが表示されるまで時間は多少かかるけど、便利だし設置したい！」という場合は設置を検討して、逆に「Webサイトの表示速度が遅くなってしまうのは避けたい」という場合は設置を見送るなど、Webサイトの運用方針によっては本当に保存ボタンが必要かどうかを考えて設置を検討したほうがいいとは思います。

何にでも当てはまりそうなことかもしれませんね。

著者:bouya Imamura