基本的にソーシャルメディアのシェアボタンに関しては記事上、そして記事下のどちらか、もしくはどちらも設定することが多いですが、まれに画面をスクロールしてもシェアボタンが付いてくるようなサイトもあります。

ついてくるソーシャルボタンというのはこれのこと

設置したいページにコードを入れ、CSSにボタンの設置場所・サイズなどを設定する

【移動するソーシャルボタンを設置する方法は2段階】

1.表示したいページにソーシャルボタンのコードを入れる

2.CSSにソーシャルボタンのサイズ・設置場所を指定する

1.『single.php』にソーシャルボタンのコードを入れる

WordPressの場合はログイン後→外観→テーマ編集→single.phpがあるはずなのでそこにコードをいれればいいのだ。

これがそのコード。コードを入れる場所はどこでもかまわないんだけどもしコードを入れても表示しない場合はsingle.phpの上の方に入れると表示される。

<div id=”wrap”>
<ul id=”social_box”>
<li>ソーシャルボタンのコード（facebookなど）</li>
<li>ソーシャルボタンのコード（はてななど）</li>
<li>ソーシャルボタンのコード（Twitterなど）</li>
</ul>
<div id=”main”></div>
<div id=”side”></div>
</div>

2.style.cssを編集

外観→テーマ編集→style.cssに下のコードを追加

#social_box{
background:#FFF;
width:65px;
padding:15px;
margin-left:-180px;
text-align:center;
position:fixed;
bottom:100px;
list-style-type:none;
}

width：65px→横幅を調整

padding:15px→上下の設置場所の調整

margin-left：-180px→左右の設置場所の調整

この3つのコードの数値を表示するサイトによって変えることによって、いい位置に調整することができるのでサイトを確認しながら値を変えていきます。

ただし、ブラウザによって配置が違うので複数のブラウザで確認することも必要です。

最後に

ソーシャルボタンを設置するにあたり、single.phpとstyle.cssを編集することになるので、こういったファイルを編集するときは必ずそのコードをメモ帳などに保存しておくことが必要です。

おもなソーシャルボタン

■Twitter

https://twitter.com/about/resources/buttons

■Facebook

http://developers.facebook.com/docs/reference/plugins/like/

■はてなブックマーク

http://b.hatena.ne.jp/guide/bbutton

■Google+

https://developers.google.com/+/plugins/+1button/

■LINE

http://media.line.naver.jp/howto/ja/