Grab RSS feeds content from blog site using jquery

Sometime we need our blog website content as a widget in website. Its a quite easy process using zRSS Feeds reader

Download the latest version of zRSS feed here

Include the jQuery and zRSSFeed libraries in your page

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&#8221; type=”text/javascript”></script>
<script src=”jquery.zrssfeed.min.js” type=”text/javascript”></script>

Add a DIV tag where you want to display the feed as widget and give it an ID

<div id=”my_blog_content”></div>

Now add the script to call the zRSSFeed plugin with the RSS URL and any options. Our example gets 10 feeds from the Reuters site.

<script type=”text/javascript”>
$(document).ready(function () {
$(‘#my_blog_content’).rssfeed(‘http://feeds.reuters.com/reuters/businessNews&#8217;, {
limit: 10
});
});
</script>

By default it returns all data with non css format . Override the css to file in your website like

<stylesheet>

#my_blog_content .rssHeader{
display:none;
}
#my_blog_content .rssBody ul{
margin:0px;
padding:0px;
}
#my_blog_content .rssBody ul li{
list-style:none;
}
#my_blog_content .rssBody ul li div{
font-size:9px;
fint-weight:bold;
}
#my_blog_content .rssBody ul li h4{
margin-bottom:3px;
}
#my_blog_content .rssBody ul li a{
color:#fff;
}
#my_blog_content .rssBody ul li a:hover{
color:#fff;
text-decoration:underline;
}
</stylesheet>

 

Complete example

In veiw file

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>
<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”content-language” content=”en” />

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&#8221; type=”text/javascript”></script>
<script src=”jquery.zrssfeed.min.js” type=”text/javascript”></script>

<title>Grab posts from Blog</title>

<script type=”text/javascript”>
$(document).ready(function () {
$(‘#my_blog_content’).rssfeed(‘http://feeds.reuters.com/reuters/oddlyEnoughNews&#8217;);
});
</script>
<stylesheet>
#my_blog_content .rssHeader{
display:none;
}
#my_blog_content .rssBody ul{
margin:0px;
padding:0px;
}
#my_blog_content .rssBody ul li{
list-style:none;
}
#my_blog_content .rssBody ul li div{
font-size:9px;
fint-weight:bold;
}
#my_blog_content .rssBody ul li h4{
margin-bottom:3px;
}
#my_blog_content .rssBody ul li a{
color:#fff;
}
#my_blog_content .rssBody ul li a:hover{
color:#fff;
text-decoration:underline;
}
</stylesheet>
</head>
<body>
<h4>Data</h4>
<div id=”my_blog_content”></div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s