2010年9月16日木曜日

ツイートボタンやいいね!ボタンを設置。WEBページ一等地の土地争奪戦が始まったのかもしれない

Twitterの公式ツイートボタン、その他つぶやき系のボタンやLikeボタンも、導入にむけて設置方法を調べてみた。


1. Twitterの公式ツイートボタン

Twitter / ツイートボタン

まずはTwitterの公式ツイートボタン。
ボタンのスタイルを選んでフォローをすすめるユーザー名の入力を済ませば、多くの場合、デフォルト設定で問題ないだろう。後はJavaScriptのコードをコピーして、サイトに設置すればOK。最も導入が簡単だった。


2. Google BuzzのBuzz投稿ボタン

バズ - ウィジェット

こちらもTwitter同様、ボタンのスタイルを選んで、ちょこちょこっとデフォルト設定を変更すればすぐにボタンが出来る。ソースがJavaScriptなのもTwitterと同じ。

ただ、Buzzの場合、クエリーパラメーターやJavaScriptのデータ属性で、さらに項目が設定できる。
Buttons and Gadgets - Google Buzz API - Google Code


3. FacebookのLikeボタン

Like Button - Facebook開発者

Likeボタンの埋め込みパターンとしては、IframeバージョンとXFBMLバージョンの二つがある。
Iframeバージョンはシンプルで分かりやすく、XFBMLバージョンの方は、よりFacebookのページで情報を効果的に表示することが出来るようだ。但し、XFBMLを使う場合、JavaScript SDKが必要だ。

Facebookは、Open Graph protocolに対応していて、Open Graphタグを記述すると、記述した内容がLikeボタンをクリックした際に使用される。Open Graphタグを必ずしも記述する必要はないようだ。

また、Likeボタンを設置するために、Facebookのアカウントを取得する必要はなく、デベロッパー登録も必要ない。

< 注意 >
Layout Styleを「button_count」にする場合、iframeのstyle属性のwidthが、デフォルトの90pxのままだと右端が切れます。96px以上にするとIE8でも右端が切れずに表示できます。


4. GREEのSocial Feedback

Social Feedback - GREE Developer Center(グリー デベロッパーセンター)

GREEでは、いいね!やオススメ、シェアなどのボタン設置は、Social Feedbackとして用意されている。

フォーマットはIframeで、URLやボタンの種類、大きさなどを設定したら、Iframeのコードをコピーしてサイト内に設置する。

Social Feedbackを設置するために、GREEのアカウントを取得する必要はなく、デベロッパー登録も必要ない。

GREEもFacebookと同じように、Open Graph protocolに対応しているが、GREEの場合はOpen Graphタグを記述する必要があるようだ。


5. mixiのmixi チェック

技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

mixi チェックはaタグとJavaScriptコードで構成されている。aタグのプロパティとして必須になっているdata-keyでは、mixiデベロッパー登録時に発行されるmixi チェックキーが必要。

つまり、mixi チェックを設置する際には、mixiにデベロッパー登録が必要だ。さらにデベロッパー登録後、mixi チェックを設置するサイトのURLをURL許可リストに含める必要もある

mixi チェックもOpen Graph protocolに対応している。但し、技術仕様を見る限り、Open Graphタグの記述は必ずしも必須ではないようだ。

mixiのページは、説明がとても丁寧にされている反面、色々書かれすぎていて、若干面倒くさそうな印象を持ってしまう(^^;)。


< まとめ >

最終的に、登録などの手間や設置するメリット、ページレイアウトなどを考慮して、結局、TwitterとFacebookとGoogle Buzzに限定してボタンを設置した。

ボタンを設置する側の論理で言えば、ページの面積は限られているので、こういったボタンを全て設置するのは無理だ。

ということは取捨選択せざるをえず、その選択に勝ち残るためには、ボタンを提供する側も、設置に必要な手間をできるだけ簡略化して、高い設置メリットを提供できなければならないだろう。

どれだけ有名なサイトにボタンを設置してもらえるか、ソーシャルメディアのWEBページ一等地争奪戦が始まっているようだ。