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

3 min

記事内に広告を含む場合があります。このサイトの記事内では「アフィリエイト広告」などの広告を掲載している場合があります。消費者庁が問題としている「誇大な宣伝や表現」とならないよう配慮しコンテンツを制作しておりますのでご安心ください。問題のある表現がありましたら、お問い合わせいただけますと幸いです。

f:id:FULOG:20160826193619p:plain

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

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

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

 

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

こんな感じのやつです。

f:id:FULOG:20160827095909p:plain

 

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

mama-hack.com

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

www.weblog-life.net

 

 

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」、9行目の「ブログ名」を入れるだけです。コメントはお好みで変えてもいいかもしれません。

2行目の画像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;
}

 一応レスポンシブ対応していると思います。

 

 

 

まとめ

最近はまた、デザインのカスタマイズにハマってきました。

ふー

ふー

Microsoft Power Platformを使ったり、ガジェットを買ったり、アニメ見たり、バイクに乗ったり、色々しています。

FOLLOW

カテゴリー:
関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA