2015年6月23日から「Facebookライクボックス」が使用できなくなります。
それに代わり、以下の「Facebookページプラグイン」を設置する必要があります。
ただ、この「Facebookページプラグイン」は、個人的にはちょっと使いづらく、あまり好みではありませんでした。
なので、代わりとなる「Facebookページにいいねをするためのボタンエリア」を作ってみました。
photo by FACEBOOK(LET)
目次
作成する「いいね！」ボタンエリア
6月で廃止される、Facebookライクボックスは、以下のようなものでした。
これ、結構見やすくて気に入っていました。
で、新しく採用されたFacebookページプラグインが以下です。
このページプラグイン、個人的にはあまり使い勝手が良く感じません。僕が、以前のライクボックスに慣れてしまいすぎたせいかもしれませんが、以下の点がちょっと不満です。（初期設定により多少は変わります。）
- ウィジェットの大きさがある程度決まっている（幅を501px以上にできない）
- 文字が背景の画像と重なると読みにくい
- 知り合いがいいねしてないと『「いいね！」した友だちはまだいません。』と出る
「シェア」ボタンがあるのは良い点ですが、どうもまだ慣れていないせいか、今ひとつピンときません。
ということで、今まで慣れ親しんだ「いいね！」ボタンを利用できる以下のようなバイラルサイトのような「いいねボタンエリア」を作成してみました。
これは、PC表示での外観はGunosyのものに似せてみました。
それに加えてモバイル端末で表示すると、一応レスポンシブ表示もされるようにしてみました。
というわけで今回は、この「Facebookのいいねボタンエリア」の作成方法を紹介します。
カスタマイズの主な手順
今回のカスタマイズの主な手順は以下です。
- 下準備
- いいねボタンエリアテンプレートの作成（ほぼコピペ）
- 既存テンプレートに「いいねボタンエリア」を挿入する（コピペ）
- 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」という名前で置きました。
構造としては以下のようになります。
【テーマ（子テーマ）フォルダ】/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>を非表示にして、文字も少し小さめ。
狭いモバイル端末で表示
小さなタイプの「いいね！」ボタンを表示し、文字をさらに小さめに設定。
まとめ
このように、カスタマイズすることで、以下のような利点はあるかと思います。
- 慣れ親しんでいる「いいね！」ボタンを使うことができる
- HTML＋CSSで装飾した自由なメッセージを設定できる
- 純正ウィジェットと違ったデザインにすることで多少は目を引くかも
上記のような良い点はあると個人的には思っているものの、実際に設置して効果があるかはわかりません。
ただ、「他の人とは違ったFacebookページエリアにしたい」とか「Facebookページフォローを促すメッセージは自分の言葉で書きたい」なんて人にはいいかもしれません。
このアイデア素晴らしくて良いですね！
もしかして次のテーマアップデートに追加されるんでしょうか？
管理画面→メディア設定からサムネイル等のサイズを全て0にしている場合ですが、
直接IMGタグで記述できるようなやり方ありましたら是非教えてほしいです。