シェアする

  • このエントリーをはてなブックマークに追加

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

5大ソーシャルボタンジェネレーターまとめ

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

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

はてなブックマーク

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

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

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

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

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

facebook

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

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

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

Twitter

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

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

Google+

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

Evernote

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

  1. と勝手に僕が思っている []

シェアする

  • このエントリーをはてなブックマークに追加

フォローする