FC2ブログ

blogaomu2.1はこの度、http://blogaomu.comに引っ越しました。最新の更新はblogaomu.comにて行なっておりますので、ブックマーク・RSS等の設定をお願い致します。

mixiのイイネ!ボタンを設置した

最近Webサイトを巡回していると、mixiのイイネ!ボタンがついているサイトを見かけるようになりました。mixiチェックはちょっと前から普及していましたが、イイネ!ボタンもつけられるとは知りませんでした。

というわけで早速イイネ!ボタンを設置したよ!
iine_1.png

設置の仕方

  1. イイネ!ボタンのiframeを追加する。
  2. OGPを設定する。
おお、なんと簡単!詳しい仕様はこちらに書いてあります。
技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

これだけでは記事として微妙なので、私がつまずいたり気づいたりした点をメモっておきます。

iframe設置の注意点

srcで指定するURLのクエリパラメータにshow_faces=trueを設定するとイイネ!を押した人のプロフィール写真が表示されるようになります。また、show_faces=trueを設定するときはheightを80px以上にしないとうまく表示されません。例を示します。

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:100px; height:80px" src="http://plugins.mixi.jp/favorite.pl?href=http://blogaomu21.blog91.fc2.com/blog-entry-165.html&service_key=service_key&width=100&show_faces=true"></iframe>

プロフィール写真を表示させないようにするときは、show_faces=trueの部分をまるまる削除すればOKです。このときheightは20px以上が好ましいとのこと。私のブログではプロフィール写真を出さない設定にしてます。

OGPについて

次にOGPのお話をするのですが、OGPってなんやねん!って方もいると思いますので簡単に説明。OGPとはthe Open Graph protocolの略で、Webページについての情報をプログラムが解析できる形でhtml上に載っけておくという手法です。Web(特にSNS)上で自分の気に入ったWebサイトやWebページを他の人に紹介するときに「〇〇というサイトの〇〇という記事をリンクしたよ」っていうことを伝えると思うのですが、〇〇の部分にあたるものをOGPによって制御できるというイメージです。

OGPについてはこの記事が分かりやすくて参考になります。私も参考にしました。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

そんなOGPですが、私のブログの記事ではこんな感じで記述しています。

<meta property="og:type" content="article" />
<meta property="og:title" content=" [R+]MacPeople 2011年2月号を読みました" />
<meta property="og:url" content="http://blogaomu21.blog91.fc2.com/blog-entry-159.html" />
<meta property="og:description" content="R+(@reviewplus)さんから「MacPeople 2011年2月号」の献本をいただきました。
毎度ありがとうございます!今回も特集を中心に見ていこうと思います。..." />
<meta property="og:image" content="http://blog-imgs-30.fc2.com/b/l/o/blogaomu21/favicon_20100223.ico" />

解説すると、
og:typeには記事なのでarticleを入れています。ブログのトップページにはblogを設定しています。
og:titleには記事のタイトル
og:urlには記事のURL
og:descriptionには記事の概要(ここでは「続きを読む」以前に書いてある内容を設定)
og:imageには画像を設定するのですが、とりあえずファビコンのURL


OGPの各項目を設定して、イイネ!ボタンをクリックすると、mixi上ではこのように表示されます。
iine_2_20110301234729.png

ちなみにfacebookのいいね!ボタンをクリックすると、facebook上でこのように表示されます。
iine_3.png


なるほど、og:titleとog:descriptionはmixi、facebook共通して表示されるようです。og:imageはfacebookのみ表示されました。

終わりに

というわけでmixiイイネ!ボタンを設置してみました。書いたものに対してイイネ!って言ってくれるは嬉しいのでみなさんどんどんクリックしてください!中の人が喜びます。
スポンサーサイト



シェアはこちらからどうぞ

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

コメントの投稿

非公開コメント

プロフィール

TAKAyuki_atkwsk

お知らせ
最新記事
最新記事のRSSフィード

最新コメント
最新トラックバック
カテゴリ
タグクラウド
月別アーカイブ
ブクログ
携帯百景