はてなダイアリーにmixiチェックを設置してみた

先日mixiからmixiチェックというサービスがリリースされましたが、早速この日記にもチェックボタンを設置してみました。
サイドバー中の以下のアイコンをクリックすると現在閲覧中のページをチェック出来ます。

GoogleGadgetsとして貼り付ける

mixiチェックは、はてなの対応ブログパーツにまだ入っていないので、管理画面のデザイン編集でmixiのコードをそのまま貼り付けても機能しません。

そこで毎度のことながらgadget.xmlを作成してGoogle Gadgetsとして貼り付けることにしました。
貼り付け用コードはここから取得でき、取得したコードの幅や高さ枠線などの設定をこの日記用に修正したのが以下になります。*1

<script src="http://www.gmodules.com/ig/ifr?url=http://www.kawaz.jp/tmp/mixi_check/gadget.xml&amp;synd=open&amp;w=130&amp;h=25&amp;title=&amp;border=%23ffffff%7C0px%2C0px+solid+%23ffffff&amp;output=js"></script>

あとGoogle Gadgetsを貼り付ける際に、サイズを小さく指定したらiframeのスクロールバーが出て困るとか、ガジェットの追加ボタンが出ちゃうのがカッコ悪い…、という場合はスタイルシートに以下を追加しておくとよいです。

/* Google Gadgetsのスクロールバーを表示しない */
.ig_reset iframe { overflow: hidden; }
/* Google Gadgetsの追加ボタンを表示しない(但しIE8以下では機能しない) */
table.gadget tr:nth-child(4) { display: none; }

mixi側の設定について

mixiチェックの使い方は比較的簡単で、mixiチェックの技術仕様に書いてある通りのタグを貼り付けるだけですが、事前準備としてmixi Developper Centerに開発者登録してログインしてmixi Pluginにサービス追加をする必要があります。
今回作成したはてダ用のmixiチェックパーツの設定は以下のようにしてあります。

タイトルとかをはてダから取得する必要があるため、許可するURLに d.hatena.ne.jp を設定しておくのがポイントです。
はてダで使う限りは前述のコードを貼り付けるだけでOKですが、「?をチェックする」という定型文等を修正したい場合や許可するURLを増やしたい場合やボタンのタイプを変更したい場合などは、自分で開発者登録してサービス追加してgadget.xmlを作成してどこかに設置すれば良いでしょう。

*1:本当はGoogleGadgetでは他にもw=autoとか使えるパラメータがあるんだけど、はてな側のタグチェックが妙に厳しくてGoogleGadgetsのコード取得ページから取得できるコードのパラメータを並べ替えや過不足なく書かなきゃいけないのが不便…。