Saturday 26 April 2014

RSS / Atom Feed List with javascript 2

I'm a regular visitor for some interesting blogs and sites to get new posts. I just want those blog or site latest post links in my website. By that I can easily go to read those posts. So, I developed one plain javascript plug-in to do that.

Here is the GitHub Link to My Repository. You can simply download the source code. Very easy to use.

Syntax
loadFeed(url,element,num=null,enableContent=false);
Features
  • By using third parameter of our function, we can control how many entries should be visible for each feed.
  • We can optionally enable or disable content snippet for each feed.
  • Easy to use.
  • Used only plain javascript.
  • Easy to apply css style.
  • You can apply for your blogger pages too.
Parameters definition :
  • url - enter the feed url
  • element - id of the element
  • num - this is optional. By default, the Feed class loads four entries. If you want more, you can manually set number of entries for each feed. Else use null as a third parameter.
  • enableContent - We can manually enable or disable content snippet for each feed using this parameter. If you want show content, simply add true as a fourth parameter. Else use false as a fourth parameter.
Code Usage

HTML
JS
loadFeed('http://cj-ramki.blogspot.in/feeds/posts/default?alt=rss','feed1',10,false);
loadFeed('http://chillydraji.wordpress.com/feed/','feed2',null,true);
Styling Guide
In this plugin, We are separated each feed into three sections. 1. Feed Title. 2. Post Title 3. Post Content snippet
So, We are using, three class for those three sections.
  • .feed_title - for title of the Feed.
  • .post_title - for Post title.
  • .post_content - for Post content snippet.
Example:
    .feed_title{
          color:green;
    }
    .post_title{
        color:red;
    }
    .post_content{
        color:blue;
    }
You can see more detailed documentation in README of that plug-in. 

In blogger, we have "FEED" widget like the same. But, you can't use that widget within blogger page. So, I implemented in this blog. You can Find that in Interested Blogs page. I used my code to build that feed page.

2 comments: