Mixi チェックの実装方法 (How to Embed Mixi Check)

2010年9月15日 at 16:28

取り急ぎ〜。超手抜き解説。初・中級者以上向きの記事です。

初級者の方は、記事の前半だけを読んでください。後半部分はちょっと難しい。



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Mixi チェックキーの取得方法
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


まずは自分のサイトをMixiに登録する必要があります

【法人】
http://developer.mixi.co.jp/connect/developer_registration/partner

【個人】
http://developer.mixi.co.jp/connect/developer_registration/developer



そして、

http://sap.mixi.jp/

より、パスワード(個人であればMixiと同じパスワード)を入力します

ページ左上、Mixiロゴの直下にある、タブメニューから「Mixi Plugin」をクリック

「新規サービス追加」をクリック

・サービス名 = 自分のサイトの姪
・URL = メインのURL( http:// 付き)
・URL許可リスト = 自分のサイトをすべて(「 http:// 」なしで)
・「同意する」をチェックして、
・入力内容を確認する→作成する

そこで「チェックキー」を取得できます。



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■concrete5 への埋め込み方法
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Mixiチェックボタンを設置したい場所に

──────────────────────────────
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【認証チェックキー】">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
──────────────────────────────

をテーマに直接書き込んだり、HTMLブロックや、共通下書きブロックとして保存して、自分の好きな場所に配置します。




※ 初級者向けここまで!コレより下は中級者以上



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Mixi をもっと詳しく
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

この他にも
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check

より、ページタイトルを変更したり、ページリストに組み込むなど、色々オプションが加えられます。

これより下の説明は、Facebookの組み込み方法を一部継承しています
http://concrete5-japan.org/community/forums/development/post-908/

ということで、どなたか、GREEの「いいね」ボタンに挑戦して、ここのフォーラムに投稿していただけませんか〜?



━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ HTMLタグ最初に宣言を追加
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下の宣言を HTML タグ内に追加します
──────────────────────────────
xmlns:og="http://ogp.me/ns#"
xmlns:mixi="http://mixi-platform.com/ns#"
──────────────────────────────

例:
──────────────────────────────
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
xmlns:mixi="http://mixi-platform.com/ns#" xml:lang="<?php echo LANGUAGE?>" lang="<?php echo LANGUAGE?>">
──────────────────────────────


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ タイトルをカスタマイズ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<meta property="og:title" content="<?php echo htmlspecialchars($c->getCollectionName(), ENT_COMPAT, APP_CHARSET); ?>" />
<meta property="og:site_name" content="<?php echo SITE;?>" />
<meta property="og:description" content="<?php echo htmlspecialchars($pageDescription, ENT_COMPAT, APP_CHARSET)?>" />

等。また、「og:」ではなく「mixi:」も宣言でき、「mixi:」のほうが優先されます




━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ページリストに追加する方法
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

────────────────────────────────────────
<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【認証チェックキー】 title="<?php echo $title;?>" description="<?php echo $cobj->getCollectionDescription();?>" data-url="<?php echo BASE_URL . DIR_REL . $nh->getLinkToCollection($cobj);?>">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
────────────────────────────────────────

ページリストブロックに追加するときの例です。view.php もしくは、カスタムテンプレートで使用してください。