Comment intégrer un flux Instagram dans WordPress
Suivez ce tutoriel étape par étape pour intégrer des publications Instagram sur votre site Web WordPress :
1. Créez un compte Instagram
Vous pouvez créer un profil Instagram personnel ou professionnel via le site Web officiel, l'application mobile ou Facebook.
Suivez ces étapes pour vous inscrire via le site Web officiel d'Instagram :
- Accédez au site Web officiel d'Instagram et cliquez sur S'inscrire.
- Entrez vos coordonnées personnelles, y compris votre numéro de téléphone portable ou votre adresse e-mail, votre nom complet, votre nom d'utilisateur et votre mot de passe. Une fois terminé, sélectionnez S'inscrire.
- Ajoutez votre date de naissance en cliquant sur la flèche vers le bas et en choisissant le mois, la date et l'année. Sélectionnez Suivant pour continuer.
Vous devez fournir votre date de naissance correcte, même pour un compte Instagram professionnel. Instagram vise à offrir une expérience appropriée en fonction de l'âge à chaque utilisateur.
L'application Instagram est disponible sur l'App Store pour les appareils iOS et sur Google Play Store pour les téléphones Android. Voici comment créer un profil Instagram professionnel ou personnel sur un iPhone :
- Après avoir téléchargé l'application, appuyez sur l'icône Instagram pour l'ouvrir.
- Sélectionnez Créer un nouveau compte et entrez votre numéro de téléphone portable ou votre adresse e-mail. Une fois terminé, appuyez sur Suivant.
- Entrez le code de confirmation envoyé à votre contact, le nouveau mot de passe, vos informations de date de naissance, votre nom et votre nom d'utilisateur. Appuyez sur Suivant.
- Consultez les conditions et la politique de confidentialité d'Instagram et sélectionnez J'accepte pour déclarer votre conformité à ses règles.
- Ajoutez une photo de profil et appuyez sur Suivant. Si vous préférez l'ajouter ultérieurement, sélectionnez Ignorer.
- Pour faire de votre photo de profil votre première publication, activez le commutateur et choisissez Terminé.
Vous pouvez également utiliser un compte Facebook existant pour créer un profil Instagram. Voici comment synchroniser votre profil Facebook avec Instagram :
- Ouvrez l'application Instagram et sélectionnez S'inscrire.
- Si vous êtes connecté à votre compte Facebook sur votre téléphone, votre profil apparaîtra. Choisissez Continuer en tant que [Votre nom].
- L'application vous invitera à vous connecter à votre compte Facebook. Appuyez sur Se connecter.
- Lisez les conditions et la politique de confidentialité d'Instagram et sélectionnez J'accepte.
2. Choisissez un plugin d'alimentation Instagram pour WordPress
Vous devez installer un plugin WordPress pour intégrer un flux Instagram sur votre site Web. Voici deux de nos recommandations :
Smash Balloon
Smash Balloon est l'un des meilleurs plugins WordPress pour Instagram. Il vous permet d'afficher des publications à partir de plusieurs comptes Instagram sur un seul flux ou des flux séparés.
La personnalisation d'un flux Instagram sur WordPress avec Smash Balloon est facile. Vous pouvez modifier la largeur, la hauteur, la couleur de fond, la taille des images et les colonnes.
En plus de la version gratuite, ce plugin WordPress propose :
- Des miniatures de toutes tailles pour mettre en valeur vos publications Instagram.
- Le bouton "Charger plus" pour afficher d'autres photos Instagram à partir de votre compte.
- L'option "Suivre sur Instagram" permet aux visiteurs de suivre facilement votre compte sans avoir à le rechercher manuellement dans l'application mobile.
- La fonction JavaScript et CSS personnalisée permet aux développeurs web de modifier l'apparence et le style du flux Instagram.
- L'option de tri de vos images Instagram par ordre chronologique ou aléatoire.
En plus de la version gratuite, Smash Balloon propose le plugin Instagram Feed Pro. Il commence à 49 $ par an et offre des fonctionnalités avancées, telles que l'affichage des flux marqués et des hashtags.
Social Feed Gallery
Social Feed Gallery est un plugin WordPress convivial pour les flux Instagram qui offre une configuration en un clic pour simplifier le processus d'intégration. Il vous permet également d'organiser les flux Instagram en fonction du nom d'utilisateur et du hashtag.
Voici d'autres fonctionnalités offertes par ce plugin :
- Affichez les flux Instagram sur votre site Web WordPress à l'aide de deux options de mise en page - galerie ou carrousel.
- Un mécanisme de mise en cache de sauvegarde pour assurer la disponibilité de vos flux même en cas de problème avec l'API Instagram.
- Utilisez une galerie contextuelle pour afficher les vidéos et images Instagram de votre flux afin d'améliorer son apparence.
- Mise en cache automatique du contenu Instagram pour optimiser les performances du serveur et accélérer le chargement des pages.
La version gratuite offre les fonctionnalités nécessaires pour intégrer des flux Instagram sur votre site WordPress. Pour bénéficier de fonctionnalités supplémentaires telles que les mises à jour à vie et le support pendant 6 mois, optez pour le plan premium à partir de 49 $ par licence.
3. Connectez le compte Instagram à WordPress
Une fois que vous avez choisi et activé le plugin, voici comment connecter votre compte Instagram à WordPress. Dans cet exemple, nous utilisons la version gratuite du plugin Smash Balloon :
- Ouvrez l'option Instagram Feed sur votre tableau de bord WordPress et cliquez sur Ajouter un nouveau.
- Choisissez le type de flux Instagram. La version gratuite ne propose que le flux de chronologie utilisateur, tandis que la version Pro propose trois options avancées - Public Hashtag, Tagged Posts et Social Wall. Sélectionnez Suivant pour continuer.
- Cliquez sur Ajouter une source pour connecter Instagram à votre site Web. Vous serez redirigé vers le site Web de Smash Balloon.
- Choisissez le type de compte - Personnel, Professionnel ou Je ne suis pas sûr. Dans cet exemple, nous connectons un compte Instagram personnel.
- Sélectionnez le bouton Se connecter avec Instagram. Avec la version Premium, vous pourrez ajouter le compte manuellement car vous disposerez d'un jeton d'accès à l'API Instagram.
- Entrez vos identifiants Instagram et cliquez sur Se connecter.
- Examinez les demandes d'accès et cliquez sur Autoriser.
- Enfin, confirmez votre domaine en cliquant sur Oui, c'est mon domaine.
Avec le plugin Instagram Feed Pro, vous pouvez ajouter plusieurs flux Instagram à votre site WordPress. Suivez ces étapes pour le faire :
- Accédez au tableau de bord Smash Balloon et choisissez le profil et la conception du flux.
- Sélectionnez Intégrer et copiez le code court (shortcode).
- Collez le code court dans le bloc Instagram Feed de l'éditeur WordPress.
4. Configurez le flux Instagram
Après avoir connecté votre profil Instagram à WordPress, il est temps de créer la mise en page de votre flux Instagram :
- Sélectionnez votre nom d'utilisateur Instagram sur le tableau de bord de Smash Balloon et choisissez Suivant.
- Cliquez sur le bouton Oui, allons-y pour créer une photo de profil ou une bio personnalisée.
- Téléchargez une photo de profil, insérez votre bio et choisissez Ajouter.
- Une fois redirigé vers l'éditeur, vous pouvez ajuster l'apparence du flux. Sélectionnez Mise en page du flux pour changer la conception, la hauteur et le padding. Vous pouvez également définir le nombre de publications Instagram et les colonnes.
- Choisissez le schéma de couleur pour modifier la teinte de fond.
- Cliquez sur l'en-tête pour ajuster le style de l'en-tête.
- Sélectionnez Publications → Images et vidéos pour définir la résolution optimale de votre contenu Instagram.
- Cliquez sur le bouton "Charger plus" pour ajuster l'option de chargement supplémentaire.
- Sélectionnez le bouton "Suivre" pour modifier l'option de suivi.
- Ouvrez Paramètres → Sources pour basculer entre différents utilisateurs Instagram.
- Allez dans Paramètres → Filtres et Modération pour appliquer des configurations particulières à des contenus Instagram spécifiques.
- Cliquez sur Paramètres → Tri pour organiser votre flux. Par exemple, affichez les dernières publications Instagram en premier en choisissant Nouveauté.
- Choisissez Avancé pour modifier le nombre maximal de requêtes API simultanées et activer des modèles personnalisés.
- Une fois que vous avez terminé de modifier votre flux Instagram, cliquez sur Enregistrer.
5. Intégrez le flux Instagram dans WordPress
Maintenant que vous avez conçu l'apparence, il est temps d'intégrer les flux Instagram sur votre site Web. Pour ce faire, ouvrez un article WordPress → icône d'ajout de bloc + → Flux Instagram.
Alternativement, allez dans le constructeur de flux de Smash Balloon → Intégrer → Ajouter à une page pour intégrer votre flux Instagram sur une page WordPress,
Cependant, les étapes ci-dessus ne fonctionnent que si vous n'avez qu'une seule conception. Si vous avez plusieurs modèles, voici comment ajouter un flux Instagram spécifique sur votre site WordPress :
- Ouvrez le constructeur de flux de Smash Balloon et cliquez sur Intégrer.
- Dupliquez le code court (shortcode) dans la fenêtre contextuelle en sélectionnant le bouton Copier.
- Allez dans le tableau de bord WordPress → ouvrez Articles ou Pages → choisissez le bloc Flux Instagram → Bloc → collez le code.
Alternativement, modifiez le code court en ajoutant le numéro de conception dans le champ Paramètres du code court (Shortcode Settings) et cliquez sur Appliquer les modifications. Cela intégrera automatiquement le modèle choisi. Par exemple, nous allons utiliser feed=”2″.
- Le bloc affichera maintenant la publication Instagram intégrée. Cliquez sur Publier pour l'appliquer sur votre site Web.
Si votre thème ne prend pas en charge l'édition complète du site, intégrez un flux Instagram sur votre site WordPress à l'aide de widgets. Ouvrez le constructeur de flux de Smash Balloon → Intégrer → Ajouter à un widget.
Alternativement, ajoutez le widget Flux Instagram en allant dans le tableau de bord WordPress → Apparence → Widgets → Insertion de widget + → Flux Instagram. Faites glisser le widget vers n'importe quelle zone de votre site WordPress, comme la barre latérale principale ou l'en-tête.
Pour afficher un flux Instagram différent, entrez le code court (shortcode) du modèle via Paramètres du code court (Shortcode Settings) → Appliquer les modifications → Mettre à jour.