Hack Your Tumblr Blog
Tumblr provides easy to use and free hosted blogging, but it doesn’t support plugins. WordPress gained popularity because of the plugin support: there’s plugins to do just about everything, so it would be great to see plugins in Tumblr.
However, Tumblr allows full control over templates. This means you can extend just about everything with JavaScript and CSS.
The Basics
Visit the Customize page within Tumblr. This link appears either on your blog’s homepage at the top-right or in the right-hand navigation on your dashboard. Tumblr offers themes and easy colour editing, but if you want to really extend it switch to custom HTML.
Scroll through the custom HTML until you see the following:
<div id="content">
<div id="description">
This description block is a good area to add things like blog rolls and widgets from social networks, it’s the right-hand-side block that appears on all of your Tumblr pages.
The template wraps up blocks for the search page and posts. This means you can control the way search results appear. Just look for {block:SearchPage}.
The only pages you can’t currently control are the archive pages.
Twitter, Last.fm and Delicious
Visit twitter.com/badges to create a widget for your Tumblr blog. Select Other, then follow the steps to create your widget code. Paste this into the description block.
To add a last.fm widget, visit last.fm/widgets and configure your widget, then press “show me the code”. Copy and paste this into the description block.
Delicious also offers integration with blogs. Click on Settings at the top-right of the page when you’re logged in. Scroll down to the Blogging section then select the type of widget you require. The tag cloud is useful if your Delicious links and blog content are closely related, because it would give the appearance of categories on your Tumblr blog.
Image Hosting
Tumblr lets you upload images as an image post, but what about embedding images in your posts? I’ve found the best solution is to use Dropbox. My workflow is as follows:
- Drag an image to a public Dropbox (I have a quiteuseful folder so I know not to delete them)
- Right-click the image then select Dropbox, Copy public link
- When writing a text post, click the image icon then paste in the Dropbox URL
Flickr and Box.net are other ways you could include images in your posts, but Dropbox makes it quicker.
Comments
Comments can be added to Tumblr through Disqus. It’s a JavaScript-based commenting system. They specifically support Tumblr, which means their comments will appear correctly at the bottom of each post (and not on the search or index pages).
This is what Disqus comments look like:
Sign up for an account to use Disqus, then follow the steps to generate your Tumblr JavaScript code. Disqus makes it very clear how to add the code to your blog with instructions and diagrams:
Share Buttons
ShareThis is a service that groups together social network buttons for bloggers. Using it with Tumblr is similar to Disqus: sign up for an account, add your site to their system, generate code to paste into Tumblr’s template.
I wrote a script to automatically add ShareThis buttons to the correct places on a Tumblr blog. Read about it in: Add ShareThis buttons to Tumblr.
Custom Domains
Using a custom domain is very easy with Tumblr, especially if your domain provider lets you configure DNS. We used 123-reg to do this. Once you’ve bought a domain there, look for Manage DNS in the control panel, then add an A record with Tumblr’s IP address: 72.32.231.8. Your DNS settings should look like this:
Then go to Tumblr’s Customize page, click the Info tab and select Use a custom domain name. Enter your domain. Within a few hours your new domain will work with your Tumblr blog.
Stats: Google Analytics
Using Google Analytics with Tumblr is the same as any other site. Add your site to Analytics, then grab the code and paste it into the Tumblr template.
About Page
Create an about page by simply creating a text post. Set the date before your first post so it doesn’t appear as a new article. Get the link for the post then add it to the description block or anywhere else that you’ve created navigation.
Contact Forms: WuFoo
Finally, WuFoo will host a great contact form for you. Sign up, create a basic form, then add the link to your Tumblr blog’s template. WuFoo even allows template editing for free accounts, so you can make your contact form include your blog’s logo and colour scheme.
