mixiチェックに投稿するだけならOGPの設定はいらない。
今日のブログは、設定の敷居が高いと言われるmixiチェックのボタンの実装です。デベロッパー登録するのが面倒で、今まで避けてきましたが、mixiはなんといっても日本最大のソーシャルメディアサービスですので無視するわけにもいきません。
重い腰をあげてブログに設定してみましたら、案ずるより産むが易しとはこの事ですね。登録から動作確認まで30分とかからずにできました(笑)。
ところで、mixiチェックボタンを導入したブログ等を読むと「名前空間」とか「OGP（Open Graph protocol）」という言葉がでてきますが、mixiチェックに投稿するだけであれば、OGPの設定をする必要はありません。
また、mixiのコードはURLを指定しなければ現在開いているページを投稿できますので、CMS別、ブログ別の設定はとくに必要ありません。
◇たった30分努力すれば、mixiボタンはあなたのブログに…
- デベロッパーの登録 10分
- mixi チェックキーの取得 10分
- CMSへの実装 10分
- 表示の確認
mixiチェックキーさえ用意すれば、キーコードを差し替えるだけで実装可能なコードも用意してます(笑)。必要時間は、ブログを読み工程を把握するだけなら5分以下、実際に作業して動作確認するにしても登録から実装まで30分程度です。限りなくわかりやすく解説しましたので、ぜひmixiチェックボタンを設置してPV向上に役立ててください。
デベロッパーの登録
mixiチェックボタンを動作させるためには、最初にmixiのデベロッパー登録が必要になります。連絡先の記述や携帯電話の確認が必要となりますので、やや面倒ですが、手順書がきちんとしておりますので、それさえしっかり読んでおけば、どなたでもできる簡単な作業です。
◇デベロッパー登録へアクセスする
最初にmixi Developer Centerの個人用デベロッパ登録ページへアクセスしてください。このページには登録の手順が丁寧に書かれてますから、まずはしっかり読みましょう。手順を把握したら、「デベロッパー登録画面」に進んでください。
- デベロッパー登録（個人の方） << mixi Developer Center
http://developer.mixi.co.jp/about-platform/com/developer
◇デベロッパー登録までの作業
- デベロッパー登録画面 にアクセスし、「Developer登録」ボタンを押して先に進みます。
- (上記)画面必要事項を記入して、「入力内容を確認する」ボタンを押します。
- 確認画面で入力内容に間違いなければ、「登録する」ボタンを押します。
- 携帯、またはスマートフォンのメールアドレスを入力する画面が表示されるので、携帯電話のメールアドレスと入力してしてください。
- 仮登録完了の画面が表示されたら、携帯にメールが届きますのでしばらく待ってください。
- 登録した携帯に「＊＊さん、こんにちは。、下記URLをクリックsiteDeveloper登録を完了させてください。…」というメールがmixi@mixi.jpから届きますので、URLをクリックください。
- mixiへのログイン後以下の完了画面が表示されることでデベロッパー登録が完了します
以上で登録は完了です。mixi チェックキーの取得をしましょう。
mixi チェックキーの取得
下記の解説通りに行えば10分とかからずに終わります。
1. mixi Developer Centerの開発者用画面にログイン
mixi Developer Centerにアクセスして右上の「ログイン」をクリックしてください。
- mixi Developer Center
http://developer.mixi.co.jp/
2. パスワードを入力
登録時に記入したパスワードを入力して「ログイン」をクリックします。
3. mixi Pluginを開く
グローバルメニューの「mixi Plugin」をクリックください。
4. 新規サービスを追加
左サイドメニューの新規サービス一覧にある「新規サービス追加」をクリックしてください。
5. 入力事項の記入
利用するサイトの、サイト名、URL、ドメイン名を記入します。たとえばこのブログならば、と記入します。
- サービス名：世界中の 1%の人々へ
- サービスのURL：http://www.dakiny.com
- 許可ドメインリスト：dakiny.com
6. 入力事項の確認
記入に間違いがなければ「作成する」をクリックします。
7. 識別キーをコピーして保存
識別キーをテキストエディタと等に保存してください。いろいろと表示されてますが「識別キー」をコピーしたら後はこのペ＾－ジでは何もする必要ありません。
次はコード設定をおこないます。
※注意：「イイネ！ボタンHTMLタグ発行」と書いてありますが、mixiチェックボタンのコードはこのページにはありません。ここで余計な作業をする人はゴールが遠ざかります（苦笑）。
mixiチェックボタン コードの設定
いよいよ実装ですが、あっけないほど簡単です。
1. 基本コードをコピー＆ペースト
mixi Developer Centerのmixi チェックの技術仕様のページへアクセスします。まずは基本mixi チェックボタンの設置（PC 向け）」にある2行のコードをコピー＆ペーストしてください。
- 技術仕様 < mixiチェック < mixi Developer Center
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check
◇基本コード
<a href="http://mixi.jp/share.pl" class="mixi-check-button">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script> 2. ボタン画像の選択
mixiチェックボタンで利用できるボタンは5種類あります。好みのボタンを選んでください。
3. コードの記述とテンプレートへの設置
button-2と識別キーコードのdataを入れてコードを書いてみます。
- data-key="00adc1000c775b605f16e4b0508334ef6a3024a2"
- data-button="button-2"
◇Movable Typeに埋め込むコード
<a href="http://mixi.jp/share.pl" class="mixi-check-button"
data-key="00adc1000c775b605f16e4b0508334ef6a******"
data-button="button-2">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script> テンプレートのmixiチェックボタンを表示したい場所に貼り付けます。dataの記述がよくわからない方は赤字部分の識別コードをご自身の識別キーコードに差し替えて利用してください。
※オリジナルの識別コードを取得してに差し替えてください。
4. オリジナルサムネールの表示
オリジナルサムネールを作ることにより、画像のない文章の認知度をあげたり、意図しない画像がサムネールになりイメージダウンになることを防いでくれると共に、誰の記事かが明確になりますので一覧で並んだ場合認知されやすくなります。
1. 76px×76pxのサムネール画像をJPG,PNG,GIFのいずれかで作ってください。
2. 画像をサーバーの任意の場所にアップロードしてください。
3 .ボタンを設置したテンプレートの<head>内に下記コードを追加してください。
これだけしておけば、mixiの投稿画面にこの画像が表示されます。この設定がない場合はブログで利用している任意の画像がサムネールに利用されます。
<link rel="mixi-check-image" href="<$mt:BlogURL$>archives/dakiny-s.png" />
コードを埋めたら保存して、MTの方は再構築してみてください。
以上で作業は完了です。名前空間の宣言やmetaタグはmixiへの投稿をおこなうだけであれば、とくに名前空間をhtml要素に追加したり、meta要素を追加する必要はありません。
さて、結果を確認しましょう。
動作の確認
実際にmixiに投稿して、どのように表示されるのかを確認してみましょう。
1. 確認
ブログ記事を開いて、mixiチェックが表示されたので、動作確認をします。mixiチェックボタンをクリックしてみてください。
※このブログのタイトル下のボタンで確認してもらってもかまいません。
2. サムネール画像の表示の確認
サムネールなにか適当に書いて「チェックする」をクリックしてください。「mixiチェックの登録が完了しました。」という表示に切り替わりりますので、「自分のチェック一覧で確認する」をクリックしてください。
3. mixiチェック一覧での表示の確認
mixiチェックの一覧表示です。オリジナルサムネールが表示されているのが理解できると思います。
4. mixiチェック一詳細ページの表示の確認
画像では、Movable Typenの設定をそのまま読んで表示してくれています。ご覧のように、とくに凝ったことをする必要がないならば、名前空間の宣言やmetaタグを追記する必要はありません。
参考になれば幸い。
投稿者: Dakiny 日時: 2011年4月19日 14:40 | パーマリンク | トラックバック (2)
トラックバック
このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/2159
※文章内容と関係のないトラックバックは固くお断り。
この一覧は、次のエントリーを参照しています: 最小努力で最大効果の望めるmixiチェックボタンの簡単設定！:
» mixiチェックボタンの設置、思ったより簡単にできた... from ホームページ情報ネット - Blog（ブログ）
私は、これまで｢mixiチェックボタン｣をブログに導入するのが面倒だな～と思って... [詳しくはこちら]
トラックバック時刻: 2011年9月19日 04:50
» ソーシャルメディア用ボタン（いいね、ツイート、mixiチェックetc）まとめ from muzin
人から尋ねられたので調べたまとめ。 ソーシャルメディア（Facebook, twitter, mixi, はてな）などが提供する ボタン（いいね、ツイート... [詳しくはこちら]
トラックバック時刻: 2012年1月13日 19:40
