Add Tumblr Comments to Liquid Typo Theme
Some of you may have noticed a link to my tumblelog over in the sidebar here. Whether or not you’ve clicked through to it, I suggest checking it out.
Of course, you’re probably asking yourself, “What’s a tumblelog?” Well, I’ll let Wikipedia take this one away:
A tumblelog (or tlog or tumblog) is a variation of a blog that favors short-form, mixed-media posts over the longer editorial posts frequently associated with blogging.
There’s an absolutely incredible tumblelog service called Tumblr that really lets you dig right into running and maintaining a tumblelog. It’s free and very customizable and extremely easy to post to. Anyone intimidated by the idea of running a blog should at the very least look into setting something up on Tumblr. It’s very basic and, given the simplicity with which you can post, very ideal for stream of consciousness style blogging. See a cool video and want to share it? You can do that in seconds and without dealing with a lot of goofy code if that’s not your thing.
I’ve actually been flirting with the idea of being done with Wordpress altogether. I don’t really like playing with code all that much, and as easy as it is to use Wordpress, it still needs a little more hand holding than I sometimes want to give it. Tumblr has struck me as the ideal platform to switch over to with one exception: There is no built in comment system, which is a total dealbreaker.
I was quite happy to discover that the comment community site Disqus has instructions on integrating with Tumblr. I tried some time ago to integrate Disqus into this site, but gave up after I hit a few kinks here and there. I figured I’d try it out with Tumblr instead this time around, and I’m pretty pleased with the results. If you click over you’ll see a comment count link in the right sidebar.
The thing is, this didn’t go quite as smoothly as I’d hoped. Your mileage may vary quite a bit based on which Tumblr theme you’re using, but I figured I’d share my experiences integrating Disqus into my chosen theme, Liquid Typo.
According to Disqus’s intallation instructions, you’ve got two snippets of code: One that creates the comment count link and one that creates the actual comment box you write into. These need to get placed in very specific locations, but the provided instructions don’t really work for every theme. The idea is that the comment count link goes before the </div> {/block:Posts} part of the HTML and the comment box code goes after. I tried these instructions as written on the Liquid Typo theme and it kind of came out a mess.
After playing around with it a bit, I figured out the best way to code this is to use the comment count link code within the div for each “block” type. You see, Tumblr has various types of content that it will format accordingly depending on how you want your content to appear. What this means it that when you post a photo, the site will reflect that an optimize the layout of that photo for ideal presentation. Same thing if you’re sharing a quote or a video clip or whatever. In the Liquid Typo theme, each “block” has a separate div for a sidebar on the right hand side with meta information about the post. I figured this was an ideal location for the comment counts. All I had to do at this point was sort out the precise location to stick the Disqus code, which ended up looking like this (using the photo block as an example):
{block:Photo}
<div class=”photo”>
<span class=”noborder”>{LinkOpenTag}<img src=”{PhotoURL-400}”
alt=”{PhotoAlt}”/>{LinkCloseTag}</span>
{block:Caption}
<p>{Caption}</p>
{/block:Caption}
<div class=”rightsidebar”>
{block:NewDayDate}<h4>{ShortMonth} {DayOfMonth} {Year}</h4>{/block:NewDayDate}
{block:SameDayDate}<h4>{24HourWithZero}:{Minutes}</h4>{/block:SameDayDate}
<p><a href=”{Permalink}”>Photo</a></p>
<div style=”font-size: 10px; text-align: left;”><a href=”{Permalink}#disqus_thread”>Comments (View)</a></div>
</div>
</div>
{/block:Photo}
The bolded code is what I added from Disqus. Inserted here, the comment count link will appear below the permalink for the type of content it is (”Photo” in this case). Just repeat for each post type block (”Regular,” “Photo,” “Quote,” “Link,” “Conversation,” “Audio,” and “Video”).
All that remains is to add the second, longer code snippet from Disqus. Happily, there’s no extra tweaking needed here. Just copy and paste the code right where it suggests, after {/block:Posts}. Should work like a charm!
Tagged: code, comments, Disqus, hacks, tlog, tumblelog, tumblog, Tumblr, tutorial
You are so awesome for taking the time to blog this. I appreciate it very much!