Tumblrにfacebookコメントボックスを設置。
facebookコメントを設置する時に割と苦労したのでメモ書き程度に。
ちなみに執筆は2011年10月16日です。
利用Tumblrテーマ：Single A
http://www.tumblr.com/theme/28638
facebookコメント：デベロッパーページ
https://developers.facebook.com/docs/reference/plugins/comments/
●facebookデベロッパーページで、コメントボックスの設定。
https://developers.facebook.com/docs/reference/plugins/comments/
URL to comment on／コメントボックスを設置するサイトのURL
Number of posts／画面に表示するコメントの数
Width／設置するボックスの横幅
Color Scheme／ボックスデザインの背景色。
URLはあとで変更するのでなんでもいいです。
コメント数もお好きに。
横幅。ちまちまといじりましたが、最終的に622。
背景色は白バックなんでlightです。
順当に設定して「Get Code」ボタンを押すと、コードが表示されます。
でもいっぱいあってどれでしょか。
何がどう違うのかは専門の方にお任せして。。。
XFBML > 3. をコピペしましょう。
●Tumblrのhtmlカスタマイズ画面までの道のり
コピペしたらテキストエディタなんかに一旦貼付けておいて、Tumblrの作業になります。
カスタマイズ画面へは以下のとおり。
Tumblrのダッシュボード／http://www.tumblr.com/dashboard
複数運用している場合はヘッダーからカスタマイズしたいブログを選ぶ。
右メニュー「Customize appearance」からカスタマイズ画面へ
カスタマイズ画面左メニューのCustom theme。Edit HTMLボタンをポチ。
●facebookコメントボックスを設置する場所を探す
ここも何も考えずに680行あたりの{/block:Date}と</div>{/block:Posts}の間にコピペしましょう。
ここは日付なんかのボックスの下です。
{/block:Date}
<fb:comments href="あなたのURL" num_posts="10" width="622"></fb:comments>
</div>
{/block:Posts}
●一覧画面で表示されると具合が悪いので、単記事だけに表示する。
一覧画面でもコメントボックスが表示されると具合が悪いです。
いろいろと具合が悪いです。
ですので、以下のように追記。
これは単記事の場合だけ表示させる設定のようです。
{/block:Date}
{block:Permalink}
<fb:comments href="あなたのURL" num_posts="10" width="622"></fb:comments>
{/block:Permalink}
</div>
{/block:Posts}
●最後。URLを単記事に自動的に置き換えるコードにする。
はりつけたコードの”あなたのURL”部分には何かしらのアドレスが入っているはず。
facebookコメントに投稿した時、facebook側には「〜の記事にコメントしました」と出るわけですが、ここが一定のURLだと、どの記事にコメントしても、ひとつの記事に対してコメントしたことになるわけです。具合が悪い。
なので最後にこの部分を書き換えてください。
{/block:Date}
{block:Permalink}
<fb:comments href="{Permalink}" num_posts="10" width="622"></fb:comments>
{/block:Permalink}
</div>
{/block:Posts}
この{Permalink}というのは、表示しているURLに動的に置き換える、というTumblr用のコードのようです。
あとは保存して確認してみてください。
実際にコメントテストなんかしてみるのがいいかもしれません。
コメントの動作確認をしたい方はこの記事のコメントでテストしても構いませんよ〜。
tangentwithtanner
janainaart
jbbartram-illu
discoholicmusic
pixelskylines
ellievsbear
kianamaiart
