ボクのブログで愛用中のWordPressテーマ「ハミングバード」は、お世辞抜きに最高のテンプレートだ。
しかし最近かん吉さんの『ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座』を読んでいて気づいたことがある。
ソーシャルボタンには2種類あります。1つはシェアボタンです。ブログ記事にあるシェアボタンをクリックすると、読者は自分のフォロワーに記事を紹介することができます。もう一つはフォローボタンです。フォローしてもらえると、ブログ更新やコメントを、読者のソーシャルメディアのタイムラインに送り込めます。
そういえば、ハミングバードにはオシャレなシェアボタンはついているけれど、フォローボタンはついていない。
正確には記事下のプロフィール欄に目立たないように配置されている。
コンテンツを邪魔しないデザインに製作者のこだわりを感じるし、デフォルトのままでも問題はない。
でも「わかったブログ」（WordPressテーマ：Simplicity）のようにシェアボタンとフォローボタンを上下に配置するデザインに興味を惹かれたので、思い切って設置してみることにした。
以前サイドバーのプロフィール下にフォローボタンを設置したことはあったのだが、それだとスマホで読んだときに配置が下すぎて気づかれない可能性がある。
なので今回はフォローボタンを記事下（シェアボタンの直下）に配置する手順をメモしておく。
わかったブログの形式にならって、吹き出しでフォロワー数が表示されるTwitterのフォローボタンも追加してみた。
ハミングバードと同じOPEN CAGE製の「スワロー」「ストーク」「アルバトロス」でもだいたい同じような方法で設置できるはずだ。
なお、今回の作業は下記のサイトを参考にさせていただいた。
▽参考リンク
STORKカスタマイズ！「第5弾：おしゃれ・機能的なSNSフォローボタン 8選」
ブログ記事下にTwitterフォローボタンを埋め込んでみた【ストークカスタマイズ紹介】 | コトカラテル – 京都で活動する税理士が京都から伝えるブログ
Twitterのフォローボタンにフォロワー数を表示する方法 – 岡山のWordPressを使ったホームページ制作ならOffise Kondo
「parts_sns.php」を子テーマにコピーする
サイドバーにフォローボタンを設置する場合はウィジェットにHTMLを書けばいいが、ハミングバードでシェアボタンの直下に設置する場合は「parts_sns.php」というファイルに直接書き込む。
親テーマに直接書き込むとテーマの更新の際に追記した部分が消えてしまうので、必ず子テーマにコピーを用意しよう。
[aside type=”warning”] すでにWordPressにハミングバードの子テーマをインストールしている前提で話を進めます[/aside]
コピーのやり方は、FFFTPソフトを使うか、各レンタルサーバーのファイルマネージャーからも操作することができる。
エックスサーバーの場合、インフォパネルからファイルマネージャーにログインして、
public_html → wp-content → themes → hummingbird → parts_sns.php
を押下するとファイルがダウンロードされる。
ダウンロードが完了したら1階層上に戻り、hummingbird_customを押下。
ページ右側のファイルのアップロードから今ダウンロードしたファイルをアップロードする。
好きなボタンのCSS用コードをスタイルシートに追記する
子テーマが準備できたら、さっそくフォローボタンのソースコードをWordPressのファイルに追記していく。
まずはCSS。
↓のようにオシャレなボタンのサンプルを紹介してくれている記事があるので、好きなデザインのボタンを選んで「CSS用コード」をコピーしよう。
▽参考リンク
STORKカスタマイズ！「第5弾：おしゃれ・機能的なSNSフォローボタン 8選」
ちなみにボクはベタ塗りの丸ボタンを選ばせてもらった。
コピーしたCSS用コードを貼りつけるのは、WordPress管理画面の
外観→テーマの編集→スタイルシート（style.css）
こちらも親テーマではなく子テーマ（hummingbird_custom）に追記するのをお忘れなく。
HTML用コードを「parts_sns.php」へ追記する
CSS用コードを追記したら、あとは好きな場所に「HTML用コード」を追記すればフォローボタンが表示される。
当ブログのようにシェアボタンの直下に表示させる場合は、先ほど子テーマに作成した「parts_sns.php」ファイルに追記すればいい。
フォローしていただけると、ブログ更新を見逃しません＾＾
のような誘導文も表示されるなら
<p>フォローしていただけると、ブログ更新を見逃しません＾＾</p>
のようにｐタグを使う。
正規の方法ではないが、行間を調整したい場合は、
<p> </p>
と書くと空白行を挿入することもできる。
Twitterフォローボタンにフォロワー数を表示させる
わかったブログではフォローボタンの下にさらにTwitterの公式フォローボタンも設置されているので、ボクも設置してみることにした。
以前はTwitterの設定画面でフォローボタンや埋め込みタイムラインのウィジェットを作成できたように思うのだけれど、いつのまにかtwitter.comでは管理ができなくなってしまったようで、publish.twitter.comという別サイトへ誘導される。
それでフォローボタンの作成自体は簡単にできるのだが、フォロワー数が表示されなくなっていた。
フォロワー数を表示させるオプションも見当たらない。
しかしこれに関しては簡単に解決した。
生成されたソースコード内の「data-show-count=”false”」の”false”を“true”へ変えることでフォロワー数のカウントが表示されるようになる。
今回やった作業は以上。
まとめ
ボク自身あまりゴテゴテしたデザインは好きではないし、ハミングバードのシンプルな美しさに魅力を感じている。
その上で、今回のフォローボタンはなかなか悪くないんじゃないだろうか。
プラットフォームごとに、利用しているユーザー層は違う。
だからブログを中心に、Twitter、Facebook、Instagram、YouTubeなど、自分が運営するソーシャルメディアをつなぐネットワークを強化するためにフォローボタンは強力な武器になる。
