Custom Substack Post Feed Component
I wanted to display my Substack posts on my website instead of a subscribe link, so I created my own Substack feed component! And here's how...
After looking around for multiple options to be able to display some of my Substack most recent posts on my website, I realised that there was not much out there available.
All I wanted was to simply show a small snippet of my articles with a couple of details, so that people can click on them and be taken to my posts directly. But all I could find on Substack was embedding their code to allow users to subscribe to a newsfeed, or links to the main page of the Substack.
In the end, I decided to create my own component that renders on my website so I could show the most recent posts.
I also wanted to make sure that it was upto date with my most recent posts, so I didn’t have to go to my own profile page and add it after I published a new Substack article.
My profile page (https://pascalcouturier.com) is coded in Vue.js and I created that component as a Vue.js component originally, however, after I had a few people ask me how they could add it to their websites in various languages, I created a vanilla JavaScript component.
For a full breakdown of this post component, you can check out a small page I created for it:
How the Component Works
I wanted to make the component as simple as possible for people to add to their website regardless of their coding level and the type of site it’s being hosted on.
In order to do this, I created a component in JavaScript that can be imported into any website and this creates the component on the page load.
Super simple and easy!
The code is available on GitHub, if you want to check it out to make sure it’s only doing what I say it’s doing because when adding anyone’s code to your own site, it’s super important to know what and how it’s doing something.
The projects repo can be found here:
By adding the <script> tag below to your website, it will allow you to use the component:
<script src="https://api.pascalcouturier.com/resources/scripts/components/substack-post-feed.js"></script>This downloads the resource to your site and let’s it be used as a component.
What it does, is let’s you use the tags <substack-posts-feed> within your site and it will render the Substack feeds on your page (obviously, you need to add some settings, but that’s in the next section).
Demoing the Component
at the time of writing this, it’s still in it’s super early stages and we’ll see how it goes from here, but different substack pages have different attributes and I’ve, so far, customised it to the types of posts I do on Substack, others may be different.
This means that some things may not render the way they should in some cases, BUT you can test it out on the demo site too!
Simply go to the Demo section of the page, here.
And you can enter the substack page name for it to render, the top most recent posts to display in the feed, and you can even update the styling of the feed that you want as well!
Once you edit the details, click on Update Feed and it will display the feed in the section below this:
You can fully change the styling of the main component classes and test it out in the demo section too.
Here’s an example of changing the background colour of the component and also the hover colour of the cards themselves:
Each card takes you to the Substack page directly when they are clicked in a new window too.
Adding the Component to your Website
To make things super easy, all you need to do in order to have the component render on the website are 3 things…. 1 of them is restricted at the moment but I’ll get back to that in a sec…
Add the Script Tag to your Header
This is simply to add the below
<script>tag to the head of the page/website so it has access to the JavaScript component:<script src="https://api.pascalcouturier.com/resources/scripts/components/substack-post-feed.js"></script>Add the component to your page
Now that the script is added, you can add the component to your page, wherever you add it is where it will be rendered, so you may need to do some extra styling depending on your site, but the base component is this:
<substack-posts-feed substack-page-name="your-substack-page-name" ></substack-posts-feed>*NOTE: Make sure you replace the
substack-page-namewith the name of your Substack. i.e. mine is sqeel404.substack.com so my Substack name is sqell404.This will render the component with it’s default settings with no extra customisations.
Have Domain Added to Whitelist - (Currently access is restricted)
Ok, so this is in testing and I’m using a custom made API that I built to get and load the data for the component.
Currently the access is being restricted to specific users for testing, but keep posted when it’s available, or feel free to clone and edit the code from GitHub and create your own API endpoint in the meantime.
Once the above is completed, you should be able to see the component loading on your site and render any Substack feed that you put in the substack-page-name section.
Component styling
Like I mentioned just before, the component has its default styling and values, however, you can also manually adjust the style to the way you want in the code.
The Demo Page allows you to test out the styling and when you have something you like, you can copy the code and add it as a string to the component.
Simply add the styling from the text area into the custom-css-feed property and it will update the feed to match with the code.
The component filters out any non-recognised css properties, so it filters any non allowed characters and parameters to keep it a little more safe.
<substack-posts-feed
substack-page-name="your-substack-page-name"
custom-css-feed=".rss-feed {background-color: green} .rss-feed__item-container:hover {background-color: orange}"
></substack-posts-feed>This allows for the changes of styling to update the feed accordingly to what you’re wanting:
Style Classes
All the classes that are within the component can be found on the FAQ’s section of the component page itself:
Usage Examples
You can also find all the properties and explantations on the component values on the website within the FAQ’s section as well:
Summary
This is a small fun little component that I put together for myself, but after a few people asked if they could use it too, I’ve created something that can be reusable.
At the moment it’s not fully publicly available because of the custom API I’m using, but you can test it out on the Demo site in the meantime and have a look what it may look like for your feed, even play around with the styling to what you might want.
I’ll be updating this as I go and there’s a version tracker on the site too for any changes, but keep me posted and if you want to use it like this post so I can see if anyone else wants a feed like this.
Anyway, it’s just a fun component that I hope people will be interested in, and if so, then I’ll make it a bit more publicly available without having the domain whitelist… after it’s been tested a bit more 😅
And as always, until next time, happy dev-ing peeps!