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

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

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

当サイトでもこれまで使用してきた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に以下の記述を記入します。

//100×100pxのサムネイルを作成
add_image_size('thumb100',100,100,true);

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

Font Awesomeの呼び出し

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

既に、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ファイルを開いて、以下のコードをコピペします。

<?php //フェイスブックページのURLを設定↓
$facebook_page_url = 'https://www.facebook.com/nelog.jp'; ?>
<div class="article-like">
  <div class="article-like-thumb">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
      <?php the_post_thumbnail( 'thumb100', array('class' => 'article-like-entry-thumnail', 'alt' => get_the_title()) ); ?>
    <?php else: // サムネイルを持っていない ?>
      <img src="<?php echo get_template_directory_uri();//get_stylesheet_directory_uri();子テーマに画像を置いた場合 ?>/images/no-image.png" alt="NO IMAGE" class="article-like-entry-thumnail no-image" />
    <?php endif; ?>
  </div>
  <div class="article-like-arrow-box">
    <div class="article-like-arrow-box-in">
      <div class="article-like-button">
        <div class="fb-like fb-like-pc" data-href="<?php echo $facebook_page_url; ?>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <div class="fb-like fb-like-mobile" data-href="<?php echo $facebook_page_url; ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3&appId=569002053185714";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
      </div>
      <div class="article-like-body">
        この記事をお届けした<br>
        <?php bloginfo('name'); ?>の最新ニュース情報を、<br>
        <span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">いいね</span>してチェックしよう!
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>

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

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

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

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

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

<?php //いいねボタンエリアの呼び出し
get_template_part('facebook-page-like') ?>

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

style.cssにスタイルを書く

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

/************************************
** Facebookページを「いいね!」するエリアのスタイル
************************************/
div.fb-like-mobile{
  display: none;
}
.article-like{
  height: 100px;
}
.article-like-thumb{
  float: left;
  width: 100px;
}
.article-like-thumb img{
  display: block;
}
.article-like-body{
  margin-right: 140px;
  float: none;
  padding: 10px;
  font-size: 18px;
  line-height: 1.3em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.article-like-body::after{
  content: '\f054';
  position: absolute;
  right: 110px;
  top: 27px;
  color: #ccc;
  font-size: 50px;
  font-family: FontAwesome;
  line-height: 100%;
}
.article-like-button {
  background-color: #f3f3f3;
  width: 100px;
  height: 100px;
  text-align: center;
  float: right;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.article-like-arrow-box {
  float: left;
  position: relative;
  border: 1px solid #bbb;
  margin-left: 12px;
  width: calc(100% - 120px);
  border-radius: 5px;
}
.article-like-arrow-box-in{
  height: 100px;
  overflow: hidden;
}
.article-like-arrow-box:after, .article-like-arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.article-like-arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}
.article-like-arrow-box:before {
  border-color: rgba(221, 221, 221, 0);
  border-right-color: #bbb;
  border-width: 11px;
  margin-top: -11px;
}
.clear{
  clear: both;
}

@media screen and (max-width:639px){
  br{display: none;}
  .article-like-body{
    margin-right: 100px;
    font-size: 1em;
    line-height: 1.2em;
  }
  .article-like-body::after{
    display: none;
  }
}

@media screen and (max-width:440px){
  .article-like-body{
    font-size: 0.8em;
    padding: 5px;
    line-height: 1.1em;
    margin-right: 0;
  }
  .article-like-arrow-box{
    height: 100px;
  }
  .article-like-button{
    float: none;
    width: 100%;
    height: 30px;
    display: block;
  }
  div.fb-like-mobile{
    display: block;
  }
  div.fb-like-pc{
    display: none;
  }
}

ブレークポイント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いいね!機能」を実装しました。Simplicityを利用している場合は、ウィジェットから設定できるので、上記カスタマイズは不要です。

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

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

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

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

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

  2. Avatar photo 名前:わいひら 投稿日: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. Avatar photo 名前:わいひら 投稿日:2015/06/18(木) 12:44:18 ID:1fa4ed4ed

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

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

    承知しました。

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

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

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

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

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

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

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

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

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

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

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

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

  9. 名前:なぎそら 投稿日:2017/05/22(月) 01:45:31 ID:5ee8f5868

    こんにちは。
    いつも役に立つ記事をありがとうございます。

    この記事を方法を試させてもらった所、同じようにならなかったので質問させて下さい。

    私のサイトだとfacebookのいいねボタンが上下の真ん中に表示されません。
    具体的にはこのようになっております。

    該当ページ:http://4mirai.com/how-to-enable-external-analytics-with-google-analytics

    http://4mirai.com/wp-content/uploads/2017/05/facebook-like-button-sample.png

    使用しているSimplicityのバージョンは、「2.5.5」です。

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

    は行っております。

    また、

    の実装には、こちらを参考にテキストウィジェットでの実装で行っています。

    お時間のある時で大丈夫ですので、教えて頂けると嬉しいです。

  10. Avatar photo 名前:わいひら 投稿日:2017/05/22(月) 12:39:24 ID:6bea8e1c3

    Simplicity2.5.5を利用しているのであれば、Wordpress管理画面のウィジェット設定にデフォルトで『[S] Facebookページ「いいね!」』ウィジェットがあると思うのですが、その機能を利用するのではダメなのでしょうか?
    当ページで紹介しているものと全く同じ機能のものです(不具合修正や機能修正してあるのでデフォルト機能の方がおすすめです)。

  11. 名前:なぎそら 投稿日:2017/05/22(月) 14:13:19 ID:5ee8f5868

    なんと、ウィジェットとして実装されていたのですね!?

    Simplicityを2年くらい使わせて頂いており、更新情報もちゃんとチェクしていたのに気付きませんでした・・・。
    (実のところ、更新情報をチェックするようになったのは、Simplicity2からで1の頃はしていなかったので見落としていました。)

    そして教えて頂いた、『[S] Facebookページ「いいね!」』ウィジェットを使ったら表示が崩れることなく実装できました。

    ありがとうございます。
    これからも更新頑張ってください!応援してます!

  12. Avatar photo 名前:わいひら 投稿日:2017/05/22(月) 20:23:41 ID:6bea8e1c3

    本文中にも、一応、案内は書いてあったのですが、目立たないものだったのでわかりづらかったですよね;

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

    目立って、分かりやすくなるように記事の方も修正しておきました。