WordPress への SNS ボタン追加

今更ですが、ブログ内にソーシャルネットワークサービス系のボタンを追加しました。
追加したのは Twitter、facebook、delicious、はてなブックマークです。
その他にも Google Bookmarks とか tumblr など沢山ありますが、
今回はとりあえず日本でシェアの多そうな上記4つを追加しました。

WordPress 用のプラグインも多数存在しますが、
通常の HTML でも応用がきくようにコードベースで追加しています。

下記、各々の設置方法です。
WordPress 用なので、一部テンプレートタグなどが入ってます。

■ Twitter

公式で提供されている作成フォームがあるので、
そこで発行されるコードをテンプレート内に追加するだけです。

http://twitter.com/goodies/tweetbutton

このページのコードを貼り付ければ自動的に現在表示されているページタイトルや
URL を設定してくれます。
ただ、ブログの場合は、個別記事ページだけでなく、
月別アーカイブやカテゴリアーカイブなどで記事が表示されるケースがあるので、
そのまま利用するとちょっとおかしなことになってしまいます。
なので、下記のようにページタイトルと URL は動的に設定するようにしています。

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?> [<?php bloginfo('name') ?>]" data-count="horizontal" data-via="TwitterのID" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

もし、個別記事ページだけ表示すればよいのであれば、
single.php にデフォルトのコードを貼り付けるだけで問題ないと思います。

■ facebook

facebookは、「いいねボタン」と「シェアボタン」を追加しました。
「いいねボタン」は、公式の作成フォームがあるので、そこでコードを取得します。

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

Facebook の場合も Twitter と同様の理由で、URL を下記のように動的に設定しています（以下サービスも同様）。

<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script>
<fb:like href="<?php the_permalink() ?>" layout="button_count" width="200"></fb:like>

「シェアボタン」は、下記のページにならって設置しています。

http://developers.facebook.com/docs/share

■ はてなブックマーク

「B!」画像は、予め自分のサーバにアップしておく必要があります。

<a href="http://b.hatena.ne.jp/entry/add/<?php the_permalink() ?>">
<img src="サーバにアップロードした「B!」画像のURL" width="16" height="12" style="border: none;" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" />
</a>

ブックマーク数を表示するには下記コードで。

<img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" />

ここに簡単なヘルプページもあります。

http://b.hatena.ne.jp/help/button

■ delicious

<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('<?php the_permalink() ?>')+'&title='+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;"><img src="http://static.delicious.com/img/delicious.gif" height="18" width="18" alt="Deliciousにブックマーク" /></a>

こんな感じでどれも手軽に導入できますし、
サイトのアクセスアップにも繋がるので積極的に導入したいですね。