How to add Medium blogs to your website

A Portfolio is incomplete if your blogs lists are not added to that. I was trying to integrate Medium blogs to my website https://ananthakrish.github.io/.

Say What I have faced the famous CORS issues … 💩💩🤡 . Next thing I did is Googling here and there. Read so many articles. Found out an rss feed solution for it. But after few days that also started giving CORS issue.

Today I thought another way of getting this done. A better clean way.

This is nothing but I have hosted a NodeJS app in Heroku that will get my Medium blogs and convert it into a JSON. I used a GET call to NodeJS app to get the result JSON and added those things in my website.

Resources :

• https://pages.github.com
• https://devcenter.heroku.com/articles/heroku-cli
• https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app

Let’s see the code snippets,

In Heroku NodeJS app I have used this code to create a GET end point and poll my medium blog.

app.get('/mediumDaily', function(request, response) {
var request = require('request');
  var https = require('https');
  var parseString = require('xml2js').parseString;
  var xml = '';
function xmlToJson(url, callback) {
  var req = https.get(url, function(res) {
    var xml = '';
res.on('data', function(chunk) {
      xml += chunk;
    });
res.on('error', function(e) {
      callback(e, null);
    });
res.on('timeout', function(e) {
      callback(e, null);
    });
res.on('end', function() {
      parseString(xml, function(err, result) {
        callback(null, result);
      });
    });
  });
}
var url = "https://medium.com/feed/@yourId"
xmlToJson(url, function(err, data) {
  if (err) {
    return console.err(err);
  }
 var jsonString = JSON.stringify(data, null, 2);
 var objectValue = JSON.parse(jsonString);
 var g = objectValue['rss']['channel'][0];
 var resultArray = [];
 for(var item in g['item']){
    var data = {
      title: g['item'][item]['title'],
      link: g['item'][item]['link'],
      description : g['item'][item]['content:encoded']
    };
    resultArray.push(data);
  }
  response.send(resultArray);
 });
});

In the package.json don’t forget to add the following dependencies ,

"dependencies": {
    ..........

    "xml2js":"0.4.19",
    "https":"1.0.0",
    "request":"*"
    ........
 }

Next let’s how to access this in your website. Let’s see the code I have used. Its Jquery,

$(function () {
  var $content = $('.itemClass');
  var url = 'https://mediumpoll.herokuapp.com/mediumDaily';
  $.get(url, function (response) {
     var output = '';
     console.log(response);
     $.each(response, function (k, item) {
         var visibleSm;
         if (k < 3) {
            visibleSm = '';
        } else {
           visibleSm = ' visible-sm';
        }
    var yourString = item.description.toString().replace(/<img[^>]*>/, "");
    var maxLength = 120
    var trimmedString = yourString.substr(0, maxLength);
    trimmedString = trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
    var url = item.link;
    var title = item.title;
    var shortBodyPlain = trimmedString;
    output += '<h4 class="title"><a href="' + url + '" target="_blank">' + title + '</a></h4><div><p>' + shortBodyPlain + '</p><a class="more-link" href="' + url + '" target="_blank"><i class="fa fa-external-link"></i>Read more</a></div>';
    return k < 3;
  });
  $content.html(output);
  });
});

This Shows your blogs like below,

Done !! 😎😎👏👏

If you like my post and want to get future update, do click 👏👏👏, follow me on medium and here .