F.Ko-Jiの「一秒後は未来」

ブログにmixiチェックを設置

先日mixiから公開された「mixiチェック」が一般公開されたようなので、このブログにも設置してみました。

mixiチェックの設置方法

mixiチェックを設置するにはチェックキーというキーを発行する必要があります。チェックキーの発行はmixi Developer Centerにある「mixi Developer Dashboard」からおこないます。(デベロッパーセンターに登録してない場合は登録してください。)

ダッシュボードにログインしたら「mixi Plugin」をクリックします。

how-to-mixi-check-1.gif

↑ 次に「新規サービス追加」をクリック。

how-to-mixi-check-2.gif

↑ 必要な情報を入力します。

ここではURLのパターンを複数登録できるようになっているので、サブドメインがいくつかある場合も一つのサービス追加でまかなえます。もちろん別々に登録してもいいです。

how-to-mixi-check-3.gif

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

次にブログにボタンを設置します。

詳しいドキュメントは「技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)」にありますが、最も簡単な設置方法は以下のコードを書くだけ。

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

a タグの data-key 属性に先ほどのチェックキーを設定します。

ボタンが設置してあるページと異なるURLを指定したい場合は「data-url」属性を指定できます。省略するとそのページのURLが使われます。

「data-button」でボタンの種類を指定できます。

mixiチェックに登録する際に mixi が指定する独自のタグで「タイトル」や「本文」を指定することもできますが、少なくとも HTML の title タグと meta description が指定してあれば自動的にそれらの値が使われます。

ドキュメントを見ると、タイトルと本文以外にも、サムネイル画像や異なるデバイス向けへのURLなど色々と細かく指定できるようになっているようです。

これで設置完了。

how-to-mixi-check-4.gif

↑ 実際にボタンをクリックするとこんな感じでポップアップします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など