Home > RSS Feed Implementation

RSS Feed Implementation

A brief description on how to implement CEB RSS feeds into your intra-net. It is a very simple process and consists of three parts:

jQuery

a. Scripts to link to:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script language="javascript" src="http://cebviews.com/intra-feed/jquery.zrssfeed.min.js" type="text/javascript"></script>

b. Function:

Consists of three parts:

CSS ID:
eg. #rss_tile_date_content
RSS feed:
eg. http://cebviews.com/adr/category/content-type/insight-daily/feed/
Options:
eg. limit: 5, content: true, titletag: 'h4'

Options are:

limit (10):
The number of feeds to return.
header (true/false):
If true, includes the header section containing the feed name and link.
date (true/false):
If true, includes the feed date section. content true If true, includes the feed description.
snippet (true/false):
If true, the snippet short description is shown available when available.

Below are three examples with different options set for each feed.

<script>

$(document).ready(function() {

// configuration variables:

$('#rss_tile_date_content').rssfeed('http://cebviews.com/adr/category/content-type/insight-daily/feed/', {

limit: 5, content: true
});

$('#rss_tile_date').rssfeed('http://cebviews.com/adr/category/content-type/insight-daily/feed/', {

limit: 5, content: false
});

$('#rss_tile_date_snippet').rssfeed('http://cebviews.com/adr/category/content-type/insight-daily/feed/', {

limit: 5, content:true, snippet:true
});

});

</script>

HTML

Add the div tag with the ID stipulated in the function to show the feed on a page. The examples below will show the feeds in the function shown above:

<div id="rss_tile_date"></div>

<div id="rss_tile_date_snippet"></div>

<div id="rss_tile_date_content"></div>

CSS

The jQuery function outputs the following code:

<div class="header">FEED HEADER</div>

<div class="body">
<ul>

<li class="row">
<a class="title" href="LINK">TITLE</a>

<div class="date"></div>

<p>CONTENT</p>

</li>

</ul>
</div>

To control attributes of each feed you will have to nest the CSS as shown below with the div ID you stipulated in the jquery function (see above):

#rss_tile_date { }

#rss_tile_date .feed {

font-family: Arial, Helvetica, sans-serif;

font-size: 90%;

margin: 0 3em;

}