STINGER5 Wordpress

[STINGER5]記事の下にSNSフォローボタンを表示させてみた。スマホで横揺れさせない設定!

投稿日:2015年2月2日 更新日:

 

medium_4830266371photo credit: Nicole Yeary via photopin cc

ブログ記事下に置くSNSフォローボタンの効果は絶大

勉強の為に回っているブログでは、皆さんこう書かれています。(ニュアンスが違ったりはしますが)

そこで僕もこれを様々なブログを参考にしながら実践してみたんですが、どうにもスマホで表示した際に横揺れしてしまう事が多かったんです。

スマホでの横揺れはとても見ずらいので、本当に気をつけるべきポイントです。
今回は、スマホで横揺れさせずに記事下にSNSを配置する方法をお話しようと思います。

icon-book もくじ
FacebookのLike Boxを作成する
Facebookでファンページを作成する
Twitterのフォローボタンを作成する
Twitterのフォロー人数を横に表示させる方法
Google+バッジを作成する
Google+ページを作成する
Feedlyのフォローボタンを作成する
各SNSのフォローボタンを横揺れさせずに配置する
まとめ

この記事でできるのは、記事下にもありますが、⇓こんなヤツです。
snskiji

スポンサーリンク

336px

スポンサーリンク

FacebookのLike Boxを作成する

icon-arrow-circle-right Facebookのソーシャルプラグインページから作成します。

facebook

少し画面を下にスクロールすると、「いいね!」ボックスという項目がありますので、クリックします。

facebook2

Facebook page URLの部分に、ご自身のFacebookのURLまたは、ファンページのURLを入力します。
匿名でブログを運営している方ファンページでの登録になります。ファンページの作成方法については後述します。

WidthとHeightは指定しません、これを指定すると横揺れの原因になりますので、必ず空欄にしてください。

チェックボックスは、Show HeaderとShow Borderのみチェック。
上画面と同じにして頂ければオッケーです。
Get Codeをクリックすると、下の画面が表示されます。

facebook3

IFRAMEをクリックし、下に表示されたコードをコピーします。
今回は色々なコードを並行して使いますので、コピーしたコードをテキストドキュメントなどにメモしておきましょう。

 icon-check-square-o facebookでファンページを作成する

匿名・ニックネームでブログを運営していて、Facebookもブログ同様に匿名やニックネームで作成したい場合にはこのファンページを使用します。
Facebookは実名利用を推奨しているので、ニックネームで登録するとアカウント凍結される可能性もあります。
ファンページであれば、本名などが表示されてしまう心配はありませんので、オススメです。

facebook8

Facebookページの右上にあるメニュータブから、ページを作成を選択します。

facebook4

自身のウェブサイトの形態に合ったものを選択します。

facebook5

なおろぐの場合は個人ブログに該当するので、慈善活動またはコミュニティでの登録でスタートをクリックします。

facebook6

ページの情報を設定します。なるべく詳しく入力した方が良いですが、これは後から設定もできますから、とりあえずスキップでも大丈夫です。

facebook7

これでFacebookのファンページ作成が完了です。
このファンページのURLをいいね!ボックス作成の際に入力することで、ファンページへのフォローボタンが作成可能です。

Twitterのフォローボタンを作成する

icon-arrow-circle-right Twitterボタンページから作成します。

twiit1

ボタンの項目があるので、フォローするのボタンを選択します。

twiit2

ボタンメニューが表示されるので、言語設定を日本語に(英語のままでもいいですが)変更、他の部分は上画像と同じにして頂ければオッケーです。
完了したら、プレビュー下段のコードをコピーします。これもテキストドキュメントにメモしておきましょう。

icon-check-square-o フォロー人数を横に表示させる方法

上でコピーしたコードを編集する事で、ボタン横にフォロワー人数が表示できます。
twiit3
↑こんな感じ。

コードを編集してみよう

先ほどテキストエディタに貼り付けたコードを確認してみると

こんな部分があると思います。最初の一行ですね。

この中の、data-show-count="false"という部分の"false"を"true"に変更します。

これだけです。テキストドキュメントにメモしておきましょう。

Google+バッジを作成する

icon-arrow-circle-right Google+ Platformページから作成します。

google+

設定をバッジに、レイアウトを横向きに選択します。他は上画像と同じでオッケーです。
プレビューを見るとアイコンが付いていたりと若干違うのですが、これで大丈夫です。

コードを全てコピーして、テキストドキュメントにメモしておきます。

icon-check-square-o Google+ページを作成する

Google+ページは、Facebookファンページと同じものと考えて頂ければ大丈夫です。
本名で取得したGoogleアカウントを表示することなく、匿名・ニックネームでGoogleページを持つ事が出来ます。

google+2

まずはご自身のGoogle+のトップページへ行きます。
トップページ左上にホームボタンがありますので、そこにカーソルを合わせるとメニューが表示されます。
メニューにあるページの項目をクリックします。

ページの作成ボタンが出てきますので、クリック。

google+3

形態を選択する画面が表示されるので、ご自身のウェブページに合ったものを選択しましょう。
なおろぐは個人ブログですので、ブランドを選択します。

google+4

ウェブページの情報を入力します。
カテゴリはコミュニティが適切かと思います。

これでGoogle+ページが完成です。
Google+ページでバッジを作成することが可能です。

Feedlyのフォローボタンを作成する

icon-arrow-circle-rightFeedly buttonページから作成します。

feedly1

まずお好きなFeedlyボタンを選択します。
好きな物を選べばオッケーですが、今回は当ブログで利用している左上を選択。

次に、ウェブサイトのURLを入力します。
よく見るとわかりますが、feed URLを入力となっています。

ここには、ご自身のウェブページURL末尾に『feed/』を加えて入力してください。
例えば当ブログの場合は『http://naolog.blue/』がページURLですので、ここに入力するのは『http://naolog.blue/feed/』となります。

feedly2

URLまで入力すると、このようにコードが表示されますので、これをコピーしてテキストエディタにメモしておきましょう。

各SNSのフォローボタンを横揺れさせずに配置する

上で作成したFacebook、Twitter、Google+、Feedlyの4つのコードを配置していく作業になります。
wordpress管理画面の左メニュー『外観>テーマの編集』ページ右側にあると思いますので、探してみてください。

メモしたコードをsns.phpファイルに配置しましょう

※編集の際は【】も消してください。上のコードは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のコードに置き換えてください。

ここまで終えたら『ファイルを更新』をクリックして完了です。
ご自身のウェブサイトを確認してみましょう!

snskiji

こんな感じに表示されていれば成功です。
スマホでも確認してみると良いでしょう。

まとめ

他のブロガーさんのカスタマイズ記事は本当に参考になります。

PHP言語を完全に理解していないので、今回のように他の方のブログを見ながら自分なりに手を加えていくしかありません。

同じような境遇の方の参考になれば幸いです。

336px

スポンサーリンク

336px

スポンサーリンク

-STINGER5, Wordpress

Copyright© なおろぐ , 2016 AllRights Reserved.