TumblrにFacebookのCommentsプラグインを設置する手順
どうも、石丸です。
先日、友人の結婚式＆披露宴にお邪魔してきました。とても素敵な式でした。
その式には上司も招待されていたのですが、会場で会った際に「あれ、今日はちゃんとした格好してるね」と言われてしまいました。さりげなく普段の格好にダメ出しを食らったかたちです。私の普段の格好はそんなにだらしないでしょうか……。
さて、このスタッフブログ INI NoteはTumblrを利用しており、コメント欄にはFacebookのCommentsプラグインを使っています。
今日はTumblrにFacebookのCommentsプラグインを設置する手順をまとめてみたいと思います。
ちなみに、Facebookは頻繁に仕様がアップデートされるので、この記事は2012年1月24日に書かれたということを明記しておきます。
Step 1：コメント欄用のアプリを登録する
Facebookのコメントをちゃんと使うにはアプリの登録が必要です。3分くらいで終わります。
- Facebookにログインした状態で、『Facebook Developers』を開きます。
- 右上の『アプリ』をクリックします。
- 右上の『新しいアプリケーションを作成』をクリックします。
- App Display Nameに適当なアプリ名を入力し、App Namespaceは空欄のまま『続行』をクリックします（図1）
- セキュリティチェックは普通にクリアします。
- App IDが書いてあるのでメモします（図2）
- 『基本データ』の『アプリのドメイン』に『account.tumblr.com（あなたのTumblrブログのドメイン名）』と入力します（図2）
- 『アプリをFacebookに結合する方法を選んでください』は『ウェブサイト』を選択し、『サイトURL』に『http://account.tumblr.com/（あなたのTumblrブログのURL）』と入力します（図2）
- 『設定を保存』をクリックします。
図1
図2
Step 2：コメント欄のコードを取得する
続いてFacebookの開発者向けサイトでJavaScriptとHTMLのコードを取得します。これも3分くらいで終わります。
- Facebook Developersの『Comments』を開きます。
- いくつか入力する欄がありますが、とりあえず全て無視して『Get Code』をクリックします。
- 『This script uses the app ID of your app:』ではStep 1で作成したコメント欄用のアプリを選択します（図3）
- JavaScriptとHTMLのコードが表示されるのでそれぞれコピーしておきます。
図3
Step 3：Tumblrにコメント欄を設置する
最後のステップです。Tumblrのテーマを編集して、Step 2で取得したJavaScriptとHTMLのコードを貼り付けます。JavaScriptのコードは貼り付ける場所が決まっているので悩みませんが、HTMLのコードは適当な貼付け位置を探すのに少し時間がかかるかも知れません。
- Tumblrにログインした状態でダッシュボードを開きます。
- コメント欄を設置するブログを選択します（図4）
- 『表示をカスタマイズ』をクリックします（図4）
- 『編集HTML』をクリックします（図5）
- Step 2で取得したJavaScriptを<body>のすぐ後にペーストします。
- Step 2で取得したHTMLをコメント欄を表示したい箇所にペーストします。
その際、 『http://example.com』となっている箇所を『{URLEncodedPermalink}』に変更します。こうすることで、Tumblrが自動的にこの部分をブログ記事のURLに置き換えてくれます。 - さらに、<head>内に以下のコードを挿入します。
<meta property="fb:admins" content="自分のFacebookアカウントID"> <meta property="fb:app_id" content="Step 1でメモったApp ID">
FacebookアカウントのIDは自分のものを使います。IDは自分のプロフィール写真をクリックしたときのURLで確認できます。
http://www.facebook.com/photo.php?…set=a.XXXXXXXXXX.YYYYYYYYYY&type=…のYYYYYYYYYYの部分がアカウントのIDです。
http://www.facebook.com/profile.php?id=の後に続いてその数字を入れたとき、自分のプロフィールが開けば間違いありません。 - 『Update Preview』をクリックして表示を確認します。
納得のいく位置にコメント欄が表示されるまで試行錯誤します。 - 『デザイン設定』をクリックして戻り、『保存』をクリック（図5）
図4
図5
Step 2で取得したHTMLは、<block:PermaLink>で括られた間に貼りつけるとブログ記事の個別ページにだけ表示されます。表示を確認しながら色々な位置に貼り付けてみるとよいと思います。
ブログのコメント欄とFacebookの近況アップデートに反映される流れ
さて、最後にブログのコメント欄から登録されたコメントが、Facebook側にどのように反映されるか解説しておきます。
ブログのコメント欄からコメントする場合、「このブログにこんなコメントをしましたよ」とFacebookの近況に投稿するかどうか選択することができます。
次に、そのコメントにブログのコメント欄から返信した際、その返信をFacebookに投稿するかどうかはやはり選択することができます。
また、そのコメントにFacebookから返信する場合、その返信をブログのコメント欄に表示するかどうかをやはり選択することができます。
図で示すと以下のようになります。
このあたりはややこしいので試してみるのが一番だと思います。
なお、新規投稿した際に「新しいブログ記事を書いたよ」とFacebookに自動投稿されるようにTumblrを設定することができますが、その設定はFacebookのCommentsプラグインとは無関係なので、「新しいブログ記事を書いたよ」というFacebookへの投稿にFacebook側で返信がついたとしても、ブログのコメント欄には反映されませんのでご注意を。
本当にややこしいですね。
以上、『TumblrにFacebookのCommentsプラグインを設置する手順』でした。
1 note
-
socialmedia-fukushima reblogged this from intelligentnet
-
intelligentnet posted this
