WordPressにtwitter、Facebook、はてブのシェアボタンをオリジナルデザインで設置する

WordPressにはWP Social Bookmarking Lightというソーシャルボタンを設置するのに便利なプラグインがありますが、できるだけプラグインは使わない方向ということで自分で作って設置しましょう。

今回はtwitterとFacebookとはてなブックマークボタンを作りましょう。

tumblrでシェアしてくれる人はブラウザの拡張機能とか使うだろうし、とりあえずこの３つだけ抑えておけばいいんじゃないでしょうか。
あんまりたくさんあってもあれですし。

twitter

公式のでよければここで作りましょう。

オリジナルデザインにするには設置したい場所にこれを書きます。
だいたいcontent-single.phpのケツとかですかね。

<?php the_title(); ?>で表示してるページのタイトル、<?php the_permalink(); ?>でURLを取得してくれます。

<a href="&quot;http://twitter.com/share?text=<?php">-サイトタイトル&url=<!--?php the_permalink(); ?-->"target="blank">
<img alt="" src="画像のURL" width="横サイズ" height="縦サイズ"/>
</a>

Facebook

公式はこちら。
Like Button – Facebook開発者

Facebookはいいねボタンは作れないけどシェアボタンは作れます。
いいねとかよく意味わからないしこれで十分だと思います。

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="blank">
<img alt="" src="画像のURL" width="横サイズ" height="縦サイズ" /></a>

はてなブックマーク

公式はここ。
はてなブックマークボタンの作成・設置について

はてブボタンが一番簡単です。

公式ボタンのコードの画像を変えればいいだけです。

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">
<img src="画像のURL" alt="このエントリーをはてなブックマークに追加" width="横のサイズ" height="縦のサイズ" style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

画像はあんまりぶっとんだデザインにしてもわかりにくいので、なんとなく押したらシェアできそうなボタンにして、他のボタンとデザインを揃えるようにしましょう。

フリーではてブボタン扱ってるとこあんまないけどこことか無難でいいんじゃないですかね。
ミニ・ソーシャル・アイコン -Blog //ヴォルフロッシュ