フィード購読ボタンを設置する際の注意点

悦び仕掛け人鈴木です。

最近なぜかフェイスブックの記事が多くなっていますが・・・それは置いておいて、今日は先日書いた

『サイドバーにブログ共有ボタンを設置する方法』

について質問がありましたので追記というか注意点を書かせていただきます。

さて質問して頂いたのはこの方。

医業コンサルタントとして熱い想いを持っていられる素晴らしい方です。

今回質問いただいたのは、ボタンがずれてしまうんですがどうすればよいのですか？

というものでした。

すいません<(_ _)>

私の言葉足らずでした。

ボタンがずれるとはどういう状況かというとこういう状況。

本来であれば下記のようにならなければいけないはずがずれてしまっています。

これはフィード購読ボタンのサイズが原因なんですね。

通常、フィード購読ボタンをサイズを変更せずに設置した場合、タグは

<iframe src="//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&layout=standard&show_faces=true&colorscheme=light&font&width=450&appId=162836930463524" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>

のようになります。

ここで見て頂きたいのが赤字の部分
width:450px 

これはボタンの幅を表しています。

４５０ｐｘというと大分大きいですね。

メインカラムのほとんどを占めるぐらいの大きさです。

こちらをご自身のボタンに合わせて変更して下さい。

また、このタグでは高さを指定しておらずそのまま貼りつけると１５０ｐｘになっています。

そのため上の写真のように大きく間が空いてしまっているんですね。

そのため、幅と併せて高さを設定してあげる必要が出てきます。

box_count なら
width:100px;height:60px; 

button_count なら
width:130px;height:20px;  

standard なら
width:400px;height:60px;

となります。

ちなみに standard の場合、Show facesにチェックを入れていない場合、縦のサイズは２0ｐxになります。

ただ上記のサイズはボタンそのもののサイズになっています。

しかし、少し大きめに指定した方が、スペースをわざわざ空けなくても良いので幅は＋１０ｐｘ、高さは＋２ｐｘ大きめにするのがオススメですよ！

頑張って設置してみて下さいね＾＾