8804 sujets

Développement web côté serveur, CMS

Intégrer Instagram dans un site web simple

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)
Pour ceux que ça pourrait intéresser, voici comment j'ai résolu le problème des vidéos Instagram qui ne se lançaient pas toutes seules...

voici le code que je génère après le 'fetch' des posts Instagram (j'ai simplifié les liens pour une meilleure lisibilité)


<div class="col-md-6 col-lg-3 mb-5 d-flex">
  <div class="p-3 border d-flex flex-column bg-persian-down">
    <a href="https://www.instagram.com/tv/CW-awLLjVke/" target="_blank">
      <video class="video-insta mb-3" width="100%"><source src="https://video-cdg2-1.cdninstagram.com/xxxxyxyyyxyyxxxxxxxxxxxx" type="video/mp4">
      </video>
    </a>
    <div class="mt-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt distinctio modi expedita, doloremque adipisci vero eveniet iusto tenetur dolore magnam! Expedita adipisci accusantium quidem quas at quod inventore laborum quasi modi sit, quia quam quisquam omnis neque deserunt eaque beatae....
    </div>
    <a href="https://www.instagram.com/tv/xxzzzyyybbboo/" target="_blank">lire sur Instagram!
    </a>
  </div>
</div>



ensuite, je surveille au niveau du scroll quand mon bloc conteneur Instagram (situé en bas de page apparait) et à ce moment là je change les attributs 'autoplay' et 'muted' des vidéos récupérées et ça marche, et en plus elles ne se lanceront pas si le visiteur n'atteint pas le bas de la page...


// helpers : détection bloc instagram
const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
const boxInstagram  = document.querySelector('#instagram');

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        viewportHeight - rect.top > 0 && rect.bottom > 0      
    );
}


window.addEventListener('scroll', detecInstagram);



function detecInstagram() {
    const vid           = document.getElementsByClassName('video-insta');

    if (isInViewport(boxInstagram)) {
        console.log('Instagram block visible in viewport');
        for (let i = 0; i < vid.length; i++) {
            vid[i].autoplay = true;
            vid[i].muted = true;
        }
        window.removeEventListener('scroll', detecInstagram);
    }
}
Sujet clos
Aller à