Créer un compteur en live d'abonnés Instagram

Voici comment créer un compteur en live d'abonnés Instagram, qui s'actualise automatiquement toutes les secondes ! Très utile pour vos sites internet ! On utilise pour ça la toute dernière nouveauté de JavaScript : fetch !

Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram.

 

1ère étape

Commençons par le HTML.

<span id="followers">Chargement</span>

Le texte "Chargement" sera affiché pendant le chargement du nombre d'abonnés sur votre compte Instagram.

 

2ème étape

Eviter les problèmes de padding.

* {
    box-sizing: border-box;
}

Cette petite astuce permet de dire que tous les éléments du site (*) doivent intégrer leurs padding dans leur taille (ça évite beaucoup de problèmes).

 

3ème étape

Styliser le compteur.

#followers {
    color: #FF4754;
    font-size: 5em;
    font-weight: 600;
}

Assez facile non ? Tout va se jouer dans le JavaScript, avec une toute nouvelle fonctionnalité : fetch.

 

4ème étape

Récupérer le nombre d'abonnés.

const followers = document.getElementById('followers');

async function getFollowers(profileId) {
    const url      = `https://instagram.com/${profileId}/?__a=1`;
    const response = await fetch(url);
    console.log(response);
    const data     = await response.json();

    return data.graphql.user.edge_followed_by.count;
}

async function setFollowers(profileId) {
    followers.textContent = await getFollowers(profileId);
}

Ici nous utilisons la dernière nouveauté de JavaScript avec l'utilisation de fetch.

fetch() nous permet de faire des appels AJAX beaucoup plus facilement qu'avec le traditionnel XMLHttpRequest().

Tout ce que nous faisons, c'est utiliser l'API ouverte d'Instagram pour récupérer le nombre d'abonnés d'un compte.

 

5ème étape

Actualiser toutes les secondes.

setInterval(() => setFollowers('BelievemyFR'), 1000);

Nous appelons la fonction setFollowers() toutes les secondes (donc toutes les 1000 millisecondes).

Et le tour est joué !

Partagez cet article