ブログにFacebookやTwitterなどのソーシャルボタンを設置する方法

WordPressをインストールしたときの初期のテーマだと、ソーシャルボタン（Facebook、Twitterなど）が設置されていません。ソーシャルボタンを設置したい場合は、自分で任意の場所に設置コードを記述する方法、プラグインを使用する方法、簡単にソーシャルボタン設置できるサービスを利用する方法の３つがあります。

ここでは、簡単にソーシャルボタン設置できるサービスを利用する方法と、自分で任意の場所に設置コードを記述する方法を紹介します。

簡単にソーシャルボタン設置できるサービスを利用する方法
自分で任意の場所に設置コードを記述する方法（横並び）

簡単にソーシャルボタン設置できるサービスを利用する

一番手軽にできるのが、ソーシャルボタン設置サービスを利用する方法です。ここでは2つのサービスを紹介します。

ローソンガジェットでソーシャルボタンを設置する方法
忍者おまとめボタンでソーシャルボタンを設置する方法

ローソンガジェットでソーシャルボタンを設置する方法

ローソンガジェットは、LAWSON（ローソン）が提供しているソーシャルボタンを簡単に設置できるサービスです。

ローソンガジェット

１．まずローソンガジェットのページで色を選んでソースをコピーします。

２．ソースをコピーしたら、ヘッダーやフッターの任意の場所（php）に貼り付けます。これだけで完了です。左端にガジェットが表示されます。

忍者おまとめボタンでソーシャルボタンを設置する方法

忍者ブログでおなじみのサムライファクトリーが提供しているサービスです。

忍者おまとめボタン

１．まず「設置ボタンを１つずつ選択して作成」をクリックします。

２．忍者ツールズのアカウントを作るか、FacebookやTwitterのアカウントでログインします。

３．規約に同意して、設置するサイトで「WordPress」を選びます。

４．使用したいブックマークボタンを追加していきます。

５．追加し終わったら「コードを取得する」ボタンを押します。

６．コードをコピーして、WordPressの任意の場所（テンプレートの記事下やサイドバーなど）にコードを挿入します。

７．これでコードを貼り付けた場所にソーシャルボタンが表示されます。

自分で任意の場所に設置コードを記述する方法（横並び）

まず使用しているテーマのスタイルシート（CSS）に以下のようなid属性を記述します。

#socialbook ul{  
  list-style-type: none;
  list-style-image:none;
  margin: 0;  
  padding: 0; 
}  
 
#socialbook li{  
  float: left;  
  margin: 0;  
  padding: 5px 5px 15px;
}

後はブックマークボタンを表示させたい場所に、以下のコードを貼り付けます。（ここではTwitter、Facebook、google+、はてなブックマークを設置するコードを紹介しています）

※テキストウィジェットや記事本文にコードを貼り付ける場合は、PHPを書き込めるようにするプラグイン（Exec-PHPなど）が必要です。

<div id="socialbook">
<ul>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li>
<li><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe></li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></li>
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
</ul>
</div>

これでコードを貼り付けた場所に、以下のようなソーシャルボタンが表示されると思います。