How to embed Medium on your website, the easy way
UPDATE Dec 2020:
Since I wrote this, I have moved on from the original project that inspired me to create the embedded medium widget. If you have used the free script you will need to update your website for things to continue working. The info reflects the latest and greatest and for more detailed docs visit our website.
We’re just starting our journey with a brand new venture and one of the first things I wanted to get sorted was our blog. But here’s the dilemma, we have no traffic!!!! So my thoughts immediately drifted to Medium, they have traffic and honestly, the platform is really nice to use. Why wouldn’t we just use it for the blog?
The only real downside I could see was losing what little early visitors we have as soon as they click on the blog tab on our website. Hmmmmm.
So I googled about to find out how to embed a Medium publication on our website. The answer is it can be done, but… you do need some coding skills.
I have coding skills :) so off I went inspired by this excellent post https://medium.jasonmdesign.com/display-medium-articles-on-your-site-d772b3b05779 (kudos to Jason). I quickly realised that to get a polished experience it was going to take a bit of effort. I also wanted to play with Vue.js and see if I could make an embeddable.
If you want to embed your Medium publication on your own website and keep visitors you can now do it with a few lines of code to copy and paste onto your website.
Here’s an example of what looks like.
Put this on the page where you want to see the post slider or grid
<div id="retainable-rss-embed"
data-rss="https://medium.com/feed/retainable,
https://medium.com/feed/vue-mastery"
data-maxcols="3"
data-layout="grid"
data-poststyle="inline"
data-readmore="Read the rest"
data-buttonclass="btn btn-primary"
data-offset="-100"></div>Put this in the footer of your site:
<script src="https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js"></script>The docs are here and you can see it in action on this demo page. You can choose between a slider or a grid and have people read the full post right on your own website.
What it does
- Pull one or more Medium publications into a single list of articles
- Display them in a grid or slider — you can choose the number of columns
- When you click on an excerpt view the full post, either as a modal, inline or a link back to Medium
- Includes a previous and next button at the bottom of each post
- Inherits the styling from the rest of your website
Feel free to use our hosted script file or you can build your own from the GitHub repo.
The code is open source and we’re happy for you to use our script tag, no strings attached. So no excuses, show your customers a bit of love ❤️.
If you do want to use the script tag, then be sure to head to the website and subscribe to the waitlist, we’ll keep you posted about any updates to the script.
