Facebook Widget for Tumblr

This is a post in reply to one of the questions that I received on how to implement a Facebook Fan Box on a tumblr blog.  The social plugin looks something like the image on the right. You can customize the width, height and color of the  plugin to complement the theme or color scheme of your blog. However the minimum width is 292 pixels. Setting this takes only a few mins, here are the steps.

1. Login to your Facebook account, and go to Facebook developers section here.

2. Customize your preferences accordingly to your requirements. You can always come back and re-edit. The default settings work great. For the perfectionist, you may want to remove the border by changing the color to white (for those using white background). You can leave the height blank, as the plugin is intelligent enough to do the adjustment itself.

3. Once you have entered all the settings, click on the button to Get the Codes generated. Make a backup of the codes. There are 2 sections of codes that you need to copy to your tumblr blog.

Facebook Fan Box Codes to Add to Tumblr blog

4. To edit the HTML of your tumblr theme, go settings, and click on “Customize Theme”, followed by “Edit HTML”. As always do backup first.

Customize Tumblr Theme

5. As per instructions from Facebook, copy the first block of codes and paste it just after the HTML code <Body> of your tumblr blog.

6. The second block of code depends on the design of your theme. Generally most of us put plugins and widgets on the sidebar.

If you are having difficulty with tutorial, and cannot set it up probably, let me know. :)



Lincoln is a fan of Apple products, loves red wine and traveling. He blogs on internet marketing, social media, wordpress tips & guides, and using technology to maximize efficiency. Follow him on Twitter or Facebook for regular updates.

Leave a Reply

Your email address will not be published. Required fields are marked *