[う]TumblrにFacebook連動のコメント欄を設置する方法

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

2011/02/18 ,
インターネットサービス

Tumblrを使い始めて数日、あれこれ楽しくてどーしよーもない男・うかです、こんにちわ。

Tumblrでは、テーマ（テンプレート）をある程度自由にカスタマイズできるということを知ったので、その個別ページにFacebookと連動するコメント欄を設置してみました。

Facebook「Comments」のコード取得手順

コメント欄を設置するにあたって準備しなければならないのが、Tumblrに埋め込むためのFacebookソーシャルプラグイン「Comments」のコード。以下、それを取得する手順です。

1. Facebook Developersでアプリ作成

まず、次の記事を参考に、Tumblrに設置する用にアプリを作成します。

Facebookのコメント欄をライブドアブログ( @livedoorblog )に設置するには

この記事はライブドアブログ用に書かれた記事ですが、この通りにやっていけばTumblrに埋め込むためのコードは取得できます。ただし、「設置手順3」の部分だけちょっと異なるのでご注意を。

2. ソーシャルプラグイン「Comments」の設定

その「設置手順3」に変わる設定がこちら。

ソーシャルプラグイン「Comments」の設定ページに行き、「Unique ID（個別ページのURL）」「Number of Comments（表示するコメントの件数）」「Width（コメント欄の幅）」を入力し、コードを取得するんですが、大事なのは「Unique ID」。

上記の記事ではライブドア用のコードが入力されているので、ここを、次の「Tumblrの個別ページURLを吐き出す専用のタグ」に直す必要があります。

{URLEncodedPermalink}

こうすることで、Tumblrの個別ページごとにコメントをつけることができるようになります。

3. コメント欄用コードの取得

あとは「Get Code」ボタンをクリックすると「Commentsのプラグインコード」という窓が表示されるので、その中にあるコードをコピーすれば、コメント欄を設置するためのコード取得は完了。

CommentsプラグインコードをTumblrテーマに埋め込む

次は、下記の手順に沿ってコードをTumblrに埋め込みます。

1. Tumblrのカスタマイズページを開く

Tumblrにログインしてダッシュボードが表示されたら、右サイドバーにある「Customize」をクリックします。

2. テーマのカスタマイズメニューを表示

カスタマイズページに移ったら、上部メニューにある「Theme」をクリックし、テーマのカスタマイズメニューを表示します。

そして、その下部にある「Use custom HTML」をクリックし、テーマのHTMLを表示させます。

3. Tumblr用タグを追加してCommentsコードを貼り付け

最後に、先に取得した「Commentsのプラグインコード」をこのHTMLの中に貼り付ければOK。

なのですが、「Tumblr用のタグを追加する必要がある」のと、「貼り付ける位置に注意」しなきゃいけません。

3.1. Tumblr用タグの追加

「Commentsのプラグインコード」の前後に、次のような形でTumblr用のタグを追記します。

{block:Permalink}
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=***************&amp;xfbml=1"></script><fb:comments xid="{URLEncodedPermalink}" numposts="10" width="500" publish_feed="true"></fb:comments>
{/block:Permalink}

2行目がプラグインコードなんですが、その前に {block:Permalink} 、その下に {/block:Permalink} を追記。これは「個別ページのときだけ表示させるよ」というタグで、これがないとトップページにもコメント欄が表示され、カッコ悪いことになります。

3.2. Commentsプラグインコードを貼り付ける位置

次に貼り付ける位置なんですが、Tumblrのメイン部分を表示させる一番最後の場所＝ {/block:Posts} の前に記述すればOK。

私は、{block:IfDisqusShortname}{block:Permalink} と書かれた行の前に設置しました。（この辺はテーマによって異なるかも。）

Facebook Commentsの動作確認

以上のような手順を踏んで設置したFacebook連動のコメント欄がこちら。

ちょっくらテスト – うかタン

他のページにも同様にコメント欄が設置されてるんですが、どんな感じになるの？というお試しコメントはこちらに書き込んでいただければ。

ウェブ上の気になったものをメモ変わりにクリップするだけなら、コメント欄なんて必要ないんですが、ソーシャルメディアたるもの、あれこれ繋がって楽しくなるので、興味のある方はぜひお試しいただければと思います。

いいね！ボタンも同様に設置可能

「いいね！ボタンも同様の方法で設置可能？」というご質問を頂いたので試してみたところ、コメント欄を設置するのと同様の方法で、Facebookの「いいね！ボタン」（Like Button）も設置することができました。以下、簡単に手順を追記。

Like Button設定ページで、コードを取得。ここでは URL to Like という欄に {URLEncodedPermalink} を入力。
Tumblrのカスタマイズページから、テーマのHTMLを表示。
プラグインコードの前後を、 {block:Permalink} ～ {/block:Permalink} で囲む。
3.の加工済みコードを、 {block:Posts} ～ {/block:Posts} の間に貼り付け。

私は、postのメタデータ（投稿の種類とか日時とか）を表示させてる部分の下にコードを埋め込みました。このサンプルでは、上にあるのがLike Button、下にあるのがCommentsになります。