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: http://codehandling.tumblr.com)
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.

28 comments:

  1. Thanks for posting. Very Helpful!

    ReplyDelete
  2. WOW Great plugin, we implemented it in http://www.loor.org/audiovisual/ is possible to increase the size of the boxes of each tumblr post?

    thanks

    ReplyDelete
    Replies
    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
      -Jake


      Delete
  3. This is incredibly helpful, thank you!

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

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

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

      Delete
    2. Great! Thanks so much.

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

    ROB

    ReplyDelete
    Replies
    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

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

    ReplyDelete
  6. Awesome Widget. Useful and customizable. Thanks

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  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.

    ReplyDelete
    Replies
    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!

      Delete
  9. Hey ,I have featured this awesome jQuery plugin in http://jquer.in

    ReplyDelete
  10. Upgraded version of the plugin released !!

    -Try out the new upgraded "Tumbax"
    http://www.codehandling.com/2013/05/tumbax-10-display-tumblr-feeds-on-your.html

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

    Thanks!
    Walter

    ReplyDelete
  12. Can you customize the typeface and font colors?

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

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

    ReplyDelete
  15. Thank you so much for you help

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

    Thanks

    ReplyDelete
  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!

    ReplyDelete
  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!

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

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

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

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

    ReplyDelete