mixiチェックをウェブとblogに設置する方法

なんか急にあちこちでmixiチェックを見かけるようになったので、早速設置してみるテスト:-)

運営しているウェブサイトとblog(WordPressまたはMovableType)に設置してみます。

ちなみにはてなダイアリーは、「管理」→「設定」→「外部サービス連携」で「mixi連携設定」のリンクをクリックすると、mixiチェックの欄に「〜にエントリーしました」という投稿通知を出せるみたいです。
……いや、普通のmixiチェックボタン……つまり読者さんがチェックするボタンを欲しくないですか？(^^;
（いや、この機能はこの機能で使い勝手はありそうですけど、どうなんだろう…）

はじめに

この記事では、以下の3点について手順を紹介します。

1. mixiへの情報登録
2. blogへの「mixiチェック」ボタンを設置
3. ウェブサイトへの「mixiチェック」ボタンを設置

1.mixiへの情報登録

(1) デベロッパー（開発者）登録をします

mixi外部のサービスと繋がるためのプラットフォーム「mixi Connect」の開発者登録をします。blogにWordPressのプラグインで設置するだけでもこの手続が必要です。

アプリを作成・登録するには、Developer登録をする必要があります。Developer登録には携帯メールアドレス、氏名、住所の登録が必須です。
登録される方は、以下の「Developer登録」ボタンより進んでください。

※iPhoneのメールアドレスに送られるURLは、（例え送り先がMMSのアドレスでも）「このページへは携帯電話からのみアクセスできます。パソコンのサイトはこちら」という趣旨の警告が出て開けません。WiFiじゃなくて3Gでも一緒。これってなんだかなーな仕様ですよねぇ（参考）。

(2) mixiチェックをするサービスを登録します。

1) mixi Developer CenterからDeveloper Dashboardを開きます。
2) 「mixi Plugin」をクリックします。
3) mixiチェックとあるのを確認して、「新規サービス追加」をクリックします。
4) 以下の項目を入力します。

サービス名　　…通常はblog名ですね
サービスのURL　…通常はblogのURL
URL許可リスト　…blogのURLからhttp://
定型文…特に希望がなければデフォルトのままで構いません

5) 表示される「mixiチェックキー」をメモします。
（次回以降は 2)「mixi Plugin」のところに登録したサービス名が表示されるので、これをクリックすれば認証情報としてチェックキーが表示されます）

2.blogへの「mixiチェック」ボタンを設置

(1) プラグインをダウンロードします。

Wordpress用とMovable Type用があります。
以下では、Wordpress用プラグインを解説します。（以下の説明はmixi check for wordpress Ver.1.1準拠です）

(2) mixi-check-for-wordpress-..zipというリンクをクリックして、zipファイルをダウンロードします。

(3) 展開して、WordPressのプラグイン ディレクトリにアップロードします。

(4) WordPressの管理画面を開き、「プラグイン」の停止中リストに「mixi check plugin for wordpress」があることを確認します。

(5) 「有効化」をクリックします。

(6) ダッシュボードの左メニューに「mixiチェック」という項目が追加されたのを確認する

(7) 「mixiチェック」をクリックします。

(8)「設定」画面が表示されるので、順に入力します。

「mixiチェックキー」　…先ほどメモした文字列をコピペします。
Rating　…18 歳未満非対応サイトの場合チェックを入れます。
Robots　…取得されたくない情報を設定します。
Excerpt length　…本文の抜粋文字数を設定します
Button type　…mixiチェックボタンの表示タイプを選択してください

(9)「Save Changes」をクリックして保存します。

(10)左メニューから「設定」の下の「埋め込みコード」をクリックします。

(11)使用しているテーマのheader.phpを開きます

タグに以下の属性を追加します

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

内に以下の記述があるか確認し、無い場合は追加します

<?php wp_head(); ?>

(12)「mixiチェック」ボタンを置きたい場所のテーマのファイルに、以下のコードを書き込みます。

<?php get_the_mixi_check_button_code(); ?>

私の場合は、各記事のタイトル前後にいれたかったので、「index.php」「archive.php」「search.php」を書き換えることになりました。

(13)ページを開いて動作を確認します。

3.ウェブサイトへの「mixiチェック」ボタンを設置

こちらはもっと簡単です。

(1) ボタン（最小構成）

mixi チェックキーだけ書き換えてください

<a href="http://mixi.jp/share.pl"
 class="mixi-check-button"
 data-key="***mixi チェックキー***">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

(2) ボタン（最大構成）

以下のように書くことで、リンク先のURLを明示的に指定し（data-url）、ボタンの種類を変更することもできます（data-button）。

<a href="http://mixi.jp/share.pl"
 class="mixi-check-button"
 data-key="***mixi チェックキー***"
 data-url="http://www.example.com/anatanopage.html"
 data-button="button-2">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

リンク先のURLを明示的に指定しない場合は、「そのページの URL が使われます」。つまり、link rel="canonical"を指定しているような、同じコンテンツで複数のURLがあるようなページの場合には、集約元のURLを明示的に指定できるようになっている、ということです。普通は指定する必要はないでしょう。
ボタンの種類はお好みで:-) button-1からbutton-5まであります。

(3) mixiチェックに表示するタイトルと本文を指定する

「title 要素とが指定されているページや、The Open Graph Protocol に対応しているサイトであれば、タイトルと本文については特に何も変更する必要はありません。」

それ以外の場合について紹介します。

まず、タグへ以下の属性を追加してください（blogの場合と一緒です）

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

「“xmlns:og” は The Open Graph protocol の名前空間、”xmlns:mixi” が mixi の名前空間になります。」

次に以下のタグを内に挿入します。
1)タイトル
優先順位 1番

<meta property="mixi:title" content="..." />

優先順位 2番

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

優先順位 3番

<title>...</title>

優先順位 4番
mixiに登録したサービス名となります。

2)本文
優先順位 1番

<meta property="mixi:description" content="..." />