バイラルサイトっぽいFacebookフォローエリアを作成する方法|WordPressカスタマイズ

2015年6月23日から「Facebookライクボックス」が使用できなくなります。

それに代わり、以下の「Facebookページプラグイン」を設置する必要があります。

Facebookページプラグイン[Page Plugin]の設置方法(ライクボックス代替)
当サイトでもこれまで使用してきたFacebookのライクボックスが2015年6月23日から利用できなくなります。 Face...

ただ、この「Facebookページプラグイン」は、個人的にはちょっと使いづらく、あまり好みではありませんでした。

なので、代わりとなる「Facebookページにいいねをするためのボタンエリア」を作ってみました。

photo by FACEBOOK(LET)

スポンサーリンク
レクタングル(大)広告

作成する「いいね!」ボタンエリア

6月で廃止される、Facebookライクボックスは、以下のようなものでした。

6月23日で廃止されるFacebookライクボックス

これ、結構見やすくて気に入っていました。

で、新しく採用されたFacebookページプラグインが以下です。

新しく採用されたFacebookページプラグイン

このページプラグイン、個人的にはあまり使い勝手が良く感じません。僕が、以前のライクボックスに慣れてしまいすぎたせいかもしれませんが、以下の点がちょっと不満です。(初期設定により多少は変わります。)

  • ウィジェットの大きさがある程度決まっている(幅を501px以上にできない)
  • 文字が背景の画像をと重なると読みにくい
  • 知り合いがいいねしてないと『「いいね!」した友だちはまだいません。』と出る

「シェア」ボタンがあるのは良い点ですが、どうもまだ慣れていないせいか、今ひとつピンときません。

ということで、今まで慣れ親しんだ「いいね!」ボタンを利用できる以下のようなバイラルサイトのような「いいねボタンエリア」を作成してみました。新しく作成したいいねボタンエリア

これは、PC表示での外観はGunosyのものに似せてみました。

それに加えてモバイル端末で表示すると、一応レスポンシブ表示もされるようにしてみました。

いいえボタンエリアを画面の狭い端末で表示させた場合

というわけで今回は、この「Facebookのいいねボタンエリア」の作成方法を紹介します。

カスタマイズの主な手順

今回のカスタマイズの主な手順は以下です。

  1. 下準備
  2. いいねボタンエリアテンプレートの作成(ほぼコピペ)
  3. 既存テンプレートに「いいねボタンエリア」を挿入する(コピペ)
  4. style.cssにスタイルを書く(コピペ)

FacebookページのURLを、それぞれのものに書き換える以外は、ほぼコピペでできるかと思います。

下準備

まずは、今回のカスタマイズに必要な下準備をします。以下の設定を行ってください。

100×100pxの切り抜きサムネイルの作成

まずは、functions.phpに以下の記述を記入します。

テーマに同様のサムネイル設定がある場合は、設定する必要がありません。

Font Awesomeの呼び出し

テーマでFont Awesomeを使用していない場合は、テンプレートにある<head></head>内に以下の記述を挿入してください。

既に、Font Awesomeを使用しているテーマの場合は記入する必要はありません。

アイキャッチがない場合の画像の準備

アイキャッチがない投稿用のときに表示する「NO IMAGE」画像を準備します。

今回は、テーマ(子テーマ)直下に「images」というフォルダを作成し、その中に以下の画像を「no-image.png」という名前で置きました。

no-image

構造としては以下のようになります。

【テーマ(子テーマ)フォルダ】/images/no-image.png

画像は、上記のものを使用しなくても好きなものでOKです。

いいねボタンエリアテンプレートの作成

次に、テーマ(子テーマ)フォルダ直下、style.cssがある階層と同じところに「facebook-page-like.php」というテンプレートファイルを作成します。

その作成したfacebook-page-like.phpファイルを開いて、以下のコードをコピペします。

冒頭にあるの、「FacebookページのURL」は、それぞれのURLを設定してください。

メッセージ部分も好みの文章に変更してください。

子テーマからカスタマイズする場合は、「get_template_directory_uri」の部分を「get_stylesheet_directory_uri」に置換してください。

「いいねボタンエリア」を挿入する

あとは、「single.php」とか「page.php」の本部下あたりの表示させたい部分に、以下のコードを挿入します。

「いいねボタンエリア」をテンプレート化したことで、好きな場所に何箇所でも挿入することができます。

style.cssにスタイルを書く

最後に、style.cssに以下の記述をコピペで追記します。

ブレークポイント2つに対応した、レスポンシブスタイルになっていると思います。

ただ、高さ(height)が100pxを超える文章などは、自動で隠れるよう(overflow: hidden;)になっているので、メッセージ部分は、ある程度文字数制限があると思います。

細かなスタイルは、それぞれ調節してください。

動作確認は、パソコンのChrome、Firefox、IE11でしかしていません。

動作確認

上記のカスタマイズを動作させると、以下の3つの表示になります。

PCなどで表示

全体的に余裕を持った表示。

新しく作成したいいねボタンエリア

441px以上639px以下の画面で表示

Font Awesomeアイコンや<br>を非表示にして、文字も少し小さめ。

441px以上639px以下の画面で表示した場合

狭いモバイル端末で表示

小さなタイプの「いいね!」ボタンを表示し、文字をさらに小さめに設定。

いいえボタンエリアを画面の狭い端末で表示させた場合

まとめ

このように、カスタマイズすることで、以下のような利点はあるかと思います。

  • 慣れ親しんでいる「いいね!」ボタンを使うことができる
  • HTML+CSSで装飾した自由なメッセージを設定できる
  • 純正ウィジェットと違ったデザインにすることで多少は目を引くかも

上記のような良い点はあると個人的には思っているものの、実際に設置して効果があるかはわかりません。

ただ、「他の人とは違ったFacebookページエリアにしたい」とか「Facebookページフォローを促すメッセージは自分の言葉で書きたい」なんて人にはいいかもしれません。

Simplicity1.7.2で、今回紹介したフォロー機能を実装しました。

『バイラルサイトっぽいFacebookフォローエリアを作成する方法|WordPressカスタマイズ』へのコメント

  1. 名前:がちょぴん 投稿日:2015/06/17(水) 11:48:05 ID:8ba5555ba

    このアイデア素晴らしくて良いですね!
    もしかして次のテーマアップデートに追加されるんでしょうか?

    100×100pxの切り抜きサムネイルの作成

    管理画面→メディア設定からサムネイル等のサイズを全て0にしている場合ですが、
    直接IMGタグで記述できるようなやり方ありましたら是非教えてほしいです。

  2. わいひら 名前:わいひら 投稿日:2015/06/17(水) 22:06:00 ID:eb2f8489d

    もしかして次のテーマアップデートに追加されるんでしょうか?

    もう実装は済んでいて、あとは公開するのみとなっています。

    直接IMGタグで記述できるようなやり方ありましたら是非教えてほしいです。

    普通にメディアにアップロードして、URLを直接書き込めばいけるかと思います。

  3. 名前:がちょぴん 投稿日:2015/06/18(木) 11:02:59 ID:67d35d00e

    もう実装は済んでいて、あとは公開するのみとなっています。

    ありがとうございます。

    普通にメディアにアップロードして、URLを直接書き込めばいけるかと思います。

    そうしますと、facebook-page-like.php ファイルの中身も少し変わるんですよね?(5行目~8行目?)
    バージョンアップした際こちらにあります下記のような解説記事掲載してもらえるなら大変幸いです。

    URL:http://goo.gl/mfG3hl

  4. わいひら 名前:わいひら 投稿日:2015/06/18(木) 12:44:18 ID:1fa4ed4ed

    申しわけないですが、サポート対象外のものにもあるように、独自にテーマをカスタマイズした場合の対処法は書かないと思います。
    手元にファイルもないですし、どういった不具合が出るかはわからないので。

  5. 名前:がちょぴん 投稿日:2015/06/18(木) 12:58:32 ID:67d35d00e

    承知しました。

    説明不足であるため補足致します。
    私も含め、少しの容量でも節約したいという方は、
    管理画面→メディア設定からサムネイル等のサイズを全て0にしております。
    そういう状態でも直接IMG等で記述できるやり方がありましたら教えてほしいというのがコメントの経緯になります。

    バージョンアップした際こちらにあります下記のような解説記事掲載してもらえるなら大変幸いです。

    誤解を招くようなコメントでしたので修正致します。
    バージョンアップした際、解説記事等で直接IMG等で記述できるやり方掲載してもらえるなら大変幸いです。

    手元にファイルもないですし、どういった不具合が出るかはわからないので。

    コメント修正しても、わいひらさんのご返信内容には変わりはないと思いますが補足・誤解招いたと感じましたので修正としてお伝えします。

  6. わいひら 名前:わいひら 投稿日:2015/06/18(木) 15:32:38 ID:1fa4ed4ed

    管理画面→メディア設定からサムネイル等のサイズを全て0にしております。

    このような設定をしたことがないので、どのようになるのかがわからないです。
    あまり行われない(と思われる)設定に関する対応は、それぞれで行っていただく必要があります。
    記事を書くとなると、普段しない設定を行って、1から全て調べて、カスタマイズして、動作を確認するとなると、あまりにも時間がかかり、自分の時間がなくなってしまうもので。

  7. 名前:ねこじた 投稿日:2015/08/27(木) 12:19:12 ID:cf4784987

    色々ググってやっとこの記事に辿りつけました!
    欲しかった情報がバッチリ書いてあって本当に助かりました。

  8. わいひら 名前:わいひら 投稿日:2015/08/27(木) 18:23:53 ID:89a0a1bfb

    記事がお役に立てたようで嬉しいです。