WordPressテーマの「Simplicity」に、Facebookの「保存」ボタンを設置してみた

WEBサイトにFacebookの「保存ボタン」が設置できる、「Save Button」が公開されたようなので、試験的に設置してみました。

というわけで、今回は当サイトで採用しているWordPressテーマの「Simplicity」に、Facebookの「保存」ボタンを設置する方法をご紹介いたします。

Facebookの「保存」ボタン

Facebookではタイムラインに流れてきた投稿などを「保存済みリスト」に保存できる機能があります。

Facebookのタイムラインに流れてきた投稿をあとから探すのはかなり大変です。

今回ご紹介するFacebookの「保存」ボタンは、Facebook以外のWEBサイトでも、Facebookの保存済みリストに保存をすることができます。

保存ボタンのコードを取得する

まずは「Save Button – ソーシャルプラグイン」に行きます。

次に「Save Button Configurator」にある、「コードを取得」ボタンを押下します。

Facebook Save Button - ソーシャルプラグイン

保存ボタンを表示するための各種コードがウィンドウに表示されます。

Facebook 各種コード

  1. Facebookルート要素。
  2. Facebookスクリプト。
  3. 「保存」ボタン要素。

コードを設置する

「simplicity2」フォルダ下の「footer-javascript.php」ファイル、「<div id=”fb-root”></div>」下にあるスクリプトを、取得したコード(2.Facebookスクリプト)で上書きします。

次に同じく「simplicity2」フォルダ下、「sns-buttons-icon.php」ファイルの任意の場所に下記のhtmlを張り付けます。

私はボタンの最後に「保存」のボタンを表示したかったので、一番下に貼りつけました。

次がポイントです。貼りつけたhtmlを各ページのリンクを取得できるように変更します

上記の「data-uri」の中の「https://www.instagram.com/facebook/」を「<?php the_permalink() ?>」に変えます。

これで各ページで「保存」ボタンを押下したときに、「保存済み」に保存することができます。

「Facebookに保存する」ボタン

上手くいけば、下記のような感じで「Facebookに保存する」ボタンが表示されているはずです。

Facebook 保存ボタン オフ時

Facebookにログインしている状態でボタンを押下すると、下記のようにデザインが変化します。

Facebook 保存ボタン オン時

保存に成功すると下記のような通知が表示されます。

Facebook 保存通知

保存したページは、Facebookの「保存済み」ページで確認できます。

Facebook 保存ページ

サムネイルか見出しを押下すると、保存したページへ遷移することができます。

まとめ

  • Save Button – ソーシャルプラグイン」で保存ボタンのコードを取得する。
  • 「footer-javascript.php」と「sns-buttons-icon.php」にコードを設置する。
  • 保存ボタン要素の「data-uri」の中を変える。
  • 保存したページは、Facebookの「保存済み」ページで確認できる。

「Facebookに保存する」ボタンはFacebook以外のWEBサイトでも、Facebookの保存済みリストに保存をすることができるので、非常に便利です。

興味がある方は、設置してみてはいかがでしょうか。

記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressテーマの「Simplicity」に、Facebookの「保存」ボタンを設置してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!