やっぱアレですね、技術Blogと銘打つとなかなかネタに困りますね。

ってことで、この度依頼を請けました一般サイトでのmixiチェック機能実装に関して意外に調べる事が多かったのでココに備忘録★

また、試しにこのBlogにもSNS関係のシェアリンクを付けてみました。
デザインの反映はまだですが、そのうち整えます。

ではでは早速説明から。

まずは最近SNS関連で増えつつある”チェック”機能って何ぞやってとこから。
まぁ、自分もそんなにSNS関係に強くないから(商売的にそれもどうなんだと・・・)簡単に説明。

主にBlogやNewsサイトで記事を見て、気になったり面白くて
自分以外の人にも伝えたい時に”チェック”するとSNSで友達にチェックした情報を共有できる機能なんですね。

まぁ便利!ってとこで以下必要なものです。

  1. mixiへの参加登録
  2. mixiデペロッパーへの登録
  3. サイト毎のmixiチェックキーの取得
  4. 携帯メールアドレス(デペロッパー登録時に必要)

ではでは説明に入ります!
(画像はクリックで拡大です。)

1.まずはmixiデペロッパー登録から
今回使うmixiチェックはmixiの公式サービスですから必然的にデペロッパー登録が必要になります。
このデペロッパー登録をしないと”mixiチェックキー”が取得できません。
ではまず以下のページにてデペロッパー登録してください。
デペロッパー登録画面

ここで下記の画面が出ますんで「デペロッパー登録する」をクリック!
登録画面

2.パスワードを入力
こんなことはわかりきってますね、はい。
mixiで普段使用しているパスワードです。
登録画面
3.デペロッパー情報を登録する
mixiですでに個人情報を登録しているにも関わらずここでも個人情報を登録・・・
よっぽど個人情報が欲しいみたいですね。
登録画面3
4.携帯のメールアドレスを登録
なぜここで携帯が必須なのか分からない・・・
でも登録です。
※ここをiphoneのアドレスで登録しちゃうとmixiのユーザーエージェントに引っかかって、
携帯と認識されずに登録完了しないと思うので気をつけてください。

登録画面4

で、ここで携帯に仮登録メールが送られます。
登録画面5

5.携帯からアクセス
mixiから携帯に届いたアドレスをクリックしてユーザー登録完了!
登録画面6
ここでひとまず登録関係は終了です。
6.mixiチェックキーの取得に移る
登録は完了したのでmixiチェックキーの取得に入りたいと思います。
以下にアクセスしてmixiチェックを行うためにサービス登録します。
Developer Dashboard

まずはログインからここにmixiのパスワードを入力してログインしてください。
登録画面7

7.ホーム画面から「mixi Plugin」へ遷移
まずはページが違うのでmixi Pluginに移動。

登録画面8

8.「新規サービス追加」を選択
ここで新規サービスを追加でサービス登録画面に進みます。
登録画面9
9.mixiチェックを使用するサイト情報を入力
ここではmixiチェックを実際に使用するサイト情報を入力します。
サービス名は「サイト名」、サービスのURLは「ドメイン」、
URL許可リストは「サブドメイン含むそのサイトが表示されるURL」(モバイルサイトなどをサブドメインで分けている場合は必ず入力してください。)。
登録画面10

ここで確認。
OKならそのまま登録です。
登録画面11

10.チェックキー取得完了。
登録が完了すると下記画面が出ますので、「こちら」をクリック
登録画面12

ここでやっとチェックキーが取得できます。
登録画面13

ここで取得関係は終了!
実際の表示反映に移りますよ~★

11.HTMLソースを編集
まずはmixiのデペロッパーセンターにある技術仕様に則り、
基準ソースから。
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="**********">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
これが標準のソースですね。
まぁ、分かりやすく説明するとリンクをクリックすると
2行目のスクリプトがページURLを取得してmixiチェックにページURLとタイトルを送信してくれるのですよ。
a要素のクラスでそのスクリプトが反映される箇所を識別してるんですね。で、ここにある「data-key」部分に先ほど取得したチェックキーを挿入します。

このままだとBlogなどで一覧表示してい場合はそのページがリンク対象となってしまうので、
一覧ページなどで同ページ内に複数設置する場合下記のように編集。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="**********" data-url="*********">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
先ほどのa要素に「data-url」を追加します。
これはリンク先の詳細ページURLですね。
これでほぼ完了です。

※一覧ページなど同ページに複数設置される場合はボタンを配置するそれぞれの位置にa要素を置き、最後のa要素の直後 にscript要素をひとつだけ置いてください。との事です。

その他にもモバイル用やチェックボタンの変更など様々なカスタマイズがあります。
詳しくは技術仕様を見てください。

【番外編】WordPress用カスタマイズ!
まぁ、書くまでも無いとは思うのですが、今後自分が使う際にコピペで済むように備忘録w

<a href="http://mixi.jp/share.pl" data-key="*********" class="mixi-check-button" data-url="<?php the_permalink() ?>">check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/mixishare.js"></script>

要は、ただ一覧表示用に記事へのリンク先を入れてるだけですね。

【番外編】MT用カスタマイズ!
上記と一緒。ただの備忘録

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

今日の備忘録以上!

あれですね。
画像編集まで入れてBlog更新するのって結構大変ですね。
今度から少し考えなきゃだな。