parsimonhi a écrit :
Bonjour,
As-tu avancé ?
Amicalement,
Bonjour,
oui merci, j'ai réussi à avancer, mais assez péniblement, car l'API est très compliquée à utiliser et la documentation est presque catastrophique..
J'ai trouvé un
premier tuto pour m'aider à obtenir la 'long_lived_key'
et ensuite je me suis inspiré d'
un autre tuto pour créer mon propre code en Vanilla Javascript.
Maintenant j'arrive à récupérer les posts Instagram et les afficher (exemple de code ci-dessous)
Je suis arrivé à le faire sans utiliser jQuery, le code est un peu plus verbeux mais surement plus rapide à exécuter..
Par contre je n'ai toujourspas trouvé la liste complète de tous les champs récupérables en + de media_url,media_type,permalink,thumbnail_url,caption ...
J'ai un petit problème avec les posts qui contiennent une vidéo, si je mets l'attribut 'autoplay' et 'mute' dans la construction de la balise <video>, ça ne marche pas, il faut que je le rajoute après la construction et affichage de la page en modifiant le DOM...
voila, et bon reveillon à tous
// récupération des données Instagram
async function fetchInsta() {
try {
let response = await fetch(restUrl);
return await response.json();
} catch (error) {
console.log(error);
}
}
async function renderInsta() {
let dataInsta = await fetchInsta();
for (let i = 0; i < 8; i++) {
let postUrl = `${rootUrl}/${dataInsta.data[i].id}?access_token=${instaToken}&fields=media_url,media_type,permalink,thumbnail_url,caption`;
try {
let responsePost = await fetch(postUrl);
let result = await responsePost.json();
//console.log(result.caption);
let mediaInsta;
if ( result.media_type === "IMAGE" || result.media_type === "CAROUSEL_ALBUM") {
// construit l'élément DOM <img> pour l'image instagram
mediaInsta = document.createElement('img');
mediaInsta.setAttribute('src', result.media_url);
mediaInsta.classList.add('img-fluid', 'mb-3');
} else if (result.media_type === "VIDEO") {
// construit l'élément DOM <source> pour la vidéo instagram
let videoElem = document.createElement('source');
videoElem.setAttribute('src', result.media_url);
videoElem.setAttribute('type', 'video/mp4');
mediaInsta = document.createElement('video');
mediaInsta.setAttribute('width', '100%');
mediaInsta.classList.add('video-insta', 'mb-3');
mediaInsta.appendChild(videoElem);
}
// construit le lien contenant le média
let linkInsta = document.createElement('a');
linkInsta.setAttribute('href', result.permalink);
linkInsta.setAttribute('target', '_blank');
linkInsta.appendChild(mediaInsta);
// construit le conteneur du caption
let elemInsta = document.createElement('div');
elemInsta.classList.add( 'p-3', 'border', 'd-flex', 'flex-column', 'bg-persian-down');
elemInsta.appendChild(linkInsta);
let captionInsta = document.createElement('div');
captionInsta.classList.add('mt-auto');
captionInsta.innerHTML = result.caption.substr(0,200) + '...';
elemInsta.appendChild(captionInsta);
// construit le lien 'à suivre'
let moreInsta = document.createElement('a');
moreInsta.setAttribute('href', result.permalink);
moreInsta.setAttribute('target', '_blank');
moreInsta.innerText = 'lire sur Instagram!';
elemInsta.appendChild(moreInsta);
let surround = document.createElement('div');
surround.classList.add('col-md-6', 'col-lg-3', 'mb-5', 'd-flex');
surround.appendChild(elemInsta);
instaWrapper.appendChild(surround);
} catch (error) {
console.log(error);
}
}
}
renderInsta();
Modifié par lionel_css3 (31 Dec 2021 - 11:17)