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 en vidéo sur YouTube : voir la version vidéo
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
Ce que nous souhaitons pour débuter le design de notre compteur, c'est avant tout éviter que nos dimensions ne se confondent avec la marge interne que nous allons ajouter (le fameux 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
Allez, stylisons 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, c'est encore mieux !
setInterval(() => setFollowers('BelievemyFR'), 1000);Nous appelons la fonction setFollowers() toutes les secondes (donc toutes les 1000 millisecondes).
Et le tour est joué !
Si vous souhaitez en apprendre davantage, ce cours pourrait vous plaire : Dynamisez votre site internet grâce à JavaScript.
