Friday, 1 February 2013

Responsive Tumblr Feeds on your website - customize with Cloudsmith


Guys, we are introducing our new tool, Cloudsmith, which will automate the way you customize our plugins. The tool will display a configuration panel, that will have all the config options regarding the plugin. Once you are done with the customizations, just click the "Get Code" button to get your config code in place.

Currently we are in the process of rolling out our plugins in the Cloudsmith tool. We introduce the plugin for "Tumblr Feeds" with Cloudsmith. This plugin will display feeds from your tumblr account on to your webpage. The plugin is totally responsive, works on all major browsers and fully customizable.

Check out the Cloudsmith customization for Tumblr feeds here!






How to use:

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

Just navigate to the Cloudsmith link for Tumblr feeds. Customize as per your requirement and get the code with the plugin right away!

Technical deatils:

1. Get the Tumblr API key

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. This is your Tumblr API key!



2. Javascript

Enter the OAuth Consumer key from your Tumblr app in your javascript for the variable "tumblrApiKey" as shown-
(Just use the Cloudsmith link (live customization) to generate this code for you!)


The description of all variables is shown below -



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

tumblrApiKey
Provide your OAuth Consumer key from your Tumblr app.

pathToLoadingImage
This the path to a loading image that is used by this widget. 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. This value changes as per the width of the plugin. Example: if the width of the widget is less than 600px then a single column layout is shown. For widths less than 1100px a two column layout is shown. For widths greater than 1100px a three column layout is shown.

tumbaxOneColumnLimit
A single column layout will be shown if the width of the widget is less than the value of tumbaxOneColumnLimit

tumbaxTwoColumnLimit
A two column layout will be shown if the width of the widget is less than the value of tumbaxTwoColumnLimit. A three column layout is shown if the width of the widget is greater than tumbaxTwoColumnLimit

tumbaxMobileModeLimit
A simple and small mobile view will be shown if the width of the widget is less than the value of tumbaxMobileModeLimit.

tumbaxPostBatchSize
This value specifies the number of posts that will be pulled from your Tumblr blog at one time. Each click of Load-More button will bring this many number of posts.

tumbaxDisplayHeader
When the value is set to "none", the header is not shown. Set the value to "block" to show the header.

tumbaxWidgetWidth
The width of the Tumbax widget. CAn be specified as percentage (80%) or in pixels (650px)

tumbaxWidgetMaxHeight
This will limit the height of your widget. It is advisable not to set the height unless you have limited height constraint on your webpage. Change this value from the Cloudsmith configuration tool.

tumbaxPostMaxHeight
This will limit the height of each post. It is advisable not to set the height unless you dont wish to display your complete posts. Change this value from the Cloudsmith configuration tool.

tumbaxHeaderBackground
Background color of your widget header. Change this value from the Cloudsmith configuration tool.

tumbaxBodyBackground
Background color of your widget body. Change this value from the Cloudsmith configuration tool.

tumbaxPostBackground
Background color of your each post. Change this value from the Cloudsmith configuration tool.

tumbaxPostTitleColor
Text color of the title for each post. Change this value from the Cloudsmith configuration tool.

tumbaxPostTextColor
Text color for each post. Change this value from the Cloudsmith configuration tool.

tumbaxHeaderTextColor
Text color for widget header. Change this value from the Cloudsmith configuration tool.

tumbaxBorderColor
Border color for the widget. Change this value from the Cloudsmith configuration tool.


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 tumblr-feeds.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.

2 comments:

  1. Very nice plugin.

    One question, is there a way to disable popups? So, for example, if you click an image that pulls through from twitter, it doesn't show the image in a popup.

    Thanks, and keep up the great work.

    ReplyDelete
  2. Really great plugin! Thanks, Question, The posts title is displayed as a link and has a dotted underlining to emphasize that. Is there a way to edit/ get rid of the dots? Thanks!

    ReplyDelete