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のパーマリンクになるように変数化。
これで完成。