photo credit: Nicole Yeary via photopin cc
『ブログ記事下に置くSNSフォローボタンの効果は絶大』
勉強の為に回っているブログでは、皆さんこう書かれています。（ニュアンスが違ったりはしますが）
そこで僕もこれを様々なブログを参考にしながら実践してみたんですが、どうにもスマホで表示した際に横揺れしてしまう事が多かったんです。
スマホでの横揺れはとても見ずらいので、本当に気をつけるべきポイントです。
今回は、スマホで横揺れさせずに記事下にSNSを配置する方法をお話しようと思います。
もくじ
・FacebookのLike Boxを作成する
・Facebookでファンページを作成する
・Twitterのフォローボタンを作成する
・Twitterのフォロー人数を横に表示させる方法
・Google+バッジを作成する
・Google+ページを作成する
・Feedlyのフォローボタンを作成する
・各SNSのフォローボタンを横揺れさせずに配置する
・まとめ
この記事でできるのは、記事下にもありますが、⇓こんなヤツです。
スポンサーリンク
FacebookのLike Boxを作成する
Facebookのソーシャルプラグインページから作成します。
少し画面を下にスクロールすると、「いいね！」ボックスという項目がありますので、クリックします。
Facebook page URLの部分に、ご自身のFacebookのURLまたは、ファンページのURLを入力します。
※匿名でブログを運営している方はファンページでの登録になります。ファンページの作成方法については後述します。
WidthとHeightは指定しません、これを指定すると横揺れの原因になりますので、必ず空欄にしてください。
チェックボックスは、Show HeaderとShow Borderのみチェック。
上画面と同じにして頂ければオッケーです。
Get Codeをクリックすると、下の画面が表示されます。
IFRAMEをクリックし、下に表示されたコードをコピーします。
今回は色々なコードを並行して使いますので、コピーしたコードをテキストドキュメントなどにメモしておきましょう。
facebookでファンページを作成する
匿名・ニックネームでブログを運営していて、Facebookもブログ同様に匿名やニックネームで作成したい場合にはこのファンページを使用します。
Facebookは実名利用を推奨しているので、ニックネームで登録するとアカウント凍結される可能性もあります。
ファンページであれば、本名などが表示されてしまう心配はありませんので、オススメです。
Facebookページの右上にあるメニュータブから、ページを作成を選択します。
自身のウェブサイトの形態に合ったものを選択します。
なおろぐの場合は個人ブログに該当するので、慈善活動またはコミュニティでの登録でスタートをクリックします。
ページの情報を設定します。なるべく詳しく入力した方が良いですが、これは後から設定もできますから、とりあえずスキップでも大丈夫です。
これでFacebookのファンページ作成が完了です。
このファンページのURLをいいね！ボックス作成の際に入力することで、ファンページへのフォローボタンが作成可能です。
Twitterのフォローボタンを作成する
Twitterボタンページから作成します。
ボタンの項目があるので、フォローするのボタンを選択します。
ボタンメニューが表示されるので、言語設定を日本語に（英語のままでもいいですが）変更、他の部分は上画像と同じにして頂ければオッケーです。
完了したら、プレビュー下段のコードをコピーします。これもテキストドキュメントにメモしておきましょう。
フォロー人数を横に表示させる方法
上でコピーしたコードを編集する事で、ボタン横にフォロワー人数が表示できます。
↑こんな感じ。
コードを編集してみよう
先ほどテキストエディタに貼り付けたコードを確認してみると
<a href="https://twitter.com/naolog3664" class="twitter-follow-button" data-show-count="false" data-lang="ja">@naolog3664さんをフォロー</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>
こんな部分があると思います。最初の一行ですね。
この中の、data-show-count="false"という部分の"false"を"true"に変更します。
<a href="https://twitter.com/naolog3664" class="twitter-follow-button" data-show-count="true" data-lang="ja">@naolog3664さんをフォロー</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>
Google+バッジを作成する
Google+ Platformページから作成します。
設定をバッジに、レイアウトを横向きに選択します。他は上画像と同じでオッケーです。
プレビューを見るとアイコンが付いていたりと若干違うのですが、これで大丈夫です。
コードを全てコピーして、テキストドキュメントにメモしておきます。
Google+ページを作成する
Google+ページは、Facebookファンページと同じものと考えて頂ければ大丈夫です。
本名で取得したGoogleアカウントを表示することなく、匿名・ニックネームでGoogleページを持つ事が出来ます。
まずはご自身のGoogle+のトップページへ行きます。
トップページ左上にホームボタンがありますので、そこにカーソルを合わせるとメニューが表示されます。
メニューにあるページの項目をクリックします。
ページの作成ボタンが出てきますので、クリック。
形態を選択する画面が表示されるので、ご自身のウェブページに合ったものを選択しましょう。
なおろぐは個人ブログですので、ブランドを選択します。
ウェブページの情報を入力します。
カテゴリはコミュニティが適切かと思います。
これでGoogle+ページが完成です。
Google+ページでバッジを作成することが可能です。
Feedlyのフォローボタンを作成する
Feedly buttonページから作成します。
まずお好きなFeedlyボタンを選択します。
好きな物を選べばオッケーですが、今回は当ブログで利用している左上を選択。
次に、ウェブサイトのURLを入力します。
よく見るとわかりますが、feed URLを入力となっています。
ここには、ご自身のウェブページURL末尾に『feed/』を加えて入力してください。
例えば当ブログの場合は『http://naolog.blue/』がページURLですので、ここに入力するのは『http://naolog.blue/feed/』となります。
URLまで入力すると、このようにコードが表示されますので、これをコピーしてテキストエディタにメモしておきましょう。
各SNSのフォローボタンを横揺れさせずに配置する
上で作成したFacebook、Twitter、Google+、Feedlyの4つのコードを配置していく作業になります。
wordpress管理画面の左メニュー『外観>テーマの編集』ページ右側にあると思いますので、探してみてください。
メモしたコードをsns.phpファイルに配置しましょう
<div class="blogbox" style="margin-bottom:50px;">
<div style="text-decoration:underline;font-weight:bold;padding:10px;">【タイトル】</div>
<div style="padding:10px;">
【コメント】
</div>
【Facebookのコードをそのままコピペ】
<div style="padding:10px;">
【Twitterのコードをそのままコピペ】
<div style="padding:10px 0;">
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="【//plus.google.com/u/0/113305894611553408015】" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
【Feedlyのコードをそのままコピペ】
</div>
</div>
※編集の際は【】も消してください。上のコードはsns.phpの末尾に追記すればOKです。
タイトルを編集
2行目後方にある【タイトル】をお好みのタイトルに編集してください。
コメントを編集
4行目にある【コメント】をお好みのコメントに編集してください。
Faceboookコードを編集
6行目にある【Facebookのコードをそのままコピペ】を、メモしておいたFacebookのコードに置き換えてください。
Twitterコードを編集
8行目にある【Twitterのコードをそのままコピペ】を、メモしておいたTwitterのコードに置き換えてください。
Google+コードを編集
11行目にある【//plus.google.com/u/0/113305894611553408015】の部分のみご自身のものに置き換えます。
メモしておいたgoogle+のコードの中に、これと同じもの（後ろの数字だけ違う）があると思いますので、ご自身のものに置き換えてください。
Feedlyコードを編集
25行目にある【Feedlyのコードをそのままコピペ】を、メモしておいたFeedlyのコードに置き換えてください。
ここまで終えたら『ファイルを更新』をクリックして完了です。
ご自身のウェブサイトを確認してみましょう！
こんな感じに表示されていれば成功です。
スマホでも確認してみると良いでしょう。
まとめ
他のブロガーさんのカスタマイズ記事は本当に参考になります。
PHP言語を完全に理解していないので、今回のように他の方のブログを見ながら自分なりに手を加えていくしかありません。
同じような境遇の方の参考になれば幸いです。