Facebookコメント連携テスト †

以下、まだ編集中。

↑

０．最初に †

開発者登録を行うには、携帯の連絡先登録を行う必要があるが、8桁の確認コードが送られてくるのに、6桁しか入力できなかったり。。
など不具合が満載なので、そういう時はPC画面のアカウント設定から携帯番号を追加すると、うまくいく・・・場合もある。
なんせ、やり方は何でも良いので、モバイルの連絡先が登録できさえすれば良い。

fb_setting0.png

※この画面は確認コードが８桁入力できる。

↑

１．開発者登録 †

(1) facebookのログインし、画面下の ”開発” のリンクを押下。
fb_setting1.png


(2) 画面右上から ”Register Now” を押下。
fb_setting2.png


(3) ”アカウントの認証を実行” を押下。
fb_setting2_2.png


(4) パスワードを入力して ”続行” を押下。
fb_setting2_3.png


(5) 携帯のメールアドレスを入力して ”承認” を押下。
fb_setting2_4.png


(6) 携帯に以下のようなメールが送られてくるので、リンクをクリックする。

Facebookモバイル確認コード：XXXXXX
または http://fb.me/XXXXXXXXXX へ移動



(7) 携帯でログイン後に表示される以下のような画面で、[電話番号を追加] をクリックする。

携帯番号を確認
電話番号「xxxxx@xxxxx」をアカウントに追加しますか？
電話番号を追加



(8) 今度は再度PCから開発者画面に移動し ”Register Now” を押下。
fb_setting2.png


(9) プライバシーポリシーの確認にチェックし、”続行” を押下。
fb_setting2_7.png


(10) ”スキップ” または ”続行” を押下。（どっちでも良い）
fb_setting2_8.png


(11) ”Done” を押下。
fb_setting2_9.png

↑

２．アプリ登録 †

fb_setting4.png


fb_setting5.png


fb_setting6.png


fb_setting7.png

↑

３．部品(いいねボタン、コメント欄)のソース取得 †

↑

４．インサイト登録用のmetaタグ取得 †

http://www.facebook.com/insights/

※「Webサイトのインサイト」を押下して表示されたメタタグを取得し、画面はそのまま置いておく。
（画像を貼付ける予定）

↑

５．サイトへソース貼付け＆サーバにアップロード †

<head>
・
・
<meta property="fb:admins" content="facebookのユーザID"/>     <!-- 「４．インサイト登録用のmetaタグ取得」で表示されたもの -->
<meta property="fb:app_id" content="アプリID"/>
・
・
</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

・
・

<!-- コメント欄 -->
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>

<!-- いいねボタン -->
<div class="fb-like" data-href="http://example.com/" data-send="false" data-width="450" data-show-faces="true"></div>
※data-hrefに指定したURLに引数(?以降の部分)が含まれる場合にうまく認識しない事がある。
　data-href を省略すると動作はするが警告が出る。→ mod_rewrite などを要検討か。
↑

６．インサイト登録　※４の続き †

http://www.facebook.com/insights/
ドメインを入力して「インサイトを取得」を押下。
（画像を貼付ける予定）

↑

７．コメントモデレーションツールの通知設定 †

http://developers.facebook.com/tools/comments?id=アプリID
↑

８．コメントのテスト投稿 †

↑

９．投稿されたコメントの確認 †

http://developers.facebook.com/tools/comments?id=アプリID
添付ファイル: filefb_setting0.png 197件 [詳細] filefb_setting2_9.png 194件 [詳細] filefb_setting2_8.png 204件 [詳細] filefb_setting2_7.png 13件 [詳細] filefb_setting2_6.png 183件 [詳細] filefb_setting2_5.png 193件 [詳細] filefb_setting2_4.png 202件 [詳細] filefb_setting2_3.png 202件 [詳細] filefb_setting2_2.png 13件 [詳細] filefb_setting2.png 206件 [詳細] filefb_setting9.png 209件 [詳細] filefb_setting8.png 190件 [詳細] filefb_setting7.png 207件 [詳細] filefb_setting4.png 201件 [詳細] filefb_setting6.png 203件 [詳細] filefb_setting5.png 192件 [詳細] filefb_setting3.png 195件 [詳細] filefb_setting1.png 207件 [詳細]
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-11-18 (日) 12:55:21 (4169d)