Friday, 1 February 2013

Blogger feeds on your website with responsive multi-column layout - jquery plugin


Blogger feeds will pull posts from any blog powered by blogger and display the same on your website. All you need to od is specify your blogger blog URL. Now you can customize this plugin completely at Cloudsmith.

The view is fully responsive with all major browser support. Check out the Cloudsmith customization for Blogger feeds here!





How to use:

The download pack contains the plugin file - blogger-feeds.min.js

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

Technical deatils:

1. Set up a pipe for your Blogger feeds

Login with your yahoo account. Navigate to this link My Yahoo pipe. Just click the clone button to clone the pipe under your account.



The cloned pipe will have a new id as shown below. This is your Pipe ID. Just provide this Id in the cloudsmith configuration tool and you're done!



Providing you own pipe ID gives you an exclusive pipe that only your site will use. This means your pipe wont be loaded by others and will be faster.

1. Javascript

Set up the javascript variables as shown -
(Just use the Cloudsmith link (live customization) to generate this code for you!)


The description of all variables is shown below -



bloggerBlogLink
This must be the URL for your Blogger blog (http://example.blogspot.com) .

pipeId
This is the Id of the pipe that you just cloned above.

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

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

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

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

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

bloggerWidgetWidth
The width of the 'blogger-feeds' widget. Can be specified as percentage (80%) or in pixels (650px)

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

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

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

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

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

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

bloggerBorderColor
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 blogger-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 Blogger blog feed in a widget will be shown on your webpage!
Let me know your suggestions.

9 comments:

  1. Hello Jake. Your article is worth reading. It will be very helpful for developers. Thank you so much for this wonderful guide.

    ReplyDelete
  2. http://anandvip.blogspot.com, I am about to attempt to get the posts on anandvip.com, thanks for the share
    Vipul

    ReplyDelete
  3. This is really helpful tips for blogger. Thanks for sharing such a great post.

    ReplyDelete
  4. hi,
    thank you for sharing such a great article with us.
    it's a very helpful article you have shared with us.

    ReplyDelete
  5. These are really helpful, jQuery is one of those recently popular languages that developers need to learn to compete these days.These plugins are very helpful for my new blog thank you for sharing.

    ReplyDelete
  6. Very good post thanks for share step by step guide.
    website

    ReplyDelete
  7. I've been planning to setup blogger feeds on my blog. It's truly an amazing way to publish interesting contents from other blogs easily. Thanks.

    ReplyDelete