mixi、GREE、Facebook、Twitter、それぞれのソーシャルボタンの作り方

Yagi

こんにちは。プログラマのYagiです。


9月6日にmixiがmixiチェック、
9月10日にGREEがSocial Feedbackをリリースしました。

FacebookもTwitterも公式でソーシャルボタンを用意してますし、是非ともサイトに導入したいですよね！
ということで今回は、mixi、GREE、Facebook、Twitter、それぞれのソーシャルボタンの作り方を紹介します。

ソーシャルボタンサンプル

サンプルはこちら。上から順に、mixi、GREE、Facebook、Twitterです。

各々で、サイズや形などを選べるので、自分の好みにカスタマイズしましょう。

GREEの「Social Feedback」


http://developer.gree.co.jp/connect/plugins/sf
GREEでは、上記のサイトの「設置方法」のプロパティを設定して、コードを取得するだけで生成できます。
ログインなどは必要ありません。

Twitterの「Tweet Button」


http://twitter.com/goodies/tweetbutton
Twitterも同じく、プロパティを設定するだけで、作成できます。

Facebookの「Like Button」


いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
Facebookも同じように、プロパティを設定するだけです。

mixiの「mixiチェック」


この4っつの中で一番手間がかかるのがmixiチェックです。
mixiチェックを作成するには、個人ならデベロッパー登録、法人ならパートナー登録が必要になります。

登録したあとは、mixiチェック用のデータキー作成のため、
mixi Developer Centerの「Developer Dashboard」から、「mixi Plugin」へ行き、「新規サービス追加」します。

その後、
技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
に沿って、href属性や、先程追加したサービスのチェックキーをdata-key属性に入れて、サイトにコピー＆ペーストすれば完了です。

まとめ

mixiは面倒で、
twitter、Facebook、GREEはすごく簡単です。