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
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.
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).
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.
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.
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.