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

Tumblrでは、何故か?DISQUSを導入するのが一般的ではあるが、ここではFacebookのコメント欄を設置する方法を紹介する。

Facebook Developers

116473422810_7a490b0703_o.png

上メニューの「My Apps」→「Add a New App」でアプリを追加する。ここでは、アプリケーションIDを取得するだけでよい。

次に、ソーシャルプラグイン - Comments でコメント欄を生成するコードを取得する。

216464903099_3417c356dc_o.png

  • ”URL to comment on” : ブログのURLを指定する。 (後でパーマリンクに置き換える)
  • ”Width” : 横幅をピクセル値か%で指定する。ピクセル値の場合は数字(ex.600)で、%の場合は数字+%(ex.100%)で指定する。ここでは、レスポンシブテーマを前提に、100%と指定する。
  • ”Number of Posts” : 初期表示コメント件数を指定する。
  • ”Color Scheme” : ブログのテーマが明るい系か暗い系か指定する。

「Get Code」でコードを取得する。

317846434895_d171ac713f_o.png

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

<!-- Facebookスクリプト 開始 -->
<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=xxxxxxxxxxxxxxxx&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Facebookスクリプト 終了 -->

TumblrのHTML編集で・・・
取得した上のコードは、”body”タグの直後に挿入する。(↑ 事例)

{block:PermalinkPage}

<!-- Facebookコメント 開始 -->
<div style='max-width:600px;margin:1.5em 0 1em;'>

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

</div>
<!-- Facebookコメント 終了 -->

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

{/block:PermalinkPage}

取得した下のコードはコメントを表示する場所に挿入する。(↑ 事例)

  • ”max-width:600px” : 横幅いっぱいに表示するが、最大600ピクセルに制限する。
  • ”{Permalink}” : URLはパーマリンクに置き換える。
  • ”<style>iframe.fb_ltr {width: 100% !important;}</style>” : IEで表示した際に横幅が限定されてしまうのを回避する。

パソコンの場合
416686919502_007ffb5695_o.png

スマホの場合
516500532690_39eceb3a44_o.png

こんな感じで表示される。

※コメント投稿通知が必要であれば、Comment Moderation Tool → [Settings] のモデレータに自分を追加すればよい。 ↓

616047829784_8ce32d127b_o.png

※正常に動作しない場合の対処方法
以下のコードを追加する。

<head>
・・・
<meta name="text:OGP Facebook Admin Number" content="" />
<meta name="text:OGP Facebook App Number" content="" />

<meta property="fb:admins" content="{text:OGP Facebook Admin Number}" />
<meta property="fb:app_id" content="{text:OGP Facebook App Number}" />
・・・
</head>

↓ テーマ編集画面で ”admins” と ”app_id” を設定する。

716668658661_8249a3f0e5_o.png

”admins”はアドレス欄に・・・

http://graph.facebook.com/xxxxxx (xxxxxx:ユーザーID)

と打ち込めば表示される。”app_id”は、アプリケーションIDのこと。

Comment Moderation Tool では、一括でコメントの管理が行える。

admin
カテゴリ:ブログサービス
タグ:Facebook tumblr
2015/02/26 07:02 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ