[Å] Facebookに保存するボタン「Save Button」をWordPressに埋め込む方法

Facebook Save Button（Facebookに保存する）の設置方法

先日よりFacebookの「Save Button（Facebookに保存する）」がブログやサイトで使用できるようになったので本日はWordPressでブログに埋め込む方法をご紹介。

すでにあとで読むのサービスはPocketなどもありますが、Pocketを知らない人は知り合いにもまだまだ多く、その一方でFacebookを利用している人は多い印象です。

今忙しいからあとで読みたい！というブログ読者さんに対してこの機会に設置してみてもいいかもしれません。ご興味のある方はぜひ導入の参考にしてください。

Save Buttonのコード取得

Save Buttonのコード取得はFacebookの専用ページからできます。

→ Save Buttonコード取得ページ

「保存するウェブサイトまたは製品のリンク」の箇所にまずは自分のブログのURLを入力。ボタンサイズはお好みのものを選択して「コードを取得」をクリックします。

Save Buttonのコード取得

Save Buttonのコード埋め込み

続いて表示されたコードをブログに埋め込む方法です。

Save Buttonのコード埋め込み

表示された上部のコード（ステップ2の部分）は既にブログ内にいいね！ボタンやシェアボタンを設置している人は不要です。まだ過去にボタンを設置していないという人は<body>タグの後に貼り付けます。

使用しているテーマにより異なりますが、header.phpに<body>タグがある場合が多いです。

ー

いいね！ボタンやシェアボタンを既に設置している人はステップ３のコードをコピーして表示させたい箇所（single.php 等）にコードをまずは貼り付けて、その後コード内の「data-uri」を以下の様に書き換えます。

表示させたい場所に貼り付けるコード

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

data-sizeの部分はsmallでもlargeでもどちらでも問題ありません。任意のサイズをご利用ください。

埋め込み後、動作確認をして設置完了です。

実際に記事を保存するとこのように白系のボタンから青系のボタンに色が変わり、再びボタンを押すと保存のキャンセルもできます。

Save Buttonの動作確認

さいごに

新しいものはまず自分で試して良し悪しを判断したいので早速導入してみました。

表示させる位置はまだ試験的。これから様子を見て色々と変更させていきたいです。

作業は全て自己責任でお願いします。参考までに。

Save Buttonを使用する人はこちらの記事も要確認↓

[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法

[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法

Facebookに保存する機能が個人ブログやホームページで利用できるようになりました。 読みたい記事を保存したのに見る方法がわからない人や保存した情報を削除したい人はぜひ参考...

Facebookに関するカスタマイズ情報

[Å] Facebookページと個人ページの違いと作り方

[Å] Facebookページと個人ページの違いと作り方

初心者のためのブログ運営 第1弾。 Facebookの個人ページとFacebookページって何が違うの？ 私の周りではブログを立ち上げた人が多く、何度も同じ質問...

[Å] Facebook OGPのアイキャッチがおかしい！対策として知っておきたい「デバッガー」の使い方とは

[Å] Facebook OGPのアイキャッチがおかしい！対策として知っておきたい「デバッガー」の使い方とは

ここ数日ずっと気になっていることがあります。それがブログ記事をFacebookでシェアした時のアイキャッチの意図せぬ表示です。 以前までOGPで正しく指定した画像が表...

[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法

[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法

今までブログに埋め込んでいたFacebookのLikeBoxが2015年6月23日に廃止となり、新たに「Page Plugin」になることはご存じですか？ 実際に今ま...

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする！

Push7で更新情報を受け取る

＼ この情報を周りの人にも教える ／

プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント（メイン）▼

ブログ公式アカウント▼