Home > Tips > ページの作成と編集

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

Last Update: 2011/05/14 15:02:14

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

はじめに

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

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

操作手順

  1. JavaScript SDKを導入するために、開発者として登録します。
    register your application
  2. コードを取得して、とりあえずサンプルコードから新規ページを作ってテストします。
  3. 検索と置換ツールにて、<html>タグの要素を書き換えます。［検索と置換］ダイアログボックスを表示するには、Ctrl+HキーでOKです。
    • 検索文字列 
      <html xmlns="http://www.w3.org/1999/xhtml">
    • 置換後の文字列
      <html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:fb="http://www.facebook.com/2008/fbml">
    • 検索対象は「すべてのページ」にします。
    • ソースコード内を検索する にチェックをつけます
    • ［すべて置換］ボタンをクリックします。
  4. ダイナミックWebテンプレートを開き、コードビューに切り替えて</body>タグの前行にサンプルコードから以下のコードをコピペ（appIDは自分のものに置き換えてください） 
    <div id="fb-root"></div> 
<script type="text/javascript"> 
  window.fbAsyncInit = function() { 
    FB.init({appId: 'xxxxxxxxxxx', status: true, cookie: true, 
             xfbml: true}); 
  }; 
  (function() { 
    var e = document.createElement('script'); 
    e.type = 'text/javascript'; 
    e.src = document.location.protocol + 
      '//connect.facebook.net/ja_JP/all.js'; 
    e.async = true; 
    document.getElementById('fb-root').appendChild(e); 
  }()); 
</script>
  5. それぞれの記事ページをコードビューで開き、コメントエリアを挿入したい場所に以下のコードを記述します。 
    <fb:comments></fb:comments>
  6. そのあと、ダイナミックWebテンプレートからWebページを新規作成する場合、必要な場所に手順5の操作をすればOKです。

appIDを確認するには

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

コメント

関連リンク

▲このページのトップへ