Skip to content

Instantly share code, notes, and snippets.

@macariojames
Created August 31, 2018 20:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save macariojames/851330cb8a1fcbb39ef9267df4282523 to your computer and use it in GitHub Desktop.
Save macariojames/851330cb8a1fcbb39ef9267df4282523 to your computer and use it in GitHub Desktop.
Sorta vanilla javascript instagram feed
// thank you https://ariasthompson.com/2018/02/08/adding-instagram-feed-website-without-plugin/
// for the basis of this feed grab
var getInstagramFeed = function () {
var request = new XMLHttpRequest();
var token = 'ACCESS_TOKEN';
var count = 3;
request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token='+token+'&count='+count, true);
request.onload = function(container) {
if (request.status >= 200 && request.status < 400) {
console.log('Success!');
var data = JSON.parse(request.responseText);
for (var i=0;i < data.data.length;i++) {
var container = document.getElementById('insta-feed');
var instapicDiv = document.createElement('div');
instapicDiv.setAttribute('class','instapic');
container.appendChild(instapicDiv);
var postURL = data.data[i].link;
var linkWrapper = document.createElement('a');
linkWrapper.setAttribute('href', postURL);
linkWrapper.setAttribute('target', '_blank');
instapicDiv.appendChild(linkWrapper);
var userName = data.data[i].user.full_name;
var imgURL = data.data[i].images.standard_resolution.url;
//console.log(imgURL);
var img = document.createElement('img');
img.setAttribute('src',imgURL);
img.setAttribute('alt',userName);
img.setAttribute('title', imgCaptionText);
linkWrapper.appendChild(img);
var imgCaptionText = data.data[i].caption.text;
imgCaptionText = trimText(imgCaptionText, 140);
//console.log(imgCaptionText);
var imgCaptionDiv = document.createElement('div');
imgCaptionDiv.setAttribute('class', 'imgCaptionText');
imgCaptionDiv.innerText = imgCaptionText;
instapicDiv.appendChild(imgCaptionDiv);
var igMetaDiv = document.createElement('div');
igMetaDiv.setAttribute('class', 'igMeta');
igMetaDiv.innerHTML = '<a href="'+postURL+'" target="_blank"><span class="icon-instagram2"></span>&nbsp;&nbsp;<em>@instagram</em></a>';
instapicDiv.appendChild(igMetaDiv);
}
//console.log(data);
} else {
}
};
request.onerror = function() {
console.log('There was a connection error of some sort');
};
request.send();
};
// trim text after specified character limit; won't trim at a puncutation mark
// based on https://stackoverflow.com/questions/4700226/i-want-to-truncate-a-text-or-line-with-ellipsis-using-javascript
let trimText = function(text, limit){
if (text.length > limit)
for (let i = limit; i > 0; i--){
if(text.charAt(i) === ' ' &&
(text.charAt(i-1) != ',' || text.charAt(i-1) != '.' || text.charAt(i-1) != ';' || text.charAt(i-1) != '!') || text.charAt(i-1) != '?' ) {
return text.substring(0, i) + ' ...';
}
}
else
return text;
};
getInstagramFeed();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment