LokkaにFacebookコメントを設置する

Facebook Javascript SDKをjQueryを使って読み込む

コメントプラグインの設置には、Facebook Javascript SDKが必要。

public/theme/theme-name/entry.erb

の末尾に以下を追加。
jQueryとFacebook Javascript SDK用のプラグインを読み込んでる。

< % content_for :header do %>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="<%= @theme.path %>/js/jquery.facebook.js"></script>
< % end %>

Facebook Javascript SDK用のプラグインのコードは以下の通り。

jQuery(function($) {
    var app_id = $('meta[property="fb:app_id"]').attr('content');

    $('<script type="text/javascript">')
        .prop({ async: "true" })
        .attr({ src: document.location.protocol + '//connect.facebook.net/ja_JP/all.js' })
        .appendTo($('<div>', { id: 'fb-root' }).appendTo($('body')));

    window.fbAsyncInit = function() {
        FB.init({
            appId: app_id, status: true, cookie: true,
            oauth: true, xfbml: true,
            channelUrl: '//'+document.location.host+'/channel.html'
        });
        $("body").trigger("fbAsyncInit", [FB, app_id]);
    };
});

これを動作させるためのOGPタグを追加する。

public/theme/theme-name/layout.erb

のmetaタグあたりに以下を挿入。

<meta property="fb:app_id" content="FACEBOOK_APP_ID" />
<meta property="fb:admins" content="ADMIN_USER_ID" />

FACEBOOK_APP_ID は適当なFacebookアプリを作ってそのApp ID/API Keyを、ADMIN_USER_ID には自分のFacebook IDを入れる。

Facebook Commentプラグインのコードを取得

Facebook Social Plugin(Comments)のページでコメント欄のコードを出力します。

  • URL to comment on は適当で。後で書き換えるので
  • Number of posts は5つにした
  • Width はLokkaで使うテーマに合わせて。このブログでは690を指定

出力したコードはこんな感じ

<div class="fb-comments" data-href="http://example.com" data-num-posts="5" data-width="690"></div>

取得したコードを設置

public/theme/theme-name/entry.erb

の #footer内に以下を追加。

<div class="fb">
  <div class="fb-comments" data-href="<%= base_url + @entry.link %>" data-num-posts="5" data-width="690"></div>
</div>

data-href はそのPostのパーマリンクになるように変数化。

これで完成。