FeedEk jQuery RSS/ATOM Feed Plugin


NEW! FeedEk v2.0 released!

FeedEk is a jQuery plugin for parsing and displaying RSS and Atom feeds. FeedEk uses Google Feed API to retrieve feeds. You can obtain feeds easily from any domain. No need for server-side scripts.






Usage

  1. Include jQuery and FeedEk plugin scripts into your page.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="FeedEk.js"></script>
    
  2. Add a placeholder for the plugin to your page

    <div id="divRss"></div>
  3. Call the plugin

    Basic

    $('#divRss').FeedEk({
    FeedUrl:'http://rss.cnn.com/rss/edition.rss'
    });
    

    With Options

    $('#divRss').FeedEk({
    FeedUrl:'http://rss.cnn.com/rss/edition.rss',
    MaxCount : 5,
    ShowDesc : true,
    ShowPubDate:true,
    DescCharacterLimit:100,
    TitleLinkTarget:'_blank',
    });
    

    With Date Format Options

    <script src="moment.min.js"></script> 
    <!-- OR --> 
    <script src="moment-with-langs.min.js"></script>
    
    $('#divRss').FeedEk({
    FeedUrl:'http://rss.cnn.com/rss/edition.rss',
    MaxCount : 5,
    ShowDesc : true,
    ShowPubDate:true,
    DescCharacterLimit:100,
    TitleLinkTarget:'_blank',
    DateFormat: 'MM/DD/YYYY',
    DateFormatLang:'en'
    });
    
IMPORTANT: Moment.js (great javascript date library) is used for DateFormat options. You must include Moment.js for date format.
If you want to localize date format (day name, month name) you must include Moment.js with langs instead.
Please visit moment.js Moment.js format examples and languages for more information.

Options

Name Default Required Description
FeedUrl Your Feed Url Yes The Feed URL
MaxCount 5 No Feed Item Count
ShowDesc True No Option to show Feed Item Description
ShowPubDate True No Option to show Feed Item Publish Date
DescCharacterLimit No Limit No Feed Description Characters Limit Count
TitleLinkTarget _blank No Option for Feed Title Link Target
DateFormat New None No Date Format for Feed Publish Date
DateFormatLang New en No Date Format Language for Feed Publish Date
IMPORTANT: Moment.js (great javascript date library) is used for DateFormat options. You must include Moment.js for date format.
If you want to localize date format (day name, month name) you must include Moment.js with langs instead.
Please visit moment.js Moment.js format examples and languages for more information.

Style

You can modify your feeds with css. This is the css code which used for demo

.feedEkList{width:450px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;}
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;}
.feedEkList li:last-child{border-bottom:none;}
.itemTitle a{font-weight:bold; color:#4EBAFF !important; text-decoration:none }
.itemTitle a:hover{ text-decoration:underline }
.itemDate{font-size:11px;color:#AAAAAA;}

Share

 



Comments

Author

FeedEk is created by Engin KIZIL

» jquery-plugins.net   » enginkizil.com

Changelog

Version 2.022.01.2014 (Current Version)

  • DateFormat option added to feed publish date.
  • DateFormatLang option added to feed publish date format.

Version 1.1.204.03.2013

  • Character Limit added to feed description.
  • Feed title link target option added.

Version 1.0.0

  • Initial Release
  • Advertisement Advertise with us!
  • Latest jQuery Plugins