InstaFeed v3 - Google Doc - Flywheel Strategic

by Michael Mandarino

HTML

<div id="instafeed">Instagram</div>

SCSS

body {
    padding: 1rem;
}


#instafeed {
	img {
		max-width: 100%;
		width:100%;
	}
}

JavaScript

function InstaFeedV3() {
  //Client
  var GS_Key = '1NJsvL67PLW1arh6jHpNJT18dlr6h0os-s-T4FzZQaN4';
  var GS_Tab = '&gid=0';
  var Insta_PostToDisplay = '2';
  var Insta_Handle = 'flywheelstrategic';
  var Insta_HandleUrl = 'https://www.instagram.com/' + Insta_Handle + '/';

  //General
  var GS_Source = '';
  var GS_Col_ID = 'A';
  var GS_Col_URL = 'B';
  var GS_Col_Image = 'C';
  var GS_Col_Caption = 'D';
  var GS_Col_PostDate = 'E';

  function GS_Url() {
    var encodedgg = encodeURIComponent('SELECT * ORDER BY ' + GS_Col_PostDate + ' DESC LIMIT ' + Insta_PostToDisplay);
    GS_Source = 'https://docs.google.com/spreadsheets/d/' + GS_Key + '/gviz/tq?tq=' + encodedgg + GS_Tab;

    return GS_Source;
  }

  function DisplayFeed() {
    fetch(GS_Url())
      .then(data => data.text())
      .then(function(response) {
        var responseText = response.substring(response.indexOf("(") + 1, response.lastIndexOf(")"));
        var response = JSON.parse(responseText);
        var rows = response['table']['rows'];
        var output = '';

        for (var x = 0; x < rows.length; x++) {
          var instaID = response['table']['rows'][x]['c'][0]['v'];
          var instaUrl = response['table']['rows'][x]['c'][1]['v'];
          var instaImg = response['table']['rows'][x]['c'][2]['v'];
          var instaCaption = response['table']['rows'][x]['c'][3]['v'];
          var instaDateTime = response['table']['rows'][x]['c'][4]['f'];
          var instaDateTime_actual = new Date(instaDateTime);
          var instaDateTime_options = {
            month: 'long',
            day: 'numeric',
            year: 'numeric'
          };
          var instaDateTime_format = new Intl.DateTimeFormat('en-US', instaDateTime_options).format(instaDateTime_actual);

          //Output
          output += '<a href="' + instaUrl + '"><img src="' + instaImg + '" alt="@' + Insta_Handle + '" /></a>';
          output += instaCaption + '<br />';
          output += instaDateTime_format;
         ...