| ブログトップ | API関連 | SNS関連 |

mixiチェックの設置方法(mixi)

設置方法が結構面倒なのでメモ。

mixiチェックキーを取得する

1.まずはチェックキーを取得するために、「デベロッパー登録(法人の場合はパートナー登録)」を行います。

下記の「mixi Developer Center」から登録を行ってください。

※個人で行うデベロッパー登録の注意点
上記のサイトから登録を行うと携帯電話にメールが送信されてきます。(メールアドレス登録は携帯しか受け付けていないため)
そのメールに記述されているアドレスへ30分以内にアクセスし、ログインを行うと登録完了です。
PCからのメールを拒否する設定にしている場合は一時的に解除してください。

※法人で行うパートナー登録の注意点
申込用紙を郵送で送る必要があるため、時間に余裕をもって登録しましょう。

 

2.登録が無事完了したら、「mixi Developer Center」へアクセスし、ログインしてください。
ここでのログインアカウントはmixiと同じです。
ログインすると再びパスワードを聞かれますので、もう一度入力します。

 

3.ログインが成功すると、Developer Dashboard画面になります。

 

4.画面上部にある「mixi Plugin」タブをクリックし、登録サービス一覧を開いてください。

 

5.画面左にある「新規サービス追加」をクリックしてください。新規サービス登録フォームが表示されます。

 

それぞれのフォームを入力します。たとえばこのサイトだと

となります。

 

6.入力後、利用規約に「同意する」にチェックを入れ、「入力内容を確認する」ボタンを押してください。次の確認画面で問題がなければ「作成する」ボタンを押してください。(後で編集も可能です。)

 

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

以上でキーの取得完了です。

 

次に該当するウェブサイトのページにmixiチェックボタンを設置します。

1.headタグ内に以下を追加してください

<meta property="og:title" content="~" />
<meta property="og:description" content="~" />

  • 「ot:title」はページのタイトル+サイト名
  • 「og:description」はページの概要

が入るようにしてください。

 

2.htmlタグに以下を追加してください

xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#"

例)こんな感じ↓

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">

 

3.ボタンを設置する場所に以下のタグを入力します。

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

追記:classが抜けていたせいで、ボタンが正常に表示されてませんでした。すみません・・・;(2010年12月15日)

  • data-key:先ほど取得したmixiチェックキーを記述します。
  • data-url:該当ページのURLを入力します。空の場合は自動的にそのページのURLになります。
  • data-button:ボタンのタイプを記述します。タイプは"button-1"~"button-5"まであります。

以上です。

mixi公式の設置方法ページはこちら。

mixi チェックボタンの設置(PC 向け)

 

参考サイト

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

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年11月25日 | コメント(0) | トラックバック(3) | API関連 | SNS関連

トラックバック

トラックバックURL

トラックバック一覧

[...] mixiチェックは見習うべき! [...]

[...] mixiチェックの設置方法と違い、こちらは超簡単! [...]

[...] mixiチェックの設置方法の7.まではやり方が同じです。 [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記