Web > Resources > CSS & JavaScript Tips

WebページにFacebookのコメントボックスを挿入するには

JavaScript

通常のWebサイトにFacebookのコメントボックスを挿入しておくことで、閲覧者がいつでもその記事にコメントを投稿できます。

はじめに

Expression WebでWebサイトを作ったけれども、それぞれの記事に対して閲覧者がどういう反応があるのか知りたくなりますよね。

インタラクティブなサイトにするためには、FacebookのコメントボックスをWebページに挿入するといいでしょう。ただし、Facebookのアカウントをあらかじめ取得し、そのAPIを利用するために登録が必要となります。

操作手順

JavaScript SDKを導入するために、開発者として登録します。
register your application
コードを取得して、とりあえずサンプルコードから新規ページを作ってテストします。
ダイナミックWebテンプレートを開き、コードビューに切り替えて、<head>と</head>の間にmetaタグを挿入します（黄色でマーキングしてる部分はそれぞれ自分のものに置き換えてください）。以下の二つのmetaタグを挿入することによって、ページ上のコメントのモデレータ機能が利用できるようになります。
```
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}">
```

</head>タグの前行にサンプルコードから以下のコードをコピペ（your-app-idは自分のものに置き換えてください）

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.1'
});
};

(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

それぞれの記事ページをコードビューで開き、コメントエリアを挿入したい場所に以下のコードを記述します。data-width="100%" にすることで、レスポンシブWebデザインに対応できるようになります。
```
<script type="text/javascript">
var url = location.href;
    document.write('<div id="fb-root"></div>');
    document.write('<div class="fb-comments" data-href="' + url + '" data-numposts="5"
    data-width="100%" data-colorscheme="light"></div>'
</script>
```
そのあと、ダイナミックWebテンプレートからWebページを新規作成する場合、必要な場所に手順5の操作をすればOKです。

appIDを確認するには

マイアプリケーションにアクセスして、作成したアプリケーションを開いて、「アプリケーションID」を確認します。

WebページにFacebookのコメントボックスを挿入するには

はじめに

操作手順

appIDを確認するには

関連リンク

コメント