mixiチェックの設置方法（mixi）

この記事は1年以上前の記事のため、内容が古い可能性があります。

設置方法が結構面倒なのでメモ。

mixiチェックキーを取得する

１．まずはチェックキーを取得するために、「デベロッパー登録（法人の場合はパートナー登録）」を行います。

下記の「mixi Developer Center」から登録を行ってください。

※個人で行うデベロッパー登録の注意点
上記のサイトから登録を行うと携帯電話にメールが送信されてきます。（メールアドレス登録は携帯しか受け付けていないため）
そのメールに記述されているアドレスへ30分以内にアクセスし、ログインを行うと登録完了です。
PCからのメールを拒否する設定にしている場合は一時的に解除してください。

※法人で行うパートナー登録の注意点
申込用紙を郵送で送る必要があるため、時間に余裕をもって登録しましょう。

２．登録が無事完了したら、「mixi Developer Center」へアクセスし、ログインしてください。
ここでのログインアカウントはmixiと同じです。
ログインすると再びパスワードを聞かれますので、もう一度入力します。

３．ログインが成功すると、Developer Dashboard画面になります。

４．画面上部にある「mixi Plugin」タブをクリックし、登録サービス一覧を開いてください。

５．画面左にある「新規サービス追加」をクリックしてください。新規サービス登録フォームが表示されます。

それぞれのフォームを入力します。たとえばこのサイトだと

サービス名：ダリの雑記
サービスのURL：https://nandani.sakura.ne.jp/
許可ドメインリスト：www.nandani.sakura.ne.jp

となります。

６．入力後、利用規約に「同意する」にチェックを入れ、「入力内容を確認する」ボタンを押してください。次の確認画面で問題がなければ「作成する」ボタンを押してください。（後で編集も可能です。）

７．登録が完了すると、チェックキーが発行されます。

以上でキーの取得完了です。

次に該当するウェブサイトのページにmixiチェックボタンを設置します。

１．headタグ内に以下を追加してください

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

「ot:title」はページのタイトル＋サイト名
「og:description」はページの概要

が入るようにしてください。

２．htmlタグに以下を追加してください

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

例）こんな感じ↓

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja" xml:lang="ja" 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>

追記：classが抜けていたせいで、ボタンが正常に表示されてませんでした。すみません・・・；（2010年12月15日）

data-key：先ほど取得したmixiチェックキーを記述します。
data-url：該当ページのURLを入力します。空の場合は自動的にそのページのURLになります。
data-button：ボタンのタイプを記述します。タイプは"button-1"～"button-5"まであります。

以上です。

mixi公式の設置方法ページはこちら。

mixi チェックボタンの設置（PC 向け）

参考サイト

「mixiチェックボタンの設置は数行のコードを書くだけ」はウソ #mm2010 | Gryng.me - html、CSS、Movable Type、JavaScriptのブログ

トラックバック

トラックバックURL

トラックバック一覧

1. ツイートボタンを設置する方法（Twitter） | ダリの雑記：WEBプログラム版 | 2010年12月08日 11:36 AM

[...] mixiチェックは見習うべき！ [...]

2. いいね！ボタンを設置する方法（facebook） | ダリの雑記：WEBプログラム版 | 2010年12月08日 11:34 AM

[...] mixiチェックの設置方法と違い、こちらは超簡単！ [...]

3. mixiイイネ！ボタン | ダリの雑記：WEBプログラム版 | 2010年12月15日 10:52 PM

[...] mixiチェックの設置方法の７．まではやり方が同じです。 [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL

ダリの雑記：WEBプログラム版