Embed your Medium blog

Keep visitors on your site OR attract new visitors from Medium by embedding your Medium blog on your website. This was the frustration we faced when deciding on where to host our blog and with a bit of research we discovered it was possible, but it was a faff. So we built an embeddable.

One div and one script tag and you can put your Medium blog on your website or how about on your dashboard. That's right, why keep all your great content just for prospects, your existing customers get left out. These are the folks who present your biggest opportunity for growth, so keep them happy, keep them engaged and keep them informed about what you're thinking and doing.

How to embed

Embedding is simple just place a div tag with your options as attributes wherever you want your feed to display and include one javascript file at the bottom of your page. Yup that's it. Nothing else. Simple.

The attributes you can set let you tailor things, here's what you can do

Option	Default	Reqiuired	Details
id	n/a	Yes	You must set the value of your entry point's id to "retainable-rss-embed".
data-rss	n/a	Yes	You must provide at least one valid url to the RSS endpoint, multiple rss feeds can be combined with a comma separated list
data-maxcols	2	Optional	must be an interger of 1, 2, 3, 4, 6 or 12 and controls the number of cols display in the index view
data-layout	grid	Optional	Styles the index of available posts, can be set to "grid" or "slider"
data-poststyle	modal	Optional	The style of posts when you click on an excerpt in the index can be set to one of: "modal", "inline" or "external", external opens the post's source with a target of _blank
data-buttonclass		Optional	Space separated list of classes to apply to the read more button
data-readmore	Read more	Optional	Text to show on the read more button
data-offset	0	Optional	If you have a fixed header then you can set a negative offset integer for scrolling when the posts are shown inline e.g. -100 (converts to pixels)

and here's an example of what it might look like.

<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">

The script tag looks like this:

<script src="https://www.twilik.com/assets/retainable/rss-embed/retainable-rss-embed.js"></script>

You can see it in action on this demo page.

If you want to keep updated about changes to the code, click here