コピペでOK！ソーシャルボタン設置と追尾方法。プラグイン不要

ブログ・サイトにソーシャルボタンを自力で設置する方法です。いま流行りのスクロールを固定（追尾）する設定方法も紹介します。WordPressの場合はプラグインが不要になりますよ。

ゆめぴょんです。こんちはっ(^^)/

ブログやホームページにソーシャルボタンを設置するのは、もはや常識です。そうすることにより、まだ知名度のないブログでもアクセスを増やすことが可能になります。

横型、縦型、カウント数ありなど、いろいろなソーシャルボタンを設置したい場合は、下の記事を参考にしてみてください。7つのSNSのボタンについて書いています。

今回の記事はWordPressだけでなく、ブログや一般サイトの全てで利用することが可能です。WordPress以外の方は、次の章だけは飛ばしても問題ありません。

（WordPressの場合）今回、不要になるプラグイン

WordPressの方にとっては「WordPressプラグインはずし特集」の第9弾です。今までの特集記事は全て下のリンクにまとめています。

今回の記事により、次のようなWordPressプラグインが不要になります。類似のも多いですが、私が使ったものだけ紹介します。

2つのプラグインや、類似プラグインについては、下の記事を参考にしてください。

今回紹介するのは、カウント数付きの縦型（ボックス型）ソーシャルボタンを縦に並べる方法です。横に並べたり、小さなボタンを使ったりしたい場合は、下記事を参考にしてください。

今回設置するソーシャルボタンは次のとおりです。あなた好みで追加・削除してみてください。

下コードをブログ・サイトのソースの好きな場所にコピペするだけです。記事本文の表示を優先するなら、フッター部分などページの下の方に設置した方がいいです。</body>タグの直前でも問題ありません。

WordPressの場合も、テーマファイル「footer.php」の下の方にコピペすればいいと思います。

[html]

[/html]

上コードでは、2ヶ所だけ各自で入力が必要です。

「●●●●」には、自分のツイッターアカウントを入力してください。私の場合は「yume_pyon」です。

「■■■■」には、そのページのurlを入力してください。「http://wispyon.com/test/」のような。WordPressの場合は「<?php echo get_permalink(); ?>」です。

Facebookページの「いいねボタン」は上手く表示されない場合があったため、iframeにしましたが、HTML5版の方が速いので気になる人は変更してください。

また「いいねボタン」だけ枠内のセンタリングも出来なかったので、classを設定して少しだけ右にずらしました。

スクロール固定（追尾）を設定しているのは「position: fixed;」です。これをはずすだけで解除できますが、その場合はheightなどで高さを設定してください。

ブログの記事内に同じソーシャルボタンを2回以上設置する場合は、スクリプトコードを1つにまとめると高速化が期待できます。下記事も参考にしてみてください。

今回の記事内容をざっくり言うと。

関連ある記事も参考にしてください。

ゆめぴょんでした。ちゃおっ！