<< twitter投稿ボタン設置 | TOP | 梅雨の那須旅行 >>

mixiチェックボタン設置
前回の続きです。
ちっとも意味が分からなかった、JUGEM独自ドメインでのmixiチェックボタンの設置方法ですが、色々見回って試行錯誤の末、どうやら成功したみたいです。
なにげにmixiチェックって使ったこと無いんですが、せっかくなので付けてみました。
が、やっぱり使わないような ※2013年7月に外しちゃいました。

以下、自分用メモです。
(1)mixi Developer Centerに登録する。
リンク先ページ右上の「ログイン」から自動でmixiの認証に飛びます。
そこから名前・住所・電話番号・携帯メール認証を得て、ログイン完了。(めんどくさい!)

(2)ログイン後mixi pluginの新規サービスを登録する。
・サービス名⇒サイト名 (例:nisekobox)
・サービスのURL⇒サイトURL (例:http://blog.nisekobox.com/)
・許可するドメイン⇒httpを抜いたURL (例:blog.nisekobox.com)
規約に同意で登録すると識別キーが表示。これが必要です。
「wwwを付ける」と解説されていたサイトさんもありましたが、ウチの場合、それをするとエラーになりました。サーバーの設定とかによるのかなぁ??

(3)mixiチェックボタンを入れたい位置に、以下のタグを挿入。
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="識別キー" data-button="アイコン画像指定" data-url="{entry_permalink}">mixiチェック</a> <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
アイコン画像は5種から選択可。mixi Developer Center | 技術仕様を参照のこと。
ウチが設置したのは「button-1」なので、「botton-1.gif」と指定。
欲言えばもっとちっちゃいアイコンが良かったけど…そのうち自作して入れ替えようかな。
なにげに一番重要なのは「data-url="{entry_permalink}"」を入れることでした。
これがないと上手く作動しません。

(4)<html>内にmixiの名前空間の宣言を挿入する。
xmlns: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#">
となってます。

(5)チェック時に表示されるタイトルと本文の指定タグを、<head>〜</head>内に挿入。
<meta property="og:title" content="{site_title}" />
<meta property="og:description" content="{entry_description}" />
なんだか重くなるし、本文は表示する必要ないかな?と思ってウチでは入れませんでした。
入れないだけだとサイトの説明文をまんま拾うので、
<meta property="og:description" content="" />と空タグを挿入。

これで完了。
「携帯電話別デバイス指定」とか「サムネイル画像指定」とか色々あるけんど、そこまでは必要なさげだったので、目が滑って読む気しなかったこともあり、放置です
そのうちいじくることは…………ないかな


ちなみに、mixiチェックアイコンの仕様なのかなんなのか、アイコンが上寄せになっちゃうので、他のアイコン(拍手とtwitter)との整合に苦労……。
どう頑張っても、真ん中寄せにならない!!!!
ん?
mixiチェックがテコでも上寄せから動かないんなら、他を上寄せにしてやればいいんでは??
てことで、拍手とtwitterに、「align="top"」を指定。
隣りに並べてるカテゴリ名etc.は、<span>で囲って、CSSで「vertical-align: top;」にて指定しましたです。


[1/26追記]
#sequelが付くエントリー(記事の続きがあるもの)はうまく動いてくれてないようで…。
原因調査中です。

[1/30追記]
こっちは動いたり動かなかったりなのに、北海道旅行記は問題なく動くのが謎だったので、
HTMLを今一度上から下まで見直したら、ちゃんと動くようになりました。
直したと言っても、なんとなぁく整頓しただけで、基本的にタグ間違いは無かったのだけど…。
ツイッターの表示パーツを変えたり、{ad}タグを移動させたり、動かしたのはその程度。
謎ですが、動くので良しとします
:: 雑記(カスタマイズ) | comments(2) | trackbacks(0) | posted by 二瀬古 
コメント
自分のブログに付けてみたくて検索したら
こちらの説明が非常に分かりやすくて参考になりました。
ありがとう。
サトピンヤハ | 2011/05/07 11:00 PM
コメントありがとうございます。
自分用メモではありますが、お役に立てれば幸いです。
二瀬古(管理人) | 2011/05/07 11:50 PM




※文中にメルアドやURLがあると弾かれます。管理人への連絡は、こちらに記載のメルアド宛にお願いします。
トラックバック URL
http://blog.nisekobox.com/trackback/302