*Facebookコメント連携テスト [#u4c8c195] #setlinebreak(on) 以下、まだ編集中。 #contents **0.最初に [#g6153193] #html(){{ <div style="color:red;margin:10px 0px 0px 20px;"> 開発者登録を行うには、携帯の連絡先登録を行う必要があるが、8桁の確認コードが送られてくるのに、6桁しか入力できなかったり。。<br /> など不具合が満載なので、そういう時はPC画面のアカウント設定から携帯番号を追加すると、うまくいく・・・場合もある。<br /> <span style="text-decoration:underline">なんせ、やり方は何でも良いので、モバイルの連絡先が登録できさえすれば良い。</span><br /> </div> }} #html(<div style="margin-left:20px;">) https://www.facebook.com/settings?tab=mobile #html(</div>) #html(<div style="padding:10px;border:1px solid #000000;color:red;margin:0px 0px 0px 20px;">) &ref(fb_setting0.png,nolink); #html(</div>) #html(<div style="margin-left:20px;color:red;">) ※この画面は確認コードが8桁入力できる。 #html(</div>) **1.開発者登録 [#g6153193] #html(<div style="margin-left:20px;">) (1) facebookのログインし、画面下の ”開発” のリンクを押下。 &ref(fb_setting1.png,nolink); &br; (2) 画面右上から ”Register Now” を押下。 &ref(fb_setting2.png,nolink); &br; (3) ”アカウントの認証を実行” を押下。 &ref(fb_setting2_2.png,nolink); &br; (4) パスワードを入力して ”続行” を押下。 &ref(fb_setting2_3.png,nolink); &br; (5) 携帯のメールアドレスを入力して ”承認” を押下。 &ref(fb_setting2_4.png,nolink); &br; (6) 携帯に以下のようなメールが送られてくるので、リンクをクリックする。 #html(){{ <div style="margin:0px 0px 0px 20px;padding:10px;border:1px solid #000000;width:300px;"> Facebookモバイル確認コード:XXXXXX<br /> または <span style="color:blue;text-decoration:underline;">http://fb.me/XXXXXXXXXX</span> へ移動<br /> </div> }} &br; (7) 携帯でログイン後に表示される以下のような画面で、[電話番号を追加] をクリックする。 #html(){{ <div style="margin:0px 0px 0px 20px;padding:10px;border:1px solid #000000;width:300px;"> 携帯番号を確認<br /> 電話番号「xxxxx@xxxxx」をアカウントに追加しますか?<br /> <div style="background:blue;color:#ffffff;width:120px;text-align:center">電話番号を追加</div> </div> }} &br; (8) 今度は再度PCから開発者画面に移動し ”Register Now” を押下。 &ref(fb_setting2.png,nolink); &br; (9) プライバシーポリシーの確認にチェックし、”続行” を押下。 &ref(fb_setting2_7.png,nolink); &br; (10) ”スキップ” または ”続行” を押下。(どっちでも良い) &ref(fb_setting2_8.png,nolink); &br; (11) ”Done” を押下。 &ref(fb_setting2_9.png,nolink); &br; #html(</div>) **2.アプリ登録 [#sad1d096] #html(<div style="margin-left:20px;">) &ref(fb_setting4.png,nolink); &br; &ref(fb_setting5.png,nolink); &br; &ref(fb_setting6.png,nolink); &br; &ref(fb_setting7.png,nolink); &br; #html(</div>) **3.部品(いいねボタン、コメント欄)のソース取得 [#ze570ad1] #html(<div style="margin-left:20px;">) http://developers.facebook.com/docs/reference/plugins/comments/ &br; &ref(fb_setting8.png,nolink); &br; &ref(fb_setting9.png,nolink); &br; #html(</div>) **4.インサイト登録用のmetaタグ取得 [#c6c4a981] #html(<div style="margin-left:20px;">) http://www.facebook.com/insights/ ※「Webサイトのインサイト」を押下して表示されたメタタグを取得し、画面はそのまま置いておく。 (画像を貼付ける予定) #html(</div>) **5.サイトへソース貼付け [#u681e19f] **5.サイトへソース貼付け&サーバにアップロード [#u681e19f] #html(<div style="margin-left:20px;">) #mycode(){{ <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> }} #html(){{ ※data-hrefに指定したURLに引数(?以降の部分)が含まれる場合にうまく認識しない事がある。<br /> data-href を省略すると動作はするが警告が出る。<span style="color:red;">→ mod_rewrite などを要検討か。</span><br /> }} #html(</div>) **6.インサイト登録 [#c6c4a981] **6.インサイト登録 ※4の続き [#m35e9eb1] #html(<div style="margin-left:20px;">) http://www.facebook.com/insights/ ドメインを入力して「インサイトを取得」を押下。 (画像を貼付ける予定) #html(</div>) **7.コメントモデレーションツールの通知設定 [#m211808b] #html(<div style="margin-left:20px;">) #html(http://developers.facebook.com/tools/comments?id=アプリID) #html(</div>) **8.コメントのテスト投稿 [#r847b32f] #html(<div style="margin-left:20px;">) #html(</div>) **9.投稿されたコメントの確認 [#r847b32f] #html(<div style="margin-left:20px;">) #html(http://developers.facebook.com/tools/comments?id=アプリID) #html(</div>) #html(){{ <hr style="margin-top:40px;" /> <div style="clear:both;margin:40px 0px 40px 0px;"> <div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div> <div class="fb-comments" data-num-posts="2" data-width="470"></div> </div> }}