The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Tumbax jQuery plugin : Display Tumblr feeds on your website

Tags :

Plugin rate :

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.

&nbsp:

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!

Implementation: 

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.

 

tumbo1.png

 

Then fill up your application details as shown. Save.

 

tumbo2.png

 

tumbo3.png

 

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

 

tumbo4.png

 

 

2. JAVASCRIPT

Enter the OAuth Consumer key from your Tumblr app in your javascript for the variable "tumblrApiKey" as shown-

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
 //mandatory----------------
 var tumblrBlogLink="http://codehandling.tumblr.com"; 
 var tumblrApiKey="xxxxxxxxxxxxxxxxxxxx";
  
 //optional-----------------
 var tumbaxWidgetWidth = 800; 
 var pathToLoadingImage = './loader.gif';
 var tumbaxColumns = 2;
</script>

 

 

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

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

 

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

1
#tumbax { width:90% !important; }

 

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

 

 

3. INCLUDE TUMBAX PLUGIN

1
2
3
4
5
6
<body>
  ...
  ... 
  <script src="http://code.jquery.com/jquery-1.7.js"></script>
  <script src="./tumbax.min.js"></script>
</body>

 

 

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

1
<div id="tumbax"></div>

A Tumblr blog feed in a widget will be shown on your webpage !

Let me know your suggestions.

Options: 
tumblrBlogLink
String
Default : '' - This must be the URL for your Tumblr blog (Ex: http://codehandling.tumblr.com). This is a mandatory attribute.
tumblrApiKey
String
Default : '' - Provide your OAuth Consumer key from your Tumblr app. This is a mandatory attribute.
pathToLoadingImage
String
Default : '' - 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).
tumbaxColumns
Integer
Default : 2 - 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
Integer
Default : 640 - The width of the Tumbax widget. If this is not supplied, width of Tumbax defaults to 640px.
Screenshots

Comments

Hola:
El sitio web esta genial!
Muchas Gracias!

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [1]