ストークをカスタマイズ！SNSフォローボタンの追加方法

WordPressテーマのストークって、初期状態で「SNSシェアボタン」はついてますけど、「SNSフォローボタン」がないんですよね。

サイドバーに「Twitter」「Facebook」「Feedly」のフォローボタンを表示させたかったので、とりあえず各SNSで用意されているシェアボタンを使ってみたんですが、縦並びになってしまうし、統一感がないので却下しました。

▼こんなやつ。

Follow @jooo_shua

なので、下の横並びのボタンを採用しました。いい感じじゃないですか？

レスポンシブに対応しているので、コンテンツ内だと横に広がってます。

というわけで今回の記事では、ストークをカスタマイズして、SNSフォローボタンの追加方法をシンプルに解説します。

1 各SNSで用意されているフォローボタン作成手順
2 ストークをカスタマイズして、フォローボタン追加
- 2.1 HTMLをカスタマイズ
3 CSSをカスタマイズ
4 おわりに

各SNSで用意されているフォローボタン作成手順

僕の中では廃案になりましたが、必要な人もいると思うので手順を簡単に解説しておきます。

Feedlyのフォローボタン

Feedlyシェアボタン生成ページへ行く
ボタンのデザインを選択する
自分のWebサイトのURL＋「/feed/」を入力する（こんな感じ → http://reco-lab.com/feed/）
生成されたHTMLをコピーする
自分のWebサイトにペーストする

▼できたものがこれ。

Twitterのフォローボタン

Twitterのシェアボタン生成ページへ行く
自分のTwitter URLを入力する（こんなやつ → https://twitter.com/jooo_shua）
「Twitter Buttons」を選択する
生成されたHTMLをコピーする
自分のWebサイトにペーストする

▼できたものがこれ。

Follow @jooo_shua

Facebookのフォローボタン

「個人ページ」のシェアボタンは作れますが、「ビジネスページ」には用意されていないみたいです。

当ブログのFacebookアカウントは、「ビジネスページ」しかないので作れませんでした。「個人ページ」のシェアボタン作成手順は以下になります。

自分の個人ページへいく
画面右上ヘッダー内にある「▼」をクリック
ドロップダウンの中の「設定」をクリック
画面左の「公開投稿」をクリック
画面下部「フォロープラグイン」のHTMLコードをコピー
自分のWebサイトにペーストする

「フォローを許可する人」の設定を「公開」にしておかないとHTMLコードは非表示になるのでご注意。

ストークをカスタマイズして、フォローボタン追加

それではカスタムボタン作成の仕方を解説します。

HTMLをカスタマイズ

下記HTMLコードをウィジェットのテキストに貼り付けます。

<div style="text-align: center; width: 100%;"><!--facebook--><a class="sns-btn fb" href="https://www.facebook.com/recolabcom/" target="_blank" rel="noopener nofollow"><i class="fa fa-facebook"></i><span class="label">Facebook</span></a><!--twitter--><a class="sns-btn tw" href="https://twitter.com/intent/follow?screen_name=@jooo_shua" target="_blank" rel="noopener nofollow"><i class="fa fa-twitter"></i><span class="label">Twitter</span></a><!--feedly--><a class="sns-btn fdly" href="https://feedly.com/i/subscription/feed/http://reco-lab.com/feed" target="_blank" rel="noopener nofollow"><i class="fa fa-rss"></i><span class="label">Feedly</span></a></div>

ウィジェットのテキスト内に改行があると、それが反映されてボタンが縦並びになってしまうので改行ははずしています。

▼改行を入れて見やすくするとこんな感じです。

<div style="text-align: center; width: 100%;">

<!--facebook--><a class="sns-btn fb" href="https://www.facebook.com/自分のFacebookページのURL/" target="_blank" rel="noopener nofollow"><i class="fa fa-facebook"></i><span class="label">Facebook</span></a>

<!--twitter--><a class="sns-btn tw" href="https://twitter.com/intent/follow?screen_name=@自分のTwitter URL" target="_blank" rel="noopener nofollow"><i class="fa fa-twitter"></i><span class="label">Twitter</span></a>

<!--feedly--><a class="sns-btn fdly" href="https://feedly.com/i/subscription/feed/自分のサイトのURL/feed" target="_blank" rel="noopener nofollow"><i class="fa fa-rss"></i><span class="label">Feedly</span></a>

</div>

オレンジ字のところを自分のURLに書き換えてればOKです。

CSSをカスタマイズ

続いてCSSのカスタマイズです。WordPressのダッシュボードから「外観 → カスタマイズ →追加CSS」。

「追加CSS」に下記CSSコードを貼り付けます。

.sns-btn {
display: inline-block;
position: relative;
text-decoration: none;
margin: 0 2px;
width: 31%;
height: 70px;
border-radius: 0px;
transition: .4s;
}
.sns-btn .fa {
position: absolute;
font-size: 25px !important;
top: 40%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
.sns-btn .label {
position: absolute;
font-size: 12px !important;
top: 70%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
/*facebook*/
.sns-btn.fb {
color: #1f6aba !important;
border: solid 2px #1f6aba !important;
background: #fff !important;
}
.sns-btn.fb:hover {
color: #fff !important;
border: solid 2px #1f6aba !important;
background: #1f6aba !important;
}
/*Twitter*/
.sns-btn.tw {
color: #00acee !important;
border: solid 2px #00acee !important;
background: #fff !important;
}
.sns-btn.tw:hover {
color: #fff !important;
border: solid 2px #00acee !important;
background: #00acee !important;
}
/*Feedly*/
.sns-btn.fdly {
color: #2bb24c !important;
border: solid 2px #2bb24c !important;
background: #fff !important;
}
.sns-btn.fdly:hover {
color: #fff !important;
border: solid 2px #2bb24c !important;
background: #2bb24c !important;
}

以上でこのSNSボタンたちが表示されます。