バイラルメディアの記事下によく設置されている「この記事が気に入ったらいいねしよう!」。

Facebookページを全く運用できていないけど、「このブログにも設置してみたいなぁ」と思っていました。

調べてみると、WordPressではプラグインで簡単に実装できるみたいです。

このブログにも先日Facebookページを作ったので、「この記事が気に入ったらいいねしよう!」を設置したいと思います。

誰でも簡単!個人のウェブサイト向けFacebookページの作り方

 



このページが気に入ったらいいねを実装できるプラグイン

 

「VA Social Buzz」というプラグインをはTwitterとFacebookのアカウントと紐づけると簡単に「このページが気に入ったらいいね!」を実装出来ます。

ただ現在このブログで使用しているWordPressプラグインは9個。

サイトの表示速度を考えるとなるべくプラグインを増やしたくないので、もう少し調べてみるとコードで実装する方法が書かれた記事がありました。

 

参考サイト:ママハック「FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

 

コードで実装する方法

まなしばさんの「ママハック」の記事に従ってコードを記述すればコピペするだけで、「このページが気に入ったらいいね」を実装出来ます。

ただ、Twitterのフォローボタンはいらないと思い、Twitterに関するコードははずしました。

 

<?php if (is_mobile()) :?>

 

スマホ・タブレット・PCの表示を切り替える条件分岐タグ。

現在使用しているテーマではmobileの関数を定義していないため、functions.phpで定義しないと表示されません。

functions.phpで定義すればいいだけなんですが、何となくタブレットもスマホに含んでPCと表示を切り替える、

 

<?php if (wp_is_mobile()) :?>

 

を使用することにして、以下のコードをsingle.phpのソーシャルボタンの下に追加しました。

 

<!-- 記事がよかったらいいね ここから -->
<?php if (wp_is_mobile()) :?>
<div class="p-shareButton p-asideList p-shareButton-bottom">
<div class="p-shareButton__cont">
<div class="p-shareButton__a-cont">
<div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
<div class="p-shareButton__a-cont__btn">
<p>この記事が気に入ったらいいね!しよう</p>
<div class="p-shareButton__fb-cont p-shareButton__fb">
<div class="fb-like" data-href="https://www.facebook.com/tatujinw/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<span class="p-shareButton__fb-unable"></span>
</div>
<p class="p-entry__note">最新情報をお届けします</p>
</div>
</div>
</div>

</div>
<?php else: ?>
<div style="padding:10px 0px;"></div>
<!-- 記事がよかったらいいねPC -->

 

次にスタイルシートで表示を整えます。

スタイルシートもTwitterに該当する部分は消しました。

そしてなぜか、colorを白っぽい色に変えてもPC表示だけ反映されず、文字が読めないので仕方なくPC表示だけ背景を白に変えました。

 

/*記事がよかったら、いいねPC*/
.p-entry__push {
margin-bottom: 20px;
display: table;
table-layout: fix;
width: 100%;
background-color: #fff;
color: #2b2b2b;
}
.p-entry__pushThumb {
display: table-cell;
min-width: 240px;
background-position: center;
background-size:cover;
}
.p-entry__pushLike {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
line-height: 1.4;
font-size: 20px;
}
.p-entry__pushButton {
margin-top: 15px;
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.p-entry__pushButtonLike {
line-height: 1;
}
.p-entry__note {
margin-top: 15px;
font-size: 12px;
color:#fff;
}

/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
padding-bottom: 15px;
overflow: hidden;
}
.p-shareButton__buttons {
font-weight: 700;
color: #fff;
font-size: 13px;
text-align: center;
}
.p-shareButton__buttons>li {
padding-left: 3px;
padding-right: 4px;
}
.p-shareButton__buttons .c-btn {
padding: 8px 0;
border-radius: 2px;
}
.p-shareButton__buttons .c-ico {
display: block;
margin: auto auto 5px;
}
.p-shareButton__fb {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
width: 115px;
}
.p-shareButton__fb-cont {
position: relative;
width: 108px;
margin: 0 auto;
}
.p-shareButton__fb-unable {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.p-shareButton__cont {
margin: 15px 0 0;
}
.p-shareButton__a-cont {
background: #2e2e2e;
display: table;
width: 100%;
}
.p-shareButton__a-cont__img {
display: table-cell;
min-width: 130px;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.p-shareButton__a-cont__btn {
display: table-cell;
padding: 12px;
text-align: center;
}
.p-shareButton__a-cont__btn p {
font-size: 12px;
color: #fff;
font-weight: 700;
padding: 5px 0 15px;
line-height: 1.4;
margin-bottom: 0px;
}

 

※サイトのFacebookのデフォルトの「いいね」ボタンがないとボタンが表示されません

表示の確認

 

これがPCでの表示。

背景を黒にしたかったのですが、原因がわかるまでこのままで我慢します。。。

 

 

こちらがスマホ表示。

見栄え的にとても満足です。

 

設置するメリット

  • 「いいね」してもらいやすくなる
  • 自己満足

 

記事下に設置することだけでなく記事のアイキャッチ画像が表示されるので、いい記事を書くことによって「いいね」をしてもらいやすくなると思います。

そして見栄えもいいので、自己満足に浸れると思います(笑)。

 

デメリット

  • 表示が重くなる

 

表示が遅くなります。ソーシャルボタンを外部から呼び込むことになるのでやたらと重いです。

デフォルトのソーシャルボタンだと表示が遅くなるので、このブログではソーシャルボタンをカスタマイズしています。

 

賢威7でソーシャルボタンの表示変更とシェア数を表示させる方法

 

けれど、このコードだとデフォルトのシェアボタンをサイトの設置しないと正常に表示されません。

「この記事が気にいったらいいね!」を設置したからページプラグインをはずして軽くしたかったのですが、はずすことができません。

知識があればカスタマイズできると思うですが、自分のようにコードを「コピペ&少しだけいじる」の初心者には難しいと思います。

 

まとめ

「このページが気に入ったらいいね!」(呼称がわからない)を設置すると訴求力が高まると思いますが、シェアボタンを変更しないと表示が重くなってしまいます。

表示速度を優先するか、悩むところかもしれません。

表示速度に関することとして、モバイル環境ではインスタント記事を設定するとFacebookアプリでAMPのように高速表示させることができます。

 

Facebookのインスタント記事(Instant Articles)の審査についに合格



ただ設定自体は難しくないものの、審査を突破するまで意外と苦戦するかもしれません(笑)。

今日のたつじんへの一歩

たつじんwたつじんw

訴求力が高まるとか書いていますが、この記事を書いた時点で「いいね数」は0です(笑)