Showing Twitter Updates on Tumblr

by Micah McDunnigan Images

Setting Tumblr to push your posts to Twitter is a simple matter of clicking a few buttons. Getting your tweets onto Tumblr is a little more difficult. There isn't a software connection to automatically push from Twitter to Tumblr. You have to use Twitter's tool to generate the source code for a Twitter widget, a box that will display a mini-Twitter feed, then paste that source code into your Tumblr blog's theme code.

Generate the Twitter Widget Code

Log in to your Twitter account, then click the gear shaped icon at the top of the page and select "Settings."

Click the "Widgets" link in the sidebar, then click the "Create new" button.

Make any changes you would like to the default Twitter widget configuration settings on the next page. These include options like the height and theme of the Twitter widget that will show your Twitter updates on your Tumblr. Click "Create widget" to generate the source code for your Twitter widget.

Copy the code that displays in the box below the widget preview. This is the source code that will create your Twitter widget on your Tumblr.

Authorizing Twitter on Your Tumblr

Log in to your Tumblr account, click the gear-shaped icon at the top of your dashboard and then click on the blog to which you'll be adding your tweets.

Scroll down the blog's settings page until you see "Twitter," then click the "Sign in with Twitter" button. Enter your Twitter login credentials if necessary, then click the "Authorize app" button.

Un-check the box next to "Share posts on your Twitter" if you don't want to tweet your Tumblr posts.

Installing the Twitter Widget Source Code on Your Tumblr Blog

Scroll back up the Tumblr blog's settings page until you see "Theme," then click the "Customize" button.

Click the "Edit HTML" link under your theme's name to display the source HTML and CSS code for your Tumblr theme, then paste the Twitter code into the appropriate location in the theme's source code. Where you should paste the code depends on where you want the Twitter updates to be on your blog. For example, if you want to display the updates in your theme's sidebar, then you should paste it below the line that says "<div class="sidebar">" in the source code.

Click the "Save" button. Your Tumblr will now display your Twitter updates.


If you aren't sure of where to put the Twitter code, try pasting it into one location and then click the "Update Changes" to preview how your blog would look. You can continue to cut and paste your code until you like where the widget ends up.


Photo Credits

  • Images

About the Author

Micah McDunnigan has been writing on politics and technology since 2007. He has written technology pieces and political op-eds for a variety of student organizations and blogs. McDunnigan earned a Bachelor of Arts in international relations from the University of California, Davis.

More Articles