tumblrにコメント欄をなるべく簡単に設置する方法
2013年04月10日 公開
先日、友人のtumblrにコメント欄をつけてくれと頼まれて、設置した手順をご紹介。
Tumblrはこれね。
DISQUSを使う
Tumblrにはそもそもコメント欄というものがありません。ブログのように活用したいという要望がある人もいるかと思いますが、若干イメージが違うんですよね。
ただ、それでも投稿がめちゃくちゃ楽ですし、そういう意味ではこれにコメント欄を設置してフィードバックが欲しいという気持ちもわかります。
そこで今回はDISQUSというWebサービスを使います。
DISQUS
ここでとりあえずユーザー登録を行います。勿論無料です。
まず、設置するサイトのURLとサイト名を登録します。
これは、TumblrのあなたのサイトのURLと、サイト名を入れる感じです。
DISQUS用のショートID（表記：Site Shortname）は、ログインIDとも違いますし、登録するサイト名とも違います。ある意味、これはなんですかっていう質問が多いかもしれませんが、とりあえず小文字でなんか入れときましょ。例えばここに私が「yamapon」といれたら、後でこれを使います。
右側のフィールドはこのサイトにログインするための情報です。
ID、パスワード、メールアドレスを登録します。
ログイン後、この画面になるはずですが、ならなければ Setting>install で入れます。
以下のピンク色に、最初につけたショートIDが出てます。
※PhotoshopでIDは加工して表示してます
これを使います。
Tumblrに既にログインしてあるPCで、1番のリンクをクリックすると、自身のTumblrのカスタマイズページにジャンプします。
ここで、左側のバーをずーっと下に下がっていくと、以下のように
Disqus Shortname
という欄が現れます。
ここに、先ほどのIDを入力して、保存します。
とりあえずこれだけでOKです。
細かい設定は、DISQUSの Setting>General から設定を行うことも出来ます。
直接カスタマイズの方
ある程度HTMLカスタマイズ出来るという方は、先ほどの１，２，３と書かれたページの下に、リンクがあります。
それをクリックすると、直接コードをコピペして、Tumblr側のHTMLを編集する事も可能です。
簡単な説明になりますが、まず<head>内にメタタグをコピーして貼り付け。
次に{/block:Posts}の後に4番をコピペ貼り付け。
この時、var disqus_shortname = '<example>'ここを編集します。最初に設定したショートIDを<example>と置き換えましょう。これでOKです。
下の欄のフィールドは、コメントの件数を取得するものです。
{/block:Posts}の前にコピペしましょうとのことです。
こっちは試してないのでなんとも言えませんが、text:Disqus Shortnameと書かれた部分を、編集する必要があるかもしれません。そのままコピペして動かなかったら試してくださいね。
それでは、また。