５大ソーシャルボタン（はてブ,facebook,Twitter,Google+,Evernote）ジェネレータをまとめました

いまやソーシャルメディアにリンクしていないサイトはほとんどありませんよね？僕はmixiも使ったことが無ければfacebookも先日はじめたばかりというくらいソーシャルメディアに無頓着だったんですが、さすがにソーシャルボタンくらいは置いておこうと思うようになりましたσ(^_^; )

設置方法は詳しいサイトがたくさんあるので省略。５大メジャー*1 のソーシャルボタンジェネレーター（はてブ,facebook,Twitter,Google+,Evernote）へのリンクをまとめておきます。

はてなブックマークボタンの作成・設置について
2010年にリニュアルされたスタイリッシュなはてブボタン。indexなどで１ページに複数設置する場合は重くなるので、はてブ数を表示させる目的なら後述の「○○users」の方を使ったほうがよさそうです。

自分のブログに「↑B」「B!」アイコンを表示する
昔ながらのはてブ追加ボタン。クリックしたときに表示される追加フォームも新しいものと異なるが、個人的にはこっちのほうが好きです。動作も軽いような気がします。

自分のブログに「○○users」を表示する
http://b.hatena.ne.jp/entry/image/のあとにはてブ数を取得したいURLを加えるだけでそのＵＲＬのはてブ数画像を生成してくれ（て）ます。
HappyQualityの

を取得するならこんな感じです。

<img src="http://b.hatena.ne.jp/entry/image/http://www.happyquality.com/" />

１ページに何個表示しても問題ないくらいに軽い。

Like Button – Facebook開発者
数あるソーシャルボタンの中で設置がもっとも面倒でした。慣れるとどうってことないんですけどね。

僕は「いいね」したときにコメントを付けられるXFBML形式が好きですが、面倒がいやならコメント送信ボタンは付けられませんがiFrame形式にするといいでしょう。

設置について一つだけ注意点をあげるとすれば「ジェネレーターページにはSTEP2もあることを見落とすな」ということでしょう。僕はStep1しか見なかったためにogpやfb:admins or fb:app_idの設定に気づかず苦労しましたσ(^_^; )

Twitter / ツイートボタン
ジェネレーターのページがとてもよく出来てるので迷うことなく設置できます。

タイトルやURLを指定しなくてもページから取得してくれるので動的ページでもそのまま使えるのも親切ですね。１ページに複数設置する場合はdata-url属性に手動で設定すればＯＫです。

プラスワンボタン
これも面倒な設定がいらないボタンが要らない上に、ベースのスクリプトはhead内に入れることで、ボタンを表示するスクリプトを短くしています。こちらもボタン表示スクリプトにhrefでURLを設定できます。

Evernote Site Memory | Evernote Corporation
英語ですが見たら分かると思います。わからなければボタンのデザインだけ選んでコピペコピペ（笑）