ブログ記事下にTwitterフォローボタンを埋め込んでみた【ストークカスタマイズ紹介】

このブログは「ストーク（STORK）」という有料テーマを使用しています。
ストークの特徴の1つに、記事上と記事下にSNSへのシェアボタンを表示できることが挙げられます。

記事下だと↓こんなのですね。（パソコンから見た場合）

で、今回ここに手を加えまして、この記事下のSNSシェアボタンの真下にTwitterのフォローボタンを置いてみました！
こんな見た目に仕上がっております。

プラグインは使わずに、コードの埋め込みのみで対応しました。
どうやったのか紹介していきましょう！

この記事の目次

今回も先人の知恵を…
2箇所にコードを追記！
- parts_sns.php
- style.css
Facebookも対応可能です（詳しくは先人の記事を）

今回も先人の知恵を…

…と言っても、今回ももちろん偉大な先人の知恵を存分にお借りしております。
今回参考にさせていただいたのは以下の記事。

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

FacebookページのいいねやTwitterをフォローしてもらうためのオリジナルSNSボタンの設置方法を紹介します。バイラルメディア風で、Facebookページの方は記事...

mama-hack.com

このブログの運営者・まなしばさんは私と同じ大学の出身みたいです(^^

2箇所にコードを追記！

で、上のまなしばさんの記事の内容を踏まえて、私がこのブログにどんな変更を加えたのかというと。
2箇所に以下のコードを書き加えました。

parts_sns.php

まず1箇所目は、記事下のSNSボタンの表示を司っているparts_sns.php。（ストークの場合）
最下部にスペースを作って以下のコードを入力します。

<!-- 最初はスマホ -->
<?php if (is_mobile()) :?>
<div class="p-shareButton p-asideList p-shareButton-bottom">
<div class="p-asideFollowUs__twitter">
<div class="p-asideFollowUs__twitter__cont">
<p class="p-asideFollowUs__twitter__item">Twitterで</p><br>
<a href="ツイッターアカウントページのURL" class="twitter-follow-button p-asideFollowUs__twitter__item" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @ツイッターのユーザー名</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>
</div>
<?php else: ?>
<!-- ここからPC -->
<div style="padding:0px 0px;"></div>
<div class="p-entry__tw-follow">
<div class="p-entry__tw-follow__cont">
<p class="p-entry__tw-follow__item">Twitterで</p>
<a href="ツイッターアカウントページのURL" class="twitter-follow-button p-entry__tw-follow__item" data-show-count="true" data-size="large" data-show-screen-name="false">Follow @ツイッターのユーザー名</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; ?>

スマホ用とPC用、2種類のコードがあります。
7行目と18行目で「ツイッターアカウントページのURL」と「ツイッターのユーザー名」となっている部分はご自身のものに書き換えてください。
ほか、必要な文言などがあれば書き加えて頂ければ。

style.css

その上で、CSSにも以下のコードを追加します。

/*Twitterフォロースマホ*/
.p-asideFollowUs__twitter {
background: #f2f2f2;
margin-top: 0px;
padding: 10px 0;
border-radius: 4px;
}
.p-asideFollowUs__twitter__cont {
text-align: center;
font-size: 16px;
color: #252525;
line-height: 1.9;
}
.p-asideFollowUs__twitter__item {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
/*TwitterフォローPC*/
.p-entry__tw-follow {
margin-bottom: 10px;
background: #f2f2f2;
width: 100%;
padding: 10px 0;
border-radius: 4px;
}
.p-entry__tw-follow__cont {
text-align: center;
font-size: 17px;
color: #252525;
}
.p-entry__tw-follow__item {
display: inline-block;
vertical-align: 30%;
margin: 8px 0 0 0;
}

これで、記事下へのTwitterフォローボタンの埋め込みが完了します！
スマホから見ても↓こんな風にちゃんと表示されてますよ(^^)