Wednesday, 27 February 2013

Tumbo 1.0 - Show Tumblr feeds on your website - Jquery plugin

New version released - Tumbax
Tumblr blogs are now-a-days mostly used to share images, audio and short notifications etc. It becomes very helpful if you can use Tumblr as a service to display those posts on your website.

Introducing a plugin that will extract tumblr blog post feeds from any tumblr blog you specify, and display the same in a widget on your website. You can use this plugin as a service to display notifications from your tumblr blog onto your website. The widget also has the tumblr follow button, thus making it social. Let me know suggestions on this, if any!

How to use:

The download pack contains the plugin file - tumbo.min.js and the HTML file deployed in the demo tumblr_feeds.html

1. Register your domain with Tumblr

Click here to navigate to the Tumblr registration page and create a new App.

Then fill up your application details as shown. Save.

Your application will be created and you will be provided with an OAuth Consumer Key

2. Javascript

Enter the OAuth Consumer key from your Tumblr app in your javascript for the variable "tumblrApiKey" as shown-
Enter your tumblr blog URL in a piece of javascript as shown below. Ex:
Optionally, you may also customize the dimensions of your widget as required by setting the "tumboWidgetWidth" and "tumboWidgetHeight" variables.

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin tumbo.min.js before the end of your body tag and you are done!

3. Create a container for your interface

Add a div as shown below in you HTML. This div will contain the Tumbo widget and display your blog feed.

A Tumblr blog feed in a widget will be shown on your webpage!
Let me know your suggestions.


  1. Thanks for posting. Very Helpful!

  2. WOW Great plugin, we implemented it in is possible to increase the size of the boxes of each tumblr post?


    1. Yup any customization is possible in our plugins!

      Add the lines given below to your CSS inside your style tags.. depending on your requirement -

      /*To change the maximum width of your images, add this - */
      #tumbo img {max-width:300px !important;}

      /*To set the height and width of your videos, add this - so, 400px will be your video width and 250px will be your video height*/
      #tumbo iframe {width:400px !important; height:250px !important;}
      #tumbo table tr:first-child iframe{width:200px !important; height:25px !important;}

      /*To change the max height of your tumbo posts, add this-*/
      .tumbo-post {max-height:500px !important;}

      /*To remove the scroll bars from Tumbo, add this-*/
      #tumbo {height:auto !important;}

      Let me know , for anything else

  3. This is incredibly helpful, thank you!

    One question: How can I remove the header? (avatar, name, url and "follow)

    1. Sure add this to your css ... in a style tag -

      #tumbo table tr:first-child {display:none;}

    2. Great! Thanks so much.

  4. How can I increase the amount of posts shown and also offset the start post (ignore the first 10 say)


    1. Hi ROB

      Our team is working on the new version of Tumbo, it will have an infinite posts feature ... This will be released after this weekend.

      About the offset of the first post .. can you please explain me with a snapshot or image .. so i can better understand

  5. I use Tumblr so this is really useful. Thanks.

  6. Awesome Widget. Useful and customizable. Thanks

  7. This comment has been removed by the author.

  8. is there any way to float images and text so that there could be a body of text with the image to the right of it?

    Thanks, this plugin is awesome! I have customised the hell out of it but just struggling with this one last hurdle, as both text and image are wrapped in < p > it is hard to separate them.

    1. Actually thats the way data comes from Tumblr API ..
      let me know some detail and you web link .. we might be able to help!

  9. Hey ,I have featured this awesome jQuery plugin in

  10. Upgraded version of the plugin released !!

    -Try out the new upgraded "Tumbax"

  11. Hi, is there a way to show the posts of my costumers without having to register every costumers blog as application?


  12. Can you customize the typeface and font colors?

  13. I can't use this app with PrettyPhoto on my page - any idea how I can fix their interaction?

  14. Is it possible to change the link colours and font too?

  15. Thank you so much for you help

  16. My follow button doesn't seem to be sizing correctly. Is there a way to customize the follow button?


  17. Is there a way to show the dates of each post? Just that
    The plugin works great and you have tons of very useful ones.
    Great site!!! Thumb up!

  18. Very, very cool stuff! You mentioned that the plug-in is customizable. Do you have any documentation on what can be changed and how? I need to take out the iframe. Again, awesome job. Thanks for sharing!

  19. Doesn't load photos in the demo; if it doesn't in the downloaded version then this plugin is useless

  20. It's asking for a call back URL?

    1. Umm.. its working fine in the demo. Can you replicate that code and try.. should work :)

  21. Jake are you going to do an updated version please?