RSS Feed Web Part for Office 365

Update: SharePoint Online RSS Viewer now supports external feeds

 

[warning_box]Note: This version of the Web Part only supports external feeds. SharePoint Online RSS feeds do not work with it.

A newer version of the web part is available at Updated Release: RSS Feed Web Part for Office 365[/warning_box]

As it is commonly known, only Sandboxed Solutions are allowed on Office 365. A consequence of this is that some of the SharePoint functionality that one would like to use is not available. For example, any external connections to other sites aren’t supported, which also means that the RSS Viewer Web Part and the XML Viewer Web Part are not available at the moment (http://community.office365.com/en-us/w/release-notes/312.aspx#SharePointOnline) as they would try to get data (RSS Feed, e.g.) from an external site.

As I wanted to integrate a RSS feed on my site, I was looking at other options of having this functionality, including programming my own web part. Naturally, reproducing the functionality of the RSS Viewer Web Part wouldn’t help, as any outgoing connections on the server side are not allowed (one simply can’t grab the feed from an external site). I was considering using some jQuery, however,  as it runs on the client side (in the browser), and we are thus not restricted here in terms of accessing external feeds. I found a nice plugin named zRSSFeed that provides exactly what I wanted, and as I wanted to create a solution that is easy to reuse and configurable, I started to develop my first own Web Part.

I created a new solution in Visual Studio, added a Web Part, added the required zRSSFeed and jQuery files, and included them in my Web Part. Together with some minor modifications to the zRSSFeed code and some custom properties from the Web Part, I now have a RSS Feed Web Part that works in Office 365! The download links (.wsp Solution for deployment, as well as the source code) are at the bottom of this post.

image

 

How to use the Web Part:

The first step is to upload and activate the solution file to your Office 365 site collection. Go to your target Site Collection’s settings, and select Solutions under Galleries:
Image(15)

Click on Upload Solution
Image(16)

Browse for the solution file on your hard drive, and confirm.

Afterwards, click on Activate
Image(17)

The Web Part is now available in the Web Part Gallery. When you edit a page and add a Web Part, you can find it under the category Custom:
Image(18)

 

Image(19)The Web Part offers the following customisation options:

  • RSS Feed Url – this is of course required to display something. Enter the target feed here
  • Custom CSS Link – if you want to apply your own CSS styles, add a link to a .css file here that contains the appropriate styles
  • User Solution’s jQuery – sometimes you already have jQuery loaded on your site. If you want to avoid any conflicts, you can uncheck this option (checked by default) in order to not use the jQuery source provided with this solution
  • Number of items to display – how many items should be shown in the Web Part

 

 

If you need to know the layout of the output for your styling purposes (tags, classes), here’s the default set by zRSSFeed:

<div id="test" class="rssFeed">
  <div class="rssHeader"><
    <a>... (heading) ...</a>
  </div>
  <div class="rssBody"></div>
    <ul>
      <li class="rssRow odd">
        <h4><a>... (title) ...</a></h4>
        <div>... (date) ...</div>
        <p>... (description) ...</p>
        <div class="rssMedia">
          <div>Media files</div>
          <ul>
            <li><a>... (media link) ...</a></li>
          </ul>
        </div>
      </li>
      <li class="rssRow even">...</li>
...
    </ul>
  </div>
</div>

 

Limitations:

You cannot apply different style sheets to multiple Web Parts on a page. The style sheet that is loaded last will be used for all Web Parts (normal behaviour for CSS, what happens is that the same style is defined multiple times, the last definition ‘overwrites’ the previous ones). This also means that if you add two Office 365 RSS Feed Web Parts onto the same page, and provide a custom CSS link for the first Web Part, the default style sheet for the second Web Part will ‘overwrite’ any definitions that you made in your own CSS file.

 

Downloads:

[warning_box]Note: This version of the Web Part only supports external feeds. SharePoint Online RSS feeds do not work with it.

A newer version of the web part is available at Updated RSS Feed Web Part for Office 365[/warning_box]

Please feel free to modify the source code according to your own needs. If you’ve got an interesting change, you can also leave a comment here or send me an email.

Share This

Rene Modery

Microsoft Office Servers and Services MVP, working as a Solutions Architect (SharePoint, Office 365) in Singapore