Adding Twitter to your Tumblr Blog

I’ve recently started using a new Tumblr theme called Optica. It’s awesome, it’s minimalistic, it looks exactly like what I want it to look; but it doesn’t allow me to display Tweets. Bummer!

But wait, there must be a way we can hack it in, right? We can always hack the theme’s HTML directly but then we will lose any sort of improvements that happen naturally when the author updates it.

So let’s hack it in by (ab)using your blog’s description!

1. Create a embedded-timeline widget using your Twitter account.
2. Edit your Tumblr blog’s theme.
3. Append a custom <div/> element to your blog’s description. For example:

   My blog is about how great I am.
   <div id="nilstwitter">
   <!-- Replace me! -->
   </div>

4. Replace the <!– Replace me –> line of text with the embedded-timeline widget HTML.

Additional hacks you can perform is to then change the CSS position of the div:

1. Go to “Advanced options” under your theme editor.
2. Paste the following into ADD CUSTOM CSS:

   /* Twitter */
   #nilstwitter {
       padding-top: 10px;
       height: 50px;
       margin-bottom: 20px;
       z-index: 5;
   }

3. Change the CSS as you see fit.

If you’re interested in changing the look and feel further then read the widget customization documentation. There are a lot of features that you can tweak such as the number of tweets, visibility of border, and more!