mixi関連のボタンをWordPressブログに付けてみる＆mixi Plugin for WordPress

2011年8月5日2011年9月13日

遅ればせながら、記事下部にmixi関連のボタンを色々付けてみました。

mixiチェック関連

公式は、ここのサイトになりますが、

技術仕様 << mixi Developer Center (ミクシィデベロッパーセンター)

この技術仕様のページだけだと、ちょっとわかりづらかったです。
手順を記しておきます。

1.mixiデベロッパー登録をすませる

これは既にやってた。こういうのを設置したい人は面倒臭がらず探してねw

2.サイトのチェックキーの取得

どこで取得すんだよ！!すでにキレ気味w→こちらに詳しく書いてありました。

★ブログにmixiチェックを設置 – F.Ko-Jiの「一秒後は未来」

mixi Developer Centerにログインして、mixiチェックボタンを載せたいサイトの内容を
新規サービスとして追加するって感じです。
完了するとチェックキーが発行される仕様になってます。

3.mixiチェック用のmetaタグを入れる

a要素にdata-keyはかならず入れないといけません。

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

自分がログインした状態では稼動確認ができないよー（＞＜）

で、稼動確認をしたところうまくいきません。
「データがありません。」というmixiのエラー小窓が出ます（ーー；

こちらのページにより衝撃の事実が発覚。
★» mixiチェックボタンでデータがありません。と出たとき。 WEB制作　技術録

デベロッパー登録をしているアカウントでログインしている場合、チェックボタンを押すと「データがありません。」と出るみたいです。
ということはmixiアカウントが2つ無いと、チェックできないですよねー。。。
なので、わたしはテストを友人にお願いしました。。。

なのでどなたかチェックお待ちしています～（爆）

もしかしたら、自分のサイトの方を改編しないといけないかも

少し気になったこのページなのですが、
基本的に記事の題名とブログ名が入ってればいいような気もしますが、
私は一回テストしてどういう風になるか見てみてヘンだったら改編しようと思います。

★「mixiチェックボタンの設置は数行のコードを書くだけ」はウソ #mm2010 | Gryng.me – html、CSS、Movable Type、JavaScriptのブログ

それから、F.Ko-Jiさんのブログには、チェックボタンの他に
３つのmixi関連のボタンがあったのが気になって、
真似して載せてみることにしました。こんな風にしたい！

mixi日記に書く＆mixiボイス関連

mixi日記に書くボタンについては、ちょうどこちらの記事に、
Wordpressそのままのタグが書かれていたので、思いっきり参考にさせて頂きましたm(_ _)m

★徒然 – ブログに「（mixi）日記を書く」ボタンを設置してみた

『mixi日記に書く』ボタンのソース

少し改変して、ブログタイトルも載せてみました。

<a href="http://mixi.jp/simplepost/diary?title=<?php the_title(); ?>&body=<?php the_title(); ?>｜<?php bloginfo('name'); ?> - <?php the_permalink(); ?>" target="_blank"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_diary_1.png"/></a>

mixiボイスボタンのソース

日記だと、titleとbodyの２つの内容を設定しないとですが、
ボイスはstatusという項目だけになりますね。
あと画像リンク先が変更になってるだけで、日記ボタンと概要は同じです。

<a href="http://mixi.jp/simplepost/voice?status=<?php the_title(); ?>｜<?php bloginfo('name'); ?> - <?php the_permalink(); ?>" target="_blank"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_voice_1.png"　/></a>

『mixiいいね』ボタン

こちらのページをまんま参考にしました。

【今日のボタン】公式の『mixiチェックボタン・mixiイイネ!ボタン』『Twitterツイートするボタン』『Facebookいいね!ボタン』『Google+1プラス1ボタン』等を設置する方法。まとめ

<iframe src="http://plugins.mixi.jp/favorite.pl?href=自分のサイトのアドレス&service_key=自分のチェックキー" scrolling="no" frameborder="0" allowTransparency="true" style="border:0; overflow:hidden; width:450px; height:80px;"></iframe>

カイ士伝さんによると、この仕様だと、自分がmixiにログインした状態で見ると、
自分のマイミクさんがチェックしたときに、下にプロフ写真が出てくる仕様になってるみたいです。
しかし、カウントするのはマイミクのみみたいです。それはちょっとなぁ・・・。
ブログ自体は解放されてるわけだし、そんな中途半端な制限をつけられても・・・。
なんかmixi自体と同じく、迷走気味の機能ボタンだなぁとは感じました。

mixiイイネボタンのみを表示させる用のソース

デフォルトがマイミクさんのプロフィール写真を表示させる用のスペースを表示させる仕様になっているので、
こちらは、ボタンとカウントのみを表示させる用のソースです。

<iframe src="http://plugins.mixi.jp/favorite.pl?href=<?php the_permalink(); ?>&service_key=［サービスキーを入れる］&show_faces=false"
            scrolling="no"
            frameborder="0"
            allowTransparency="true"
            style="border:0; overflow:hidden; width:60px; height:18px;"></iframe>

service_keyのあとに&show_faces=falseを付けるのがミソ。
&show_faces=trueがデフォルトのようなので、
このfalseの設定を付けないと写真用のスペースが消えないです。
高さもデフォルトが80pxでしたが、ちょっと上にズレてたので、
60pxにしたら揃いました。

またWordpressの個別記事のURLを表示させるタグは、