mixiやFacebook の likeとcheck/share のメモ : ういすぷの記録帳

mixiやFacebookのいいね！(like)とシェア(share)の設置方法についてメモを残したいと思います。

■ mixiのイイネ！とチェック
mixiのサービスを利用するには、mixiへの登録と、mixi Developer Centerへの登録が必要です。その後、「mixi Plugin」から「新規サービス」を選び、キーを取得してください。
※ 個人としての利用で、携帯電話のメールアドレスが認証用につかわれます。(認証用URLが携帯電話に届きます)スパムフィルターを利用している場合には、「mixi@mixi.jp」を利用可能にしてください。

□ イイネ！

<iframe scrolling="no" frameborder="0" allowTransparency="true" 

style="overflow:hidden; border:0; width:450px; height:80px" 

src="http://plugins.mixi.jp/favorite.pl?href=[ページのURL]&

service_key=[アプリケーションキー]&show_faces=true&width=450"></iframe>

[アプリケーションキー] には、Developer Centerで取得したキーを代入します。
[ページのURL] には、URLエスケープ処理したURLを代入します。
※ 細かいオプションについては、Developer Centerのmixi Pluginページをご参照ください。


□ チェック

<a href="http://mixi.jp/share.pl" data-key="[アプリケーションキー]" 

data-url="[ページのURL]" 

data-button="button-1" class="mixi-check-button">mixiチェック</a>

<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

[アプリケーションキー] には、Developer Centerで取得したキーを代入します。
[ページのURL] には、そのままのURLを代入します。(URLエスケープ処理はしません。)
※ 細かいオプションについては、Developer Centerのmixi Pluginページをご参照ください。


■ Facebookのいいね！とシェア
こちらも利用するには、Facebookに登録する必要があります。ただし、アプリケーションキーを登録などの手間はありません。

□ いいね！
Facebookには、便利なツールがありますので、ツールから出力されるHTMLソースを改良するだけでOKです。
Like Button - Facebook開発者
ただしURLは、URLエスケープ処理する必要があります。

□ シェア
シェアについては、いいね！(Like)ボタンで行う様にとのことですが、旧バージョンの仕様は利用可能です。以下のHTMLタグを利用してください。

<a name="fb_share" type="[ボタンタイプ]"></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">

</script>

以下は、ボタンのタイプの種類となります。
box_count
button_count
button
icon_link
icon


比較的簡単に利用可能ですので、お試しください。
また、間違っているところなど、ご指摘があれば修正いたします。
上記ボタンのいずれにも言えることですが、結構スペースを取ります。デザインをする上で、中々大変かもしれません。特に、mixiのボタンは、縦幅が統一されていません。なかなかの困りものです。


□ 2011/08/02 コメントの投稿を停止しました。ご了承ください。