Implementation code
Get a zip with all the sample HTML and any spaecial CSS or JS needed:
Download a ZIP file
More on how to use this
<div id="news-updates"><cite>Loading...</cite></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.8/handlebars.min.js"></script>
var feedTemplate = '{{#each item}}'+
'<div class="padding-top-medium">'+
'<span class="label">{{pubDate}}</span>'+
'<h6><a href="{{link}}" class="readmore">{{title}}</a></h6>'+
'</div>'+
'{{/each}}';
function feedImporter(feedUrl,template,destination){
this.feedUrl = feedUrl;
this.template = template;
this.destination = destination;
}
feedImporter.prototype.init = function(){
function queryData(properties) {
$.ajax({
url: 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22'+ encodeURIComponent(properties.feedUrl)+'%22limit%206&&format=json&diagnostics=false&_maxage=3600',
template: properties.template,
destination: properties.destination
}).done( function(data) {
var mappedData = data.query.results,
template = Handlebars.compile(properties.template);
$(properties.destination).html(template(mappedData));
});
}
queryData(this);
}
newsUpdates = new feedImporter("https://www.ebi.ac.uk/about/news/service.xml",feedTemplate, "#news-updates").init();