WordPress で記事に mixi チェックボタンを設置する

2010年09月11日
blog
wordpress

mixi チェックとはサイトの記事をコメント付きでマイミク等と共有できるサービスらしい。
ページ内に設置された mixi チェックボタンをクリックしてチェックリストにそのページを登録していく。

この、mixi チェックボタンを WordPress テンプレートを編集して、記事内に設置する方法をメモしておく。

mixi チェックキーの取得

mixi Developer Center (ミクシィ デベロッパーセンター) ページから『Developer Dashboard』にログインして、『mixi Plugin』ページに移動する。

『新規サービス追加』から『サービス名』（登録サービスの一覧に表示される名前）、『サービスのURL』（ボタンを設置するサイトのトップページURLなど）、『URL許可リスト』（チェック対象ページ内の画像などのデータ取得などを許可するURLのパターン?）、『定型文』（チェックリストのタイトルなどに表示される）を入力して、利用規約に同意するにチェックを入れて『入力内容を確認する』ボタンをクリックする。

確認画面から『作成する』ボタンをクリックすると登録が完了し、『チェックキー』が発行される。

サービス登録を行ったら、技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター) の内容に従って WordPress テンプレートを修正していく。

mixi チェックボタンの設置

個別記事テンプレート（single.php）内の適当な場所に mixi チェックボタンのタグを挿入する。

href（必須）
http://mixi.jp/share.pl
class（必須）
mixi-check-button
data-key（必須）
発行された mixi チェックキー
data-url
記事のURL
the_permalink() で取得する
data-button
button-1 から button-5 までの 5 パターンのボタン画像がある。
指定しない場合はテキストリンクが表示される。

コード例

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="mixi チェックキー" data-url="<?php the_permalink(); ?>" data-button="button-1">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

名前空間の追加

サイトの html 要素に以下の名前空間宣言を追加する。

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

コード例

<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">

チェックのタイトル、本文を指定する

html の head 内に mixi チェックのタイトルと本文を指定する meta タグを追加する。
本文は mixi チェックの『続きを見る』リンクから見ることができる。

<meta property="og:title" content="タイトル" />
<meta property="og:description" content="本文" />

コード例

Single ページでのみ meta タグを入れるようにした。

<?php if (is_single()) : if (have_posts()) : while (have_posts()) : the_post(); ?>
    <meta property="og:title" content="<?php the_title(); ?> : <?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" />
    <meta property="og:description" content="<?php the_excerpt(); ?>" />
<?php endwhile; endif; endif; ?>
«
»