【コピペでOK】「この記事がよかったら良いねしよう」を設置しました！レスポンシブ対応！

どうも、ふー(@fulogabc)です。

先日、Facebookページを作りました。

それに伴い、Facebookページのフォローが出来る「この記事がよかったらいいねをしよう」を設置しました。この名前で合ってますかね（笑）。

「この記事が良かったらいいねしようってなに？」って思った方。

こんな感じのやつです。

今回参考にした記事はこちらです。こちらはWordPress向けの記事なので、WordPress以外のブログには適していません。

mama-hack.com

こちらは、はてなブログ用です。これも参考にさせていただきました。コピペで出来ますが、PCとモバイルでCSSが違うのではてなProが必要です。

www.weblog-life.net

目次非表示

Java
HTML
CSS
まとめ

Java

<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/en_US/sdk.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

FacebookのいいねボタンにはJavaのコードが必要です。

これを「はてなブログダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に上のコードを追加します。

HTML

<!-- 記事がよかったらいいね --><div class="p-entry__push" style="background-image: url('【画像がない時の画像URL】')"><div class="p-entry__pushLike" ><p>この記事が気に入ったら<br>いいね！しよう</p><div class="p-entry__pushButton"><div class="fb-like" data-href="【FacebookページURL】" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></div><p class="p-entry__note">「ブログ名」が最新情報をお届けします</p></div></div><!-- 記事がよかったらいいね　ここまで -->

設置するHTMLコードです。

7行目に「FacebookページのURL」、９行目の「ブログ名」を入れるだけです。コメントはお好みで変えてもいいかもしれません。

２行目の画像URLは、後ほど上書きするのでここでは適当な画像を入れておきます。

後もう一つ追加します。このコードで画像を記事のアイキャッチにしています。これは、「記事」→「記事下」に追加します。

CSS

.p-entry__push {margin-bottom: 20px;display: table;table-layout: fix;width: 100%;background-color: #2b2b2b;color: #666;background-position: center;background-repeat: no-repeat;background-size: cover;}.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;background: hsla(0,0%,100%,.8);}.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: #666;}.p-entry__tw-follow {margin-bottom: 10px;background: #f4f4f4;width: 100%;padding: 15px 0;}.p-entry__tw-follow__cont {text-align: center;font-size: 15px;color: #252525;}.p-entry__tw-follow__item {display: inline-block;vertical-align: middle;margin: 0 15px;}