Facebookコメント連携テスト

以下、まだ編集中。

0.最初に

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

fb_setting0.png

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

1.開発者登録

(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

2.アプリ登録

fb_setting4.png


fb_setting5.png


fb_setting6.png


fb_setting7.png

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

4.インサイト登録用のmetaタグ取得

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

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

5.サイトへソース貼付け&サーバにアップロード

<head>
・
・
<meta property="fb:admins" content="facebookのユーザID"/>     <!-- 「4.インサイト登録用の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 などを要検討か。

6.インサイト登録 ※4の続き

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

7.コメントモデレーションツールの通知設定

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

8.コメントのテスト投稿

9.投稿されたコメントの確認

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


添付ファイル: filefb_setting0.png 1件 [詳細] filefb_setting2_9.png 2件 [詳細] filefb_setting2_8.png 3件 [詳細] filefb_setting2_7.png 2件 [詳細] filefb_setting2_6.png 1件 [詳細] filefb_setting2_5.png 1件 [詳細] filefb_setting2_4.png [詳細] filefb_setting2_3.png 1件 [詳細] filefb_setting2_2.png 1件 [詳細] filefb_setting2.png 3件 [詳細] filefb_setting9.png 1件 [詳細] filefb_setting8.png [詳細] filefb_setting7.png 1件 [詳細] filefb_setting4.png 3件 [詳細] filefb_setting6.png 3件 [詳細] filefb_setting5.png 3件 [詳細] filefb_setting3.png 1件 [詳細] filefb_setting1.png 2件 [詳細]

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-11-18 (日) 12:55:21 (2865d)