mixiチェックボタンの設置方法

各種ブログサービスではソーシャルボタン設置が進んでいますが、
当ブログではちょっと乗りおくれた感がありました。
製作を手伝いしているHPのオーナさんからも打診があったこともあって、
備忘録を兼ねて、設置方法保を記録しました。

とりあえずは「mixiチェックボタン」の設置から・・・。

1.「mixiデベロッパー登録」をする。

  ・「Developer登録する」ボタンの後、mixiログインパスワードを聞いてくるので入力。
  ・「Developer登録/変更」の画面で、氏名(漢字・カナ)、郵便番号、住所、携帯電話番号を入力。
  ・確認画面の後、登録ボタンを押す。
  ・携帯メールアドレスを登録する。確認画面後、登録。
  ・登録した携帯メールアドレスにメールが届くので、30分以内にメール内のURLをクリック。

2.「Developer Dashboard」で利用したいサイトを登録する。

  ・パスワードを入れてログイン
  ・上部メニューから「mixi Plugin」→左側メニューから「新規サービス追加」。
  ・サービス名:サイトのタイトル
  ・サービスのURL:サイトのURL(URLの最後に「/」を付ける。)
  ・許可ドメインリスト:サイトのドメイン名。記入欄下に入力例。「http://」や「https://」は不要。
  ・利用規約をよく読んで同意し、「入力内容を確認」→「登録」。
  ・登録後に詳細画面に「mixi認証キー」が表示されたら完了。

3.サイトやブログのボタンを設置したい部分にコードを埋め込む。

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

  ・↑の「mixi チェックキー」の部分を取得した「認証キー」に書き換える。(言葉を統一しろって!)
  ・ボタンのデザインを「button-1」~「button-5」の中から好きなのを選びコードに記載。
   (上記コードの「button-1」の部分を書き換える。)

  ・書き換えたコードをサイトの表示させたい部分に埋め込む。
  ・サイトのHTMLコードの一番最初に以下のコードを埋め込んで完成。
   (なくても動作はすると思いますが、詳細な設定をしたい時には必要)

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

   例:

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

※『mixiチェックボタン』の細かい設定方法は『mixi Developer Center技術仕様』で。

※当グログはwordpressで運用しているので、プラグインを利用してmixiチェックを導入できます。
  ・「mixi-check-for-wordpressプラグインをダウンロード&解凍し、
   フォルダごとプラグインディレクトリー(wp-content/plugins/直下)にアップロード。
  ・WordPress管理画面で「mixi check for wordpress」を有効化。
  ・有効化すると管理画面左側メニューに「mixiチェック」が追加されるので、
   「設定」で各種設定(認証キーの入力、ボタンの種類など)を行う。
  ・「埋め込みコード」で表示されるコードを、テーマファイル内の表示したい部分に記載して終了です。

mixiのデベロッパー登録が少々面倒ではありますが、
パスワードなどの個人情報は特に扱いたくはないし、携帯メールでの認証作業もあるので、
依頼主さんに登録作業を行っていただかないと・・・。

あとは、コードを埋め込むだけ。
プラグインを使っても結果的にはあまり工数は変わらない感じですので、
自分の理解度を高めるためにも当ブログではコード埋め込みで行っています(まぁコピペですけど)。