Created
August 31, 2018 20:47
-
-
Save macariojames/851330cb8a1fcbb39ef9267df4282523 to your computer and use it in GitHub Desktop.
Sorta vanilla javascript instagram feed
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> <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