Tuesday, 14 May 2013

Tumbax 1.0 - Display Tumblr feeds on your website - Jquery plugin


Now you can show your business feeds / news / simple notifications on your website with Tumbax plugin. All you need to do is, have you business updates in your tumbl blog and install this plugin on your site. Tumbax will pull your Tumblr feeds and display them on your website in a stylish view which is fully customizable.

Thus you can use Tumblr as a service to display your business updates for clients and users. The view is highly customizable; you can show it as a Timeline (2-column) or as a Pin View (3 or more columns) or a single column view. Let me know suggestions on this, if any!






How to use:

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

1. Create a Tumblr App

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-



The description of all variables is shown below -

 

 

tumblrBlogLink

This must be the URL for your Tumblr blog (Ex: http://codehandling.tumblr.com).

 

This is a mandatory attribute.

tumblrApiKey

Provide your OAuth Consumer key from your Tumblr app.

 

This is a mandatory attribute.

pathToLoadingImage

This the path to a loading image that is used by Tumbax. Basically this image is shown when the image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server)

 

If this is not supplied, no loading image is shown.

tumbaxColumns

The number of columns (for posts) to be displayed in the body of the widget.

 

If this is not supplied, a 2-column layout will be selected and displayed.

tumbaxWidgetWidth

The width of the Tumbax widget.

 

If this is not supplied, width of Tumbax defaults to 640px.


Other functionalities:

To hide the account info header (black) of Tumbax widget, add the below code in your css -

To set the width of the Tumbax widget as a percentage, add the below code in your css -

For any other specific requirement, just let me know and I will provide a hack!

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin tumbax.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 Tumbax widget and display your blog feed.


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

36 comments:

  1. This widget looks great. Is there a way to tell Tumbax how many Tumblr posts to display? Thanks for the great work!

    ReplyDelete
    Replies
    1. Same problem, I need to limit to 3 latest.

      Delete
  2. tumblr now got the yahoo coop :D

    ReplyDelete
  3. Thank you a lot! This is indeed very nice.
    Is there a way to set another background color? Via CSS as well?
    Thank you again.

    ReplyDelete
    Replies
    1. sure, for the background color change to a specific rgb value; add the below lines in your css

      #tumbax-encloser {background-color:rgb(160, 197, 214); !important}
      .tumbax-video-list-div {background-color:rgb(160, 197, 214); !important}

      to change the text color of your post title, add -

      .tumbax-title{color: rgb(75, 105, 160)!important;}

      to change the text color in a post, add -

      .tumbax-post{color: rgb(75, 105, 160)!important;}

      Delete
    2. #tumbax-encloser {background-color:rgb(255, 255, 255); !important}

      .tumbax-video-list-div {background-color:rgb(255, 255, 255); !important}

      these css rules dont seem to be overwriting the default and not working

      see below

      http://www.dragonalfacement.com/blog.html

      Delete
    3. any chance you got an answer to your question? I'm looking to change my background but like yours it is not working.

      Delete
  4. Hi - awesome widget!
    Does my site need to be live in order for Tumblr to authorize the app?

    ReplyDelete
    Replies
    1. no your site can be on a localhost but yout tumblr blog must be online!

      Delete
  5. Great widget! Thanks a lot!

    Is it possible to add tags and time of posting to this widget?

    ReplyDelete
  6. I have no knowledge of coding, other than the fact that they are used to create widgets, so I am thoroughly confused. I downloaded the tumbax.min.js and opened it into my browser window. What do I do with that? Do I add the other codes you provided somewhere in the mix of it all? Same goes for the rest of the codes you provided. What is the final order of all the codes?

    ReplyDelete
    Replies
    1. Just generate your tumblr API key ... using the info in this post.

      Then just navigate here - http://cloudsmith.codehandling.com/tumblr_feeds/cloudsmith_tumblr_feeds.html

      You can easily generate your plugin code and customize your plugin. Let me know if it goes good!

      -Jake

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

    ReplyDelete
  8. how can i hide the scroll bar?

    ReplyDelete
  9. You're calling an image in optional settings but I can't see this image anywhere: var pathToLoadingImage = './loader.gif';

    Where is this supposed to be loaded? I was expecting to see it at the feeds container for as long as the feeds take to load. Is this a bug or am I doing something wrong?

    Please note that the image doesn't show in your demo page as well.

    ReplyDelete
  10. probably a dumb question but which website needs to go in "application website" when applying for the key form Tumblr? I've tried a couple I figured would be it and it locked me out after 3 tries...

    ReplyDelete
  11. This is awesome! One question, is it possible to have it single column but with bigger images that 250px?

    ReplyDelete
  12. Do you have a list of all the css defs for customizing? I am trying to get the entire widget to show white backgrounds and still have a few showing grey. Would also like to customize the post titles etc. Thanks and great plugin!

    ReplyDelete
  13. Hey Checkout barcchat.tumblr.com it's a new tumblr tool to add chat right on your website!

    ReplyDelete
  14. Heya,

    U've got a great widget and I wanna see if i can use it as follows.

    I wish to create a fluid row of tumblr posts with pictures and introduction (first paragraph) and a link to full articles.

    So here's what i want to have
    OPTION 1: limit the nr of posts; instead of columns create a fluid row of 4 posts with the photo and introduction (not whole text) that acts as a link to the full post on tumblr.

    OPTION 1: use pinterest like layout and create an infinite scroll of posts loading by scrolling.

    Which one would be easier; and which one is more suitable to ur widget.

    many tnx.


    ReplyDelete
    Replies
    1. Kalari,

      my workaround on limiting the number of posts was to add &limit={#} after the api key variable ex:

      var tumblrApiKey = "#########################&limit=5";

      hope that helps

      brendan

      Delete
  15. Thank you so much! I have been seeking for something like this for a while now. Was wondering how I can style the boxes to not surround each post? and why are my original post images and youtube videos distorted? Images are coming out pixelated, wondering if it's within the js or if i need to add more styles to my css and call it out?

    thanks!

    ReplyDelete
  16. This is a great plugin! I've had a request from a client to truncate posts, is that possible?

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

    ReplyDelete
  18. The image quality is pretty poor/blury vs what the image actually looks like on tumblr (especially in the case of images that are much larger on tumblr and just being shrunk to fit in the widget). Is there anything in the jquery code itself that can be changed or added to improve the image quality?

    ReplyDelete
    Replies
    1. #tumbax img {max-width:300px !important;}

      Delete
    2. see example, i just put in my css

      http://www.dragonalfacement.com/blog.html

      I cant get the background to change any ideass, i tried adding these css rules:

      #tumbax-encloser {background-color:rgb(255, 255, 255); !important}

      .tumbax-video-list-div {background-color:rgb(255, 255, 255); !important}

      Delete
    3. also added some padding works fine

      #tumbax img {
      max-width: 300px !important;
      padding: 10px;
      }

      Delete
  19. Hi, I love the widget it works perfectly, my only problem is that I cannot change the style I want to make the background transparent and only let the posts show. Is there a way to do this as I cannot find the relevant CSS for it. Thanks

    ReplyDelete
    Replies
    1. any chance you were able to fix this problem? am trying to do the same thing with no luck. any input would be greatly appreciated. thanks.

      Delete
  20. hey, dis widget is awesome, but is there any way to make display this returned pictures inside an image gallery?

    ReplyDelete
    Replies
    1. Yeah, not very happy about that myself, especially since the images appear to be tiny.

      Delete
  21. Thanks for creating this, it's awesome! Any chance you would consider putting it on GitHub so people can contribute and add/ improve on features ?

    ReplyDelete
  22. Thank you for this plugin! I l've searched a lot of Tumblr feed widget, and now I find this! This is what I wanted. However, I can not change the size, align, color of quote. Please help me. And thank you again!

    ReplyDelete
  23. looking to change the background to black, .5 is this possible. is there a list of css that can be changed. everything else works perfectly. read and tested the above css but can't get the background color to change.

    what i am using right now on http://aboutalexmovie.com/now.html

    #tumbax-header{display:none !important;}


    #tumbax {width:70% !important;}

    .tumbax-title{color: rgba(255,0,4,1.00)!important;}
    .tumbax-post{color: rgba(60,60,60,1.00)!important;}
    #tumbax-encloser {background-color:rgba(255,0,0, 1); !important}

    ReplyDelete