How to Get Your Medium.com Blog Articles to Show on Your Web Site

Jim Dee
Jim Dee
Nov 26 · 5 min read

Turn your Medium.com RSS feed into a visual, automatically-updated feed on your web site.

The above photo is a screen-grab from the bottom of my web site. It shows the 9 most recent Medium.com articles from this Medium.com publication (Web Designer / Web Developer Magazine). Want something like that on your web site as well? It’s not terribly tough to do, so long as you can pop some PHP code onto your web site. Let’s dig in.

To start, we’re going to make the following assumptions:

  • You have a Medium.com account where you do your blogging;
  • You have your own publication here on Medium.com;

Instead of using my own site as an example, let’s pick another, just to show that this will work on any normal Medium publication. The largest active publication is, reportedly, The Startup, at https://medium.com/swlh

So, the first thing we need is to identify the FEED. I happen to already know that, if you insert “feed/” just after medium.com in the URL, that’s the feed. But, we can also look at the source code of their page to see it:

Their feed is: https://medium.com/feed/swlh

Thus, your publication’s feed can be found or constructed in the same manner. Look for it in the “view source” (available by right-clicking on your publication home page and clicking “view source”) or just add a “feed/” just before the part of your URL that is normally there. E.g.: https://medium.com/feed/[publication alias]

Now, if we want to first simply fetch some data and dump it onto the screen to analyze before parsing out, we could do something like this:

// GET DATA FROM MEDIUM...
$feedURL = 'https://medium.com/feed/swlh/';
$apiEndpoint = 'https://api.rss2json.com/v1/api.json?rss_url=';
$feedData = json_decode( file_get_contents($apiEndpoint . urlencode($feedURL)) , true );
print_r($feedData);
die();

And, that’ll get us some data to begin working with. It should look like this (though this grab is clipped a bit):

By default, this one seems to show 10 items. I don’t know if there is any way to request more. But, 10 will do. In fact, as the screen-grab atop this piece shows, I use just 9 items myself for this little promo area.

Note, of course, that you’re going to need to be able to run PHP code in whatever place you put this on your site. If that’s an issue for you, perhaps also check out this article:

I tried to clean-up my own code for this a bit, to make it easier for others to customize. Here’s the code:

<?php// CONFIG OPTIONS:
// ------------------
$configs_desiredPhotoWidth = 350;
// use pixels (Note: desired height should go into the CSS, as publications can often sent over varying-height pics, and that'll throw off the look. So, I like to constrain all to a specific height.
$configs_numStoriesPerRow = 3;
// # of stories you want in each row.
$configs_maxStories = 9;
// the # of stories you want to pull (max 10, I believe).
$configs_feedURL = 'https://medium.com/feed/swlh/';
// Note: Try it both with and without the ending slash, as that tends to have an effect, in my testing.
// GET DATA FROM MEDIUM...
// NB: There would be many ways to get and parse / decode this data. Shown here is one simple way.
// ------------------
$apiEndpoint = 'https://api.rss2json.com/v1/api.json?rss_url=';
$feedData = json_decode( file_get_contents($apiEndpoint . urlencode($configs_feedURL)) , true );
echo '<style> .mediumFeedContainer { display: table; max-width: 1200px; } .mediumFeedRow { display: table-row; } .mediumFeedCell { width: 30%; padding: 10px; display: table-cell; } .mediumFeedCell img { width: 100%; height: 175px; } </style>';// OPTIONAL: Put the above CSS either here or in an already-loaded CSS file. Note that, depending on the # of stories you're going to show in a row, you'll want to adjust the .mediumFeedCell width to something appropriate (eg 2 stories, 50%, 4 stories, 25%, etc.). Same with the heights, as noted above.if ($feedData['status'] == 'ok') {$rowCount = 1;
$storyCount =0;
$theHTML = '<div class="mediumFeedContainer">';foreach ($feedData['items'] as $feedItem) {

if ($storyCount == $configs_maxStories) { break; }

$thisItem_title = $feedItem['title'];
$thisItem_title = str_replace('$','&#36;',$thisItem_title);

$thisItem_link = $feedItem['link'];

$thisItem_image = $feedItem['thumbnail'];
$thisItem_image = preg_replace('~/max/[^/]*~','/max/'.$configs_desiredPhotoWidth,$thisItem_image);

if ($rowCount == 1) { $theHTML .= '<div class="mediumFeedRow">'; }

$theHTML .= '<div class="mediumFeedCell">';

$theHTML .= '<a href="'. $thisItem_link. '" target="_blank">';

$theHTML .= '<img src="' .$thisItem_image. '" title="'.$thisItem_title .'" alt="'.$thisItem_title .'">';

$theHTML .= '</a>';

$theHTML .= '<h4><a href="'.$thisItem_link. '" target="_blank" title="'. $thisItem_title .'">' . $thisItem_title . '</a></h4>';

$theHTML .= '</div>';

$rowCount ++;

if ($rowCount > $configs_numStoriesPerRow) {

$theHTML .= '</div><div class="clear"></div>';

$rowCount = 1;

}

$storyCount++;
if ( $storyCount == $configs_maxStories and $rowCount <= $configs_numStoriesPerRow) { $theHTML .= '</div>'; }}$theHTML .= '</div>';

echo $theHTML;

} else {
echo "</p>Check back for Medium.com articles to be posted here.</p>";}

Basically, the above should provide a framework to build upon. Almost certainly, you’ll want to add some custom CSS to style things according to your site’s look and feel. I tried to code the above so that most areas are self-explanatory enough so that you can easily add any markup needed (e.g., on my site, I added in some hover effects for when users hover over the images).

Hope this helps some people. :-)


✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various Medium.com publications. Find him at JPDbooks.com, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] ArrayWebDevelopment.com. His latest novel, CHROO, is available on Amazon.com. If you enjoy humorous literary tales, please grab a copy!

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.

Jim Dee

Written by

Jim Dee

Web guy at http://ArrayWebDevelopment.com — see also http://JPDbooks.com.

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.