Post Medium articles to your website with jQuery and Kimono

A straight-forward guide to getting your latest Medium articles on your personal or company website.

6 min readJan 15, 2016

For the anxious:

We’re using Kimono to create a JSON feed from Medium posts.
We’re parsing it extracting the title, link, date, and reading time, and embedding them into our web page with jQuery.
Here’s a demo on JS Bin you can play with, and another one on our company website (scroll to the bottom).

Update: You can use Import.io as well in order to generate the JSON feed, just note that it doesn’t return JSONP like Kimono does, so make sure you change that in the jQuery code to just json, as well as swap out the node names according to how Import.io names them.

Since I’ve decided to start writing for the company blog more often, I went with Medium as the platform for the writing and distribution of the articles. It kind of seems like the obvious choice in this day and age.

However, I wanted to have the latest posts appear on our site as well without any of us needing to update and redeploy the site each time a new article is published because we want to expose the content directly to our visitors who wouldn’t necessarily be inclined to visit the blog specifically.

As it turns out this is not so easy to do, unless you are a developer and know how to work with APIs.

Being a designer and a basic front-ender, I figured there has to be a way to do this with the almighty jQuery. After some googling I’ve stumbled upon several hints that made me think it might be possible, and it involves getting JSON-formatted content from Medium, and parsing it into your HTML with jQuery.

Getting the JSON

There’s this thing where you can append a string to the Medium URI that will make it return JSON-formatted content, instead of a standard web page you would expect. It’s a kind of an undocumented feature, at least I didn’t find any documentation of it.

Here’s an example URI that will return JSON for our latest posts:

Unfortunately, it turns out this is useless to us as something called CORS (Cross-origin resource sharing) prevents us from using this JSON content on our web page. Tough luck.

Kimono to the rescue

This is when I remembered that I’ve recently discovered a service called Kimono that allows you to basically create APIs out of standard web pages, dynamic or static. They also have a very generous free plan. Awesome, so let’s get into it!

After registering for an account, you’re supposed to install a browser extension that will allow you do to what I’m about to describe:

Go to your profile’s latest posts page—for us that’s https://medium.com/@sprawsmdoo/latest—and hit the extension button to bring up Kimono’s controls which will help you select the elements we need. For the purpose of this demo we will use the posts’ title, date, and reading time (length).

Here’s a video explaining how to use the Kimono extension to do this.

There’s an important thing to pay attention to: make sure you only have one collection. You can name it however you want, but note the name for the jQuery code for later, I named ours “posts” and reference it as such in the script.

Another important thing to note here concerns your posts’ content. Medium allows a great deal of flexibility in terms of your posts’ content, in that it allows you to start the post with a title, or have no title at all, place an image before the title, etc.

These irregularities — if present on your profile — will most likely confuse the Kimono parser, and it won’t be able to recognize all the elements on the page. For instance, you may have 8 posts on the latest posts page, and Kimono might only recognize 4 of them due to their irregular structures.

If you run into a problem like this, it would be best to not use the visual element picker which is Kimono’s default, but the advanced one that allows you to input CSS selectors as element targets.

For this demo, the targets are the following CSS selectors:

Titles:

Dates:

Length:

This is in fact the most secure way to go about it, and it will ensure that you always target the right element and get all of them from the page. It’s much more full-proof than the visual picker.

Of course, if you structure your post more-less the same, you most likely won’t run into many issues.

Now that you’ve created the JSON feed, here’s how it will look like (note that at the time of writing this article we only had one article in the feed, hence only one item in the JSON feed).

With that out of the way, we now need a way to reference the feed. Hop on over to your API’s “API Docs” section within the Kimono’s app, and note two things:

the API’s name, and
your API key.

Take a look at the following screenshot as a reference:

These two things are needed to form the URI to the JSON feed, which is constructed like this:

Lastly — remember CORS? — we need to allow our domain to fetch the content from Kimono, and we can do this by adding our domains within the “CORS domains” section of Kimono’s API Docs page. When you do this, make sure you use the full address, such as “http://sprawsm.com/” and not just the domain with the TLD. Feel free to input your localhost, staging address, etc. in there as well.

Parsing the feed with jQuery

OK, now that we’ve prepped our content, we need to parse the JSON feed into our page’s HTML. This we do with the help of jQuery.

There’s one thing we need to do, though before we are ready to execute the jQuery code, and that’s to create our posts template. Basically it’s a bit of hidden HTML code without any content. Just a bit of markup that we manipulate with jQuery and populate with content from the feed.

Anywhere on your page where you want your posts to appear, you will need markup along these lines:

Now that we’ve got the markup, we’re on to the actual jQuery code which looks like this:

It’s pretty simple and self-explanatory by looking at the comments. All you need to do is include the jQuery library first, and then include this code underneath (or reference it from an external .js file).

That’s all there is to it! Here’s how it looks like on our company website with styling applied.