「mixiチェックボタンの設置は数行のコードを書くだけ」はウソ #mm2010

「mixi meetup 2010」はご覧になりました？

そこで発表があった「mixiチェック」をさっそくこのブログにも設置してみました。

ざっくり設置方法をメモしておきます。

mixi チェック技術仕様

mixiデベロッパー登録をすませる

サイトのチェックキーの取得

mixi Developer Center から Developer Dashboard へアクセスし、mixi Pluginのタブを開きます。

「新規サービス追加」の項目からサイトのURLなどを登録し、キーを取得します。

metaタグを追加

mixiチェックに投稿する内容をhead内に記述します。
（追記）この項目は省略するとページのtitleとdescriptionがそのまま使われると仕様にありますが、ぼくの書き方が悪かったのかなぜかそうならず、書かないとだめっぽかったです。謎。。

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />

titleとdescriptionをそれぞれcontent属性に記述します。

MTの場合は以下のように記述するとよいと思います。

<MTIfArchiveType archive_type="Individual">
<meta property="og:title" content="<$MTEntryTitle encode_html='1'$>" />
<meta property="og:description" content="<$MTEntryExcerpt convert_breaks='0' encode_html='1' ltrim='1'$>">
</MTIfArchiveType>

表示するアイコンの画像を設定する（省略可）

これもhead内に記述します。

<link rel="mixi-check-image" href="http://gryng.me/img/ico/iphone_01.png" />

名前空間の宣言

htmlタグに属性を追加します。

<html xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">

設置個所にタグを記述

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="..." data-url="..." data-button="button-1">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

data-key に先ほど取得したキーを入力します。

data-urlに投稿するURLを入力します。省略した場合は設置したページのURLになります。

data-buttonでボタンのスタイルを指定できます。以下のようなスタイルがあるようです。