Adding Medium articles to my website

I chose to use Medium as my “blog” because it so damn easy, but I also wanted a way to list recent articles on my website.

This was one area Medium didn’t have an easy solution. Luckily Jason Mathew came to the rescue here and published a great article on how to “Display Medium articles on your site”.

Here’s how I started with his article then worked through a few snags, including finding a solution for how to handle Medium’s responses.

In short, to get my Medium articles on my website I used rss2json.com to turn Medium’s RSS feed into JSON, parsed it with jQuery then used .map to select only actual stories, not responses.

I followed Jason’s article pretty closely to get started, so I’ll point you there if you want to follow along. Here’s the article again. He does great job of explaining each step, from making sure you have jQuery included in your site to grabbing the first image out of the JSON for a thumbnail with the article.

Snag #1. Once I got to the end of his article I was looking pretty good but when I refreshed my website nothing was there.

A quick check to the Dev Tools Console showed an error for the date formatting. He used a date formatting plugin but I didn’t need the date to be displayed, so a quick removal of that line got my articles showing easily.

Snag #2. Now my articles were showing nicely but I noticed something odd, the responses on my articles were showing up as their own article. I did a quick look through my code to see if I missed somewhere I was pulling those in but nothing stuck out.

After some research I found out Medium treats responses just like articles, so there wasn’t an easy way to separate those out. I looked through the JSON to try and find a quick work-around.

I noticed that the responses have no categories listed but I use categories for all my articles, so my first thought was to use an if statement inside the $.each to grab only articles with categories listed.

if(postCategories.length !== 0 ) {...

That worked well and now only my articles were showing.

Snag #3. Only my articles were showing but not the number I specified. My responses were still being counted, just not shown.

To resolve this I used $.map to map only articles with categories to a new array, then I continued on with the $.each to display my article information.

var posts = $.map(response.items, function(post, i) {
        var postCategories = response.items[i].categories
        if(postCategories.length !== 0 ) {
          return post;
        }
      });

Now the specified number of articles were showing up.

From there all that was left was my desired design. After all that I actually decided to go with something super simple, just the title and a short description. So most of my customization was removing code.

That’s it. Simple solution for being able to display my articles from Medium on my website.

Huge thanks to Jason Mathews for his article that introduced me to this solution.