WordPressの記事下にSNSフォロー誘導ボックスを設置する方法

sns-follow-button-thumbnail

WordPressの記事下に、サムネイル付きのSNSフォロー誘導ボックスを設置する方法を紹介します。

FacebookページとTwitterのSNSフォローボックス

今回はこちらの記事を参考にさせていただきました。

参考FacebookページいいねやTwitterフォロワーが倍増!バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】 | ままはっく

また、こちらのサイトの運営者でもあるまなしば(@manami1030)さんが、WordPressプラグイン化して配布してくださっています。

自力でカスタマイズするのが面倒という方は、「Like me if you like this article」を使ってみてください。

WPプラグインLike me if you like this article — WordPress プラグイン

ここからは自力で表示させるカスタマイズになります。プラグインは増やしたくないという方は続けてお読みください。

参考記事と違うところは、

  • 背景色をそれぞれのSNS色に変更
  • Facebookのいいね!ボタンをバルーンに変更

の2点です。

その他、不要と思ったセレクタやプロパティーを削除しています。

コード設置

Facebookのボタンを設置する前に、フッターのbodyタグ前に下記を追加します。

<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.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

次にsingle.phpを開き、関連記事のすぐ上に以下の記述を追加します。ハイライトしている行のアカウント名やURLは置き換えてください。

<!-- 記事がよかったらいいね ここから -->
<?php if (is_mobile()) :?>
<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>この記事が気に入ったら<br />いいね!しよう</p>
<div class="p-shareButton__fb-cont p-shareButton__fb">
<div class="fb-like" data-href="(FBページURL)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
</div>
</div>
</div>
<div class="p-asideFollowUs__twitter">
<div class="p-asideFollowUs__twitter__cont">
<p class="p-asideFollowUs__twitter__item">Twitterで(アカウント名)をフォローしよう!</p><br />
<a href="(TwitterアカウントURL)" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@(アカウントID)さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
<?php else: ?>
<div style="padding:10px 0px;"></div>
<!-- 記事がよかったらいいねPC -->
<div class="p-entry__push">
<div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
<div class="p-entry__pushLike">
<p>この記事が気に入ったら<br>いいね!しよう</p>
<div class="p-entry__pushButton">
<div class="fb-like" data-href="(FBページURL)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<p class="p-entry__note">最新情報をお届けします</p>
</div>
</div>
<div class="p-entry__tw-follow">
<div class="p-entry__tw-follow__cont">
<p class="p-entry__tw-follow__item">Twitterで(アカウント名)をフォローしよう!</p><br />
<a href="(TwitterアカウントURL)" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@(アカウントID)さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->

最後に、CSSに下記を追加します。

.p-shareButton__cont {
}
.p-shareButton__a-cont {
background-color: #3B5998;
display: table;
width: 100%;
table-layout: fix;
}
.p-shareButton__a-cont__img {
display: table-cell;
min-width: 130px;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.p-shareButton__a-cont__btn {
display: table-cell;
padding: 12px;
text-align: center;
}
.p-shareButton__a-cont__btn p {
font-size: 16px;
color: #fff;
font-weight: 700;
padding: 5px 0;
line-height: 1.4;
margin: auto;
}
.p-asideFollowUs__twitter {
background-color: #55acee;
margin-top: 15px;
padding: 12px 0;
}
.p-asideFollowUs__twitter__cont {
text-align: center;
}
.p-asideFollowUs__twitter__item {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
font-size: 16px;
color: #fff;
}
/*media Queries PC
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.p-entry__push {
margin: 20px 0;
display: table;
table-layout: fix;
width: 100%;
background-color: #3B5998;
}
.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__pushLike p {
color: #fff;
}
.p-entry__pushButton {
margin: 15px 0;
display: inline-block;
width: 200px;
height: 40px;
line-height: 1.4;
-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: 16px;
color: #fff;
}
.p-entry__tw-follow {
margin-bottom: 10px;
padding: 15px 0;
background-color: #55acee;
width: 100%;
}
.p-entry__tw-follow__cont {
text-align: center;
}
.p-entry__tw-follow__item {
display: inline-block;
vertical-align: middle;
margin: 15px;
font-size: 16px;
color: #fff;
}
}

追記:2017年5月23日

Facebookのボックスが大きく目立つのはいいのですが、スマホ表示時に縦幅をだいぶ取ってしまうのが気になりました。

そこで現在は、寝ログのわいひら(@MrYhira)さんが紹介されているものに変更しています。

SNSフォロー誘導ボックス

SNSフォロー誘導ボックス

参考バイラルサイトっぽいFacebookフォローエリアを作成する方法

WordPressカスタマイズ関連書籍

sns-follow-button-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)