Pulling RSS feeds into Power Pages

RSS (Really Simple Syndication) feeds are commonly used to distribute regularly updated web content such as news articles, blogs, or podcasts. Integrating RSS feeds into Power Pages enhances content engagement without manual updates.

We’ll walk through:

Understanding RSS feeds
Where to display them in Power Pages
Using JavaScript and/or Liquid to fetch and render
Caching strategies for performance
Security and CORS limitations

What You’ll Need

A Power Pages portal (custom site or template)
RSS feed URL (e.g., from a blog or news source)
Access to Power Pages Studio / Portal Management App
Basic knowledge of HTML and JavaScript

Step 1: Understanding RSS Feed Format

RSS feeds are XML documents. A basic feed might look like this:

<rss version="2.0">
  <channel>
    <title>Tech News</title>
    <item>
      <title>AI Revolution</title>
      <link>https://example.com/ai-revolution</link>
      <pubDate>Thu, 25 Apr 2025 10:00:00 GMT</pubDate>
      <description>AI is transforming every industry.</description>
    </item>
    <!-- More items -->
  </channel>
</rss>

Each <item> contains the content we want to display on our site.

Step 2: Identify the Feed You Want to Display

Examples:

TechCrunch: https://techcrunch.com/feed/
BBC World News: http://feeds.bbci.co.uk/news/world/rss.xml
Your own blog (e.g., WordPress provides it by default)

Step 3: Create a Web Page in Power Pages

Go to Power Pages Studio
Select or create a page (e.g., Latest News)
Insert a new HTML component or use Source code view of a section

Add a container element:

<div id="rss-feed">
  <p>Loading news...</p>
</div>

Step 4: Fetch and Parse RSS Feed with JavaScript

Browsers enforce CORS restrictions when trying to fetch RSS feeds directly. Use a CORS proxy or fetch from your custom Azure Function as a bridge. Below is an example using a public proxy (for demo purposes only):

<script>
  const feedURL = 'https://techcrunch.com/feed/';
  const proxy = 'https://api.allorigins.win/get?url=' + encodeURIComponent(feedURL);

  fetch(proxy)
    .then(response => response.json())
    .then(data => {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(data.contents, "text/xml");

      const items = xmlDoc.querySelectorAll("item");
      let html = '<ul>';

      items.forEach((item, index) => {
        if (index < 5) {
          const title = item.querySelector("title").textContent;
          const link = item.querySelector("link").textContent;
          const date = item.querySelector("pubDate").textContent;
          html += `<li><a href="${link}" target="_blank">${title}</a> <small>(${new Date(date).toLocaleDateString()})</small></li>`;
        }
      });

      html += '</ul>';
      document.getElementById("rss-feed").innerHTML = html;
    })
    .catch(err => {
      document.getElementById("rss-feed").innerHTML = "Failed to load RSS feed.";
    });
</script>

Step 5: Styling the Feed Display (Optional)

Add a CSS block to keep things clean:

<style>
  #rss-feed ul {
    list-style: none;
    padding: 0;
  }
  #rss-feed li {
    margin-bottom: 8px;
    font-family: Arial, sans-serif;
  }
  #rss-feed a {
    text-decoration: none;
    color: #0066cc;
  }
  #rss-feed small {
    color: #888;
  }
</style>

Step 6: Optional – Host Your Own Proxy with Azure Function (Recommended for Production)

To avoid relying on public proxies, you can deploy your own CORS-safe service using Azure Functions:

Create an HTTP-triggered Azure Function
Fetch the RSS feed from your function server-side
Return JSON content to the browser

This avoids CORS issues and allows custom filtering or formatting logic.

Step 7: Caching Feed Data (Optional)

Fetching from a third-party RSS feed on every load can impact performance. Use:

Azure Functions + Azure Cache
Store feed summary in a custom Dataverse table and refresh it via Power Automate every hour
Use Liquid to read from the table and render statically

Step 8: Rendering via Liquid (Dataverse-based Caching)

If you’ve saved parsed feed items in a custom Dataverse table, you can render them like this:

{% fetchxml feeditems %}
<fetch top="5">
  <entity name="rss_item">
    <attribute name="title" />
    <attribute name="url" />
    <attribute name="publishedon" />
    <order attribute="publishedon" descending="true" />
  </entity>
</fetch>
{% endfetchxml %}

<ul>
  {% for item in feeditems.results.entities %}
    <li>
      <a href="{{ item.url }}" target="_blank">{{ item.title }}</a>
      <small>({{ item.publishedon | date: "dd MMM yyyy" }})</small>
    </li>
  {% endfor %}
</ul>

This keeps your site fast and secure, fetching RSS only on backend via Power Automate.

Security Tips

Never trust third-party RSS feeds without sanitization
Avoid using public CORS proxies in production
Keep feed links in <a target="_blank" rel="noopener noreferrer"> for safety
Filter unwanted tags/content using a backend parser or sanitize on display

Use Cases

Display industry news
Show internal blog updates
Promote community posts
Embed podcasts or media from syndicated sources

Leave a Reply Cancel reply