こんにちは。株式会社コミュニティコムの星野邦敏です。

今日は、Twitterのツイートボタン、Facebookのいいね！ボタン、Google+のボタン、はてなブックマークのボタンなどを、プラグインを使わずに、WordPressの各記事に設置する方法を、以下で説明します。

Twitterのツイートボタン、Facebookのいいね！ボタン、Google+のボタン、はてなブックマークのボタンなどをWordPressの各記事に設置しようとしたら、「WP Social Bookmarking Light」というプラグインが有名です。
WordPress › WP Social Bookmarking Light « WordPress Plugins

とても良く出来ていて、気軽に設置できるというメリットがあると思いますが、
（１）横型の小さめの長方形ボタンしかない
（２）コンテンツ本文の上または下と決め打ちの場所にしか表示できない
などのデメリットもあると思います。

そこで、どこにでも自由にボタンを設置したい場合や、複数の箇所に設置したい場合、あとは、ボタンの形も自由に決めたい場合などもあると思います。

横型の小さめの長方形ボタン。

「WP Social Bookmarking Light」プラグインや、Twitter公式のツイートボタン（Twitter / Twitterボタン）などを使うと、こちらのボタンになります。

四角のボックス形式のボタン。

Webサイトやブログによっては、こちらのボタンを使いたい場合もあるでしょう。今回は、この場合のWordPressでのソースコードの書き方を以下で説明します。

例えば、Twitterのツイートボタン、Facebookのいいね！ボタン、Google+のボタン、はてなブックマークのボタンを、四角のボックス形式のボタンとして、かつ、複数箇所に設置したい場合は、以下のようなソースコードを、WordPressテーマに書きましょう。

<ul>
<li>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="＜自分のTwitterのID＞" 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-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" 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>

Twitterのアイコン部分「data-via=”＜自分のTwitterのID＞”」は、例えば「data-via=”khoshino”」と書けば、それが「@khoshino」という形でツイートに付くので、自分のアカウント名に変えてください。

また、一応、ulとliで書いて、CSSで横並びをする方法を取っていますが、重要なのは、liタグ内の各ソースコードです。

このWebサイトでも、この方法で、記事コンテンツの上と下の２箇所に、各ソーシャルアイコンを出しています。この方法をCSSで応用させれば各アイコンを縦置きにしたり、テーマに書けばどこにでも設置できるのでサイドバーに設置したりも、もちろん可能です。

以上となります。ご参考まで。

（追加）
はむちぃさんに指摘を受けて、Google+部分のボタン実装について、

<li><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></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>

に変更しました。
ご指摘ありがとうございます！