The Startup
Published in

The Startup

How to Render Medium Blog Posts on Your Website

This is a tutorial on how to use Medium’s custom API to get your blog posts rendering on your website. Using this method is better than manually inputting your blog posts because the API updates as you post blogs. This will also update your website and show new blogs automatically. This tutorial will be done using React.js, but the same concepts and API request can be used on whatever platform you are coding your website on.

Step 1: Fetch the Data

As usual, your component will initiate with an “componentDidMount()” function. This will ensure that the blogs are saved to state before your component is mounted to the DOM. The request link is :

‘https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@your-user-name'

You must input your user name exactly as you have it on your Medium account. The next part is to simply run a fetch method and save your blog posts to the component’s state:

componentDidMount(){fetch('https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@your-user-name').then(resp => resp.json()).then(blogs => this.setState({blogs}))}

Now your state has all of your blog posts in JSON format.

Step 2: Write A Function to Render Blog Posts

Using ‘console.log()’ as you code is an important debugging method. If you console.log(this.state.blogs), you will see the data in the following format:

{
feed: {Breakdown of the account the API request is coming from},
items: {All of your blog posts},
status: "ok"
}

The “items” key is where the blog posts are held. Once inside there, this is the breakdown of one of your blog posts:

0:{
author: "Your name",
categories: [An array of your category tags],
content: An HTML version of your article,
description: Typically the same as your content,
enclosure: _proto_,
guid: "Short link to your blog post",
link: "Full link to your blog post",
pubDate: "The time and date your blog was posted",
thumbnail: "Link to your thumbnail image,
title: "Title of your blog post"
}

This is important to see because you need these specific keys to be able to render your blog posts to your website. Now that you have these keys, you can render them with a function any way you’d like. Here is an example:

renderBlogs = () => {if(this.state.blogs.items){return this.state.blogs.items.map(post => {return <div className="column"><div className="card"><img src = {post.thumbnail} className = "Img"/><h1 className = "cardHeader">{post.title}</h1><p className = "cardText">Posted on: {post.pubDate}</p><a href = {post.link} className = "Link"> Read the Full Blog Here!</a></div> 
</div> })}}

Step 3: Call your Function

The final step is to call on your new “renderBlogs” function within your render method:

render(){return(<div>{this.renderBlogs()}</div>)}

Now you will be able to see your blog posts rendering on your website. As you post on Medium, the API will be updated and add all new blog posts to your website. Play around with the CSS and try to render your blog posts in a way that fits your website’s overall design!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store