Implementing RSS on Your Website Using Contentstack

RSS (Really Simple Syndication or Rich Site Summary), in simplest terms, can be described as a way to let your readers know that new content is published. It saves your readers' time visiting your website and looking for any newly published content manually.

If your website allows readers to subscribe to your RSS feeds, readers will get a notification that new content is available, along with a direct link to the newly published article.

Many websites have this provision, allowing users quick access to the website content. You can easily add this functionality to your website using Contentstack. In this guide, let us discuss how to implement RSS on your website.

Prerequisites

Overview of the Process

For our exercise, we have used Express.js and Nunjucks for templating. Our sample website that we have built for this exercise has two main navigation sections named Home and Blog with a header and footer.

The Home page has a basic template, whereas the Blog page consists of multiple blogs posted through Contentstack with dynamic routes. We have created sample code and content types for this exercise. Download it from our GitHub page and import the content types in your stack

We have used the following sample content types for this exercise:

  1. Express Header: Inside this content type, create an entry which will serve as the header of your website.
  2. Express Footer: Inside this content type, create an entry which will serve as the footer of your website.
  3. Express Home: Create an entry inside this content type which will be the homepage of your website.
  4. Express Blogs: Create multiple entries inside this content type. Make sure you provide proper data within the trial blog content-type schema. For this example, we are considering the blog post format. Therefore, the rss.xml file will have the following format. For your use case, it can be news, blogs, recent articles, and so on where the data is added at a given time interval for the RSS Reader to read.

    XML file.JPG

Note: RSS is implemented for a specific section or a page of your website & not for the entire website. For example, we have implemented it in our Blog section or page so the content-type is also specific.

Once you have added entries to these content types, publish them on your environment. In our example, we have published them on the “production” environment.

Working with the Code

Before we implement RSS, let's discuss the sample code and what it holds. Based on this, create your own code for your website and add the RSS functionality as required.

  1. Open the downloaded code in any code editor of your choice. The downloaded code will look similar to the following:
    Folder structure.JPG
  2. Now, open the config.js file and add your stack credentials such as your API Key and Delivery Token. Also, provide the environment name, port number, UIDs of Header, Footer, Home, Blog, content types and their respective entries as shown below:
    RSS.png
  3. To get the UIDs of the content types and entries, open the entry, click on the “i” on the right that will open the Entry Information modal, and you will see the UID of content type and entry as shown below: Entry_Page.JPG

    Note: For Blog content type, just provide the UID of the content type. In the rootPath section provide the URL of your website (in our example it is http://localhost:4000) and in your case, it can be (www.yourwebsitename.com). Also, baseUrlContenstack cannot be changed.

  4. Next, we need to install the required dependencies. So fire up your terminal, move inside the project directory, and run the following command:
    npm install
  5. Now start the server using the following command:
    npm start
    You should see the app running on localhost:4000. You will see the rss.xml file created along with syntoken.txt file within the root directory.

  6. You can access the RSS file by hitting this route http://localhost:4000/rssfeed. It will be different for your website based on its name (for example, www.yoursitename.com/rssfeed).
  7. Once the file is created and you can see the data in it, select any RSS Reader of your choice such as Google's FeedBurner where you can add your feed.
  8. Now paste the URL (for example, www.yoursitename.com/rssfeed) in it as shown below: FeedBurner.JPG

Note: We've used the URL created by ngrok (https://5179d861.ngrok.io/rssfeed) for this example.

Once you have added the feed to the reader, you can now periodically watch for any content updates for your blog.

Blogs.JPG

How it Works

For this example, we have used the Sync API. The RSS just gets updated through Sync APIs instead of getting created every time on the running server. Refer to our Sync APIs documents to understand how it works.

The RSS file will be updated with the content whenever a new blog is published. However, you won't see any changes within the Feedreader service as it will be updated based on the given time interval. The interval time for the RSS file update is different from the Feedreader service update time.

The changes won't be reflected by just refreshing the page. After the time you have provided in your code, you'll see the differences (if any new content is published). The RSS page will change based on the changes you have made to your blogs; for example, if you have deleted any blog, Google FeedBurner will update accordingly.

Additional Resource: Refer to our documentation on how to send Contentstack Content Over Email using the Express.js web application framework.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^