FBのソーシャルコメントSDKを入れる

FBのソーシャルコメントSDKを入れる。SDKのページにドメインを入力してコードを表示。

<body expr:class='"loading" + data:blog.mobileClass'>

のあとに

<body expr:class='"loading" + data:blog.mobileClass'>
<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.async = true;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=数字が入ってる&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

みたいに入れて(数字が入ってるとこはちゃんとFBのappIdが入ってるブニで、さらに & → & に置き換えて使う事)
js.async = true;は追加。

そんでもって

テンプレート：シンプル　の場合は

<div class='post-footer'>

のあとに

<div class='post-footer'>
<div class="fb-comments" data-href="http://teraminato.apap.co4.jp/" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
とかになるけど

FB標準SDKのcodeでは、ブログ全体に対するコメントになってしまうのでエントリ別のURLを渡してやる。

<div class='post-footer'>
<div class='fb-comments' data-colorscheme='light' expr:data-href='data:post.canonicalUrl' data-numposts='5' data-width='100%'/>

どっちにしてもエントリが増えたら使い難いことになるけど。

追記、テンプレート：画像ウィンドウ の場合は

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>

の中間に

<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span> </div>

<div class='fb-comments' data-colorscheme='light' data-numposts='5' data-width='100%' expr:data-href='data:post.canonicalUrl'/>

<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>

こんな感じ。

追記、いいねボタンを置きたい場合は、置きたい場所に

<div class='fb-comments' data-colorscheme='light' data-numposts='5' data-width='100%' expr:data-href='data:post.canonicalUrl'/>

追記、いいねボタン＋シェアボタンを置きたい場合は、置きたい場所に

<div class='fb-like' expr:data-href='data:post.url' data-layout='button_count' data-action='like' data-show-faces='true' data-share='true' />

追記、コメントセンターで通知を管理したい。

FB developers にユーザ登録
Apps から Add new Apps でブログを登録
Apps の settings から App Domains (自分のブログのURL)とContact Email(連絡用メールアドレス) を登録
Apps の Status & Review で Do you want to make this app and all its live features available to the general public?を YESに設定

↑最初からやれって話

テンプレートに追記

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

↓

<html xmlns:fb="http://ogp.me/ns/fb#" b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

</head>の直前に

<meta content='FBの自分のアイコンをクリックした時のURLの&typeの前のドットまでの数字' property='fb:admins'/>

<meta content='Apps の Dashboard に表示されるID' property='fb:app_id'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title' />
<meta expr:content='data:blog.canonicalUrl' property='og:url' />
<meta content='article' property='og:type' />
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl != ""'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='画像がない場合の代替画像URL' property='og:image' />
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description' />
</b:if>

</head>

これにより、Comment Moderation Tool に新規のコメントが表示されはじめる。

表示されない場合はOpen Graph Object Debugger にURLを入力して、Fetch new scrape informationをクリックすることでエラーやアラートを確認できる。

君は今日からティーティーウーだ

2014年7月21日月曜日