![[Å] WordPress・エックスサーバ環境を初のSSL化！全体の流れと手順](http://webmemo.biz/wp-content/uploads/2017/06/wordpress-ssl-manual-340x200.jpg)
[Å] Facebookに保存するボタン「Save Button」をWordPressに埋め込む方法
先日よりFacebookの「Save Button（Facebookに保存する）」がブログやサイトで使用できるようになったので本日はWordPressでブログに埋め込む方法をご紹介。
すでにあとで読むのサービスはPocketなどもありますが、Pocketを知らない人は知り合いにもまだまだ多く、その一方でFacebookを利用している人は多い印象です。
今忙しいからあとで読みたい！というブログ読者さんに対してこの機会に設置してみてもいいかもしれません。ご興味のある方はぜひ導入の参考にしてください。
Save Buttonのコード取得
Save Buttonのコード取得はFacebookの専用ページからできます。
「保存するウェブサイトまたは製品のリンク」の箇所にまずは自分のブログのURLを入力。ボタンサイズはお好みのものを選択して「コードを取得」をクリックします。
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を使用する人はこちらの記事も要確認↓
![[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法](http://webmemo.biz/wp-content/uploads/2016/04/facebook-save-button-article-check-01-150x150.jpg)
[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法
Facebookに保存する機能が個人ブログやホームページで利用できるようになりました。 読みたい記事を保存したのに見る方法がわからない人や保存した情報を削除したい人はぜひ参考...
Facebookに関するカスタマイズ情報
![[Å] Facebookページと個人ページの違いと作り方](http://webmemo.biz/wp-content/uploads/2016/02/blog-beginner-eye-150x150.jpg)
[Å] Facebookページと個人ページの違いと作り方
初心者のためのブログ運営 第1弾。 Facebookの個人ページとFacebookページって何が違うの？ 私の周りではブログを立ち上げた人が多く、何度も同じ質問...
![[Å] Facebook OGPのアイキャッチがおかしい！対策として知っておきたい「デバッガー」の使い方とは](http://webmemo.biz/wp-content/uploads/2015/05/facebook-ogp-debug-150x150.jpg)
[Å] Facebook OGPのアイキャッチがおかしい！対策として知っておきたい「デバッガー」の使い方とは
ここ数日ずっと気になっていることがあります。それがブログ記事をFacebookでシェアした時のアイキャッチの意図せぬ表示です。 以前までOGPで正しく指定した画像が表...
![[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法](http://webmemo.biz/wp-content/uploads/2015/04/facebook-eye-150x150.jpg)
[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法
今までブログに埋め込んでいたFacebookのLikeBoxが2015年6月23日に廃止となり、新たに「Page Plugin」になることはご存じですか？ 実際に今ま...
＼ この情報を周りの人にも教える ／
[Å] Facebookに保存するボタン「Save Button」をWordPressに埋め込む方法
この記事が気に入った方はいいね！で
更新情報を受け取る！
![[Å] LINEで送るボタンをPC版とモバイル版に設置しました！](http://webmemo.biz/wp-content/uploads/line-eye-340x200.jpg)
![[Å] Facebookページに投稿した過去記事や写真が当然消えた時に再表示させる方法](http://webmemo.biz/wp-content/uploads/wordpress-popular-posts/21744-first_image-90x90.jpg "[Å] Facebookページに投稿した過去記事や写真が当然消えた時に再表示させる方法")
![[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法](http://webmemo.biz/wp-content/uploads/wordpress-popular-posts/21160-first_image-90x90.jpg "[Å] Facebookに保存した記事をパソコンやiPhoneで見る方法・削除方法")
![[Å] リンクエラーチェック！！残念な結果だったのでShareHtmlカスタマイズ！](http://webmemo.biz/wp-content/uploads/wordpress-popular-posts/5230-first_image-90x90.jpg "[Å] リンクエラーチェック！！残念な結果だったのでShareHtmlカスタマイズ！")
![[Å] Facebookで記事をシェアしたら一部でタイトルが文字化け！解決方法ご紹介！](http://webmemo.biz/wp-content/uploads/wordpress-popular-posts/7307-first_image-90x90.jpg "[Å] Facebookで記事をシェアしたら一部でタイトルが文字化け！解決方法ご紹介！")