[Å] 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に保存するボタン「Save Button」をWordPressに埋め込む方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Push7で更新情報を受け取る

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

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

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