TumblrにFacebookコメント欄を設置する方法

シンジです。先日Tumblrにコメント欄を設置するとして、DISQUSを設置しましたが、Facebookのコメント欄が欲しいなぁと思って設置しました。その方法です。

Facebook Developersにアクセスし、Add New App をクリック

https://developers.facebook.com/

ウェブサイト をクリック

右上の Skip and Create App ID をクリックする

Display Nameにウェブサイトのタイトル入れて Create App ID する

URLと幅をいい感じに入力して Get Code する

1のコードと、2のコード、両方とも使いますのでメモりましょう。

Tumblrにコードを設置する、コード1

HTML編集モードまで行ったら、1のコードは

<body class="{block:IndexPage}page-index{/block:IndexPage}{block:PermalinkPage}page-permalink page-{PostID}{/block:PermalinkPage}">

を検索して、その下に入れる。こんな感じ。

<body class="{block:IndexPage}page-index{/block:IndexPage}{block:PermalinkPage}page-permalink page-{PostID}{/block:PermalinkPage}">

    <!-- Facebook Script Start -->
    <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/sdk.js#xfbml=1&appId=ここのIDはみんな違うよ&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- Facebook Script End -->

Tumblrにコードを設置する、コード2

これが好みの問題もあるのですが、イイネボタンとかその辺を探して、その下あたりに入れるのがいい感じです。

{block:PermalinkPage}

を入れて、これで閉じるのがポイントです。

{block:PermalinkPage}

    <!-- Facebook Comment Start -->
    <div style='max-width:100%;margin:1.5em 0 1em;'>

    <div class="fb-comments" data-href="{Permalink}" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

    </div>
    <!-- Facebook Comment End -->

    <style>iframe.fb_ltr {width: 100% !important;}</style>

{/block:PermalinkPage}

設置は以上です。ブラウザと、スマホからきちんと表示されるか確認しながらやってみると良いです。

コメントされたら通知が来るようにする

そのままだとコメントされても通知が来ないので、これを設定します。
以下のURLにアクセスし、Setting をクリックします。

https://developers.facebook.com/tools/comments

モデレータに自分を追加して、右下の保存をクリック

以上です〜うまく動くといいですね!(Facebookは仕様変更が激しいので)