In this SharePoint tutorial, we will discuss the RSS feed in SharePoint 2013, SharePoint 2016, SharePoint 2019, or SharePoint Online. We will discuss how to implement an RSS feed in SharePoint Online.

Table of Contents

RSS feed in SharePoint Online/2013/2016/2019

There are two approaches we can display RSS feed in SharePoint sites.

using Rest API, JavaScript, jQuery and HTML
using RSS Viewer web part

Many times, we want to show data from an RSS feed URL to our sites for displaying dynamic contents which will be updated periodically just like the latest news and latest events.

Showing content from each feed helps visitors to get updated data every time. A little bit of SharePoint Rest API and JavaScript code is all you need to lookup common feed tags and inject their contents into dynamically created HTML elements.

Today we will parse data from our own website SharePointSky.com and see how we can display parsed data into our page.

Also, we will see how to use the RSS Viewer web part to add RSS feeds from external sites to your SharePoint Online site.

How to parse and add an RSS feed using Rest API and JavaScript and display data into SharePoint Online or SharePoint 2013/2016 Page?

Here we will see how to add an RSS feed from an external site to SharePoint online site using Rest API and JavaScript and HTML.

Below are some prerequisites, which required before implementing below code.

Prerequisites –

https://jquery.com/download/ – To get latest jquery.min.js
Any IDE that supports HTML and JS i.e. Notepad++, VS 2015.
Little knowledge about CSS, HTML, JS.

I personally recommend creating an HTML page and referring all the CSS, JS files instead of injecting the same code directly to the script editor web part. As it is easy to maintain and manage.

In the below HTML file make sure to add below 2 major references as discussed above in <Head> section.

<head>
<Script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
< Script src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/JS/RSS.js"></script>
</head>

HTML File:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/JS/RSS.js"></script>
</head>
<p style="color:red"><b><u>EXAMPLE OF RETRIEVING RSS FEEDS FROM SHAREPOINTSKY.COM </u></b></p>
<div id="myData">
</div>
</html>

Below is the JavaScript (.js) file which will contain the JavaScript file.

RSS.JS File:

//main function, which triggers on load
$(window).bind("load", function()
{
//variable declaration section
var MaxCount = 10;
// SharePointSky feed url
var FeedUrl= 'https://www.spguides.com/feed/atom/';
var ShowDesc = true;
var ShowPubDate = false;
var DescCharacterLimit = 100;
var TitleLinkTarget = "_blank";
if (FeedUrl == undefined) return;
//forming query based on input param declared in variable section
var YQLstr = 'SELECT channel.item FROM feednormalizer WHERE output="rss_2.0" AND url ="' + FeedUrl + '" LIMIT ' + MaxCount;
$.ajax({
url: "https://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(YQLstr) + "&format=json&diagnostics=false&callback=?",
dataType: "json",
success: function (data)
{
$("#myData").empty();
// will check if results are not null, means data from feed URL
if(data.query.results != null)
{
if (!(data.query.results.rss instanceof Array)) {
data.query.results.rss = [data.query.results.rss];
}
$.each(data.query.results.rss, function (e, itm)
{
// creating anchor tag by using
s += '<div class="w3-panel w3-card-2 w3-card-padding" onclick="myFunction(this.id)" id="feedbar'+ e +'" style="background:#ffffff; font-weight: 700;"><a class="col-md-4 control-label lblcol-md-4" class="anchFeed" id="idFeedLink'+ e +'" style="color: #005293; padding-bottom:3px; font-family:Verdana, Geneva, sans-serif;" href="' + itm.channel.item.link + '" id="idFeedAnch'+ e +'">' + itm.channel.item.title + '</a></div>';
});
}
//binding passed data to myData div, which is defined in HTML page
$("#myData").append(s);
}
});
});

Execute feed URL using Postman

Postman is a very good addon to test Rest API execution in SharePoint online. If you are new to postman sharepoint rest api, check out SharePoint online tutorial on Access Rest API using Postman in SharePoint Online/2013/2016.

Every feed URL will have below highlighted tags like title, subtitle, link, icon, etc. The same URL can be checked in browser its self, but the advantage of using Postman would be, you can view data into either JSON/XML for better and managed user experience.

<title type="text">SharePointSky | SharePoint Office 365 &amp; Azure Tutorials</title>
<subtitle type="text">SharePoint & Office 365 & Microsoft Azure</subtitle>
<updated>2018-03-26T03:59:15Z</updated>
<link rel="alternate" type="text/html" href="https://www.spguides.com" />
<id>https://www.spguides.com/feed/atom/</id>
<link rel="self" type="application/atom+xml" ref="https://www.spguides.com/feed/atom/" />
<generator uri="https://wordpress.org/" version="4.9.3">WordPress</generator>
<icon>https://www.spguides.com/wp-content/uploads/2017/11/favicon-image.png</icon>

It looks like below:

HTML Page URL- /sites/Bhawana/SiteAssets/SitePages/RSS.html
JS URL- https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/JS/RSS.js
Page URL- https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SitePages/AngularDemo.aspx

I have all the .html, .js file inside Site Assets folder and then I have create a web part page as AngularDemo. In that we part page, add a content editor web part and give the HTML file page.

Once you save above changes in the content editor webpart property and save the page, you can see below output. On click, it will navigate to the linked item like below.

RSS Viewer Web Part in SharePoint Online

Now we will see how to use the default RSS Viewer web part to display RSS feed from an external website in SharePoint Online site.

Here also we will use the SharePointSky.com RSS feed URL.

The same we will implement in a web part page. Open the SharePoint Online Site, create a web part page. Edit the web part page and click on “Add a Web Part”. Then choose “RSS Viewer” from the “Content Rollup” category.

This will add the web part to the SharePoint web part page, click on Open the tool pane from the RSS Viewer web part.

This will open the web part properties dialog box. Here put the RSS Feed URL, Feed Limit and also you can change the Feed refresh time which is by default 120 minutes (2 hours).

Now save the page and then you can see the RSS feed will appear like below:

sharepoint 2016 rss feed using rss viewer web part

In this SharePoint tutorial, we will discuss how to display RSS feed in SharePoint Online site using RSS viewer web part as well as how to display RSS feed using Rest API in SharePoint Online or SharePoint 2013/2016.

Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”