mixiやFacebook の likeとcheck/share のメモ

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 コメントの投稿を停止しました。ご了承ください。
2011.02.21

最近の投稿

カテゴリ

オススメ

カプセルトイ関連

ミク関連

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard