Search code examples
javascriptcssrss

How to write your own styles for RSS feeds


I've been using RSS.app to create the RSS feed for Instagram posts. I did customize the widgets through their website as close as I could but it's not there the way the client wants. So I thought of writing my custom CSS for the RSS feed.

So I guess my question is, is there any way I could write my own styles for that RSS feed. If not, then is there a website where I could generate and style the RSS feed according to my own liking.

The reason I'm using RSS.app is because it allows you to create a feed by using a public Instagram account without asking for credentials of clients' account.

Below is the customized RSS feed that I generated from their website. Here is a codeSandbox

<rssapp-wall id="FBJdgbQhIgkwCJp3"></rssapp-wall>
    <script
      src="https://widget.rss.app/v1/wall.js"
      type="text/javascript"
      async
    ></script>

And this is the design I'm hoping to create.

Please any help or suggestions would be appreciated. Thanks!


Solution

  • You could just use the API resource and build your own DOM, which might be simpler then hacking away at the dom generated by the web component.

    <pre id="feed"></pre>
    <script>
      fetch("https://rss.app/api/widget/wall/FBJdgbQhIgkwCJp3?")
        .then(res => res.json())
        .then(v => document.getElementById("feed").innerHTML = JSON.stringify(v,null,2)
      );
    </script>