Vous cherchez des moyens d'ajouter des embeds Instagram réactifs sur votre site ?
Pour beaucoup d'entre vous qui gèrent un site web pour leur entreprise, leur blog ou leur boutique en ligne, la fraîcheur et l'attractivité du contenu sont des priorités absolues. Grâce à mon expérience dans le domaine du marketing numérique, je sais qu'il est judicieux de relier votre site web aux médias sociaux.
Les flux Instagram responsives s'adaptent automatiquement aux différentes tailles d'écran, afin que tout le monde voit parfaitement votre contenu.
Étant donné que de nombreuses personnes naviguent sur Internet à partir de leur téléphone, montrer des posts Instagram réactifs peut être un excellent moyen de les garder engagés.
Mais si vous avez l'habitude de travailler avec du code, l'affichage des posts Instagram sur votre site peut s'avérer délicat. De plus, vous devez également vous assurer que les embeds sont adaptés aux mobiles.
Si vous souhaitez ajouter facilement des flux Instagram réactifs à votre site web WordPress, je vous tiens !
Dans ce guide, je vous montrerai comment intégrer des flux Instagram sur WordPress et les rendre réactifs, sans aucun casse-tête technique.
Je vais partager les méthodes simples que j'ai utilisées pour créer des flux Instagram réactifs, afin que vous puissiez améliorer votre site web sans effort et le rendre magnifique sur n'importe quel appareil.
Dans cet article
Pourquoi ajouter des Embeds Instagram responsives sur votre site web ?
Avec plus de 2 milliards d'utilisateurs actifs d'après nos recherches approfondies sur le marketing des médias sociaux, Instagram est l'une des plus grandes plateformes de médias sociaux et un endroit fantastique pour consulter du contenu visuel comme des photos et des vidéos.
Et si vous voulez un moyen facile d'engager vos visiteurs, vous pouvez intégrer le contenu d'Instagram sur votre site web.
Plus de 58,99 % des internautes naviguent sur leur téléphone portable de nos jours et si les embeds Instagram ne sont pas responsive, la plupart de vos visiteurs ne pourront pas voir les posts correctement.
Mais si vous rendez vos embeds Instagram adaptés aux mobiles, vous pouvez montrer des photos et des vidéos pertinentes pour maintenir facilement l'intérêt des visiteurs du site web et les transformer en vos followers Instagram.
De plus, vous pouvez également publier votre propre contenu sur Instagram si vous souhaitez augmenter rapidement votre audience sur les médias sociaux.
Vous souhaitez augmenter les ventes de votre entreprise ? Vous pouvez intégrer des avis positifs et des témoignages provenant d'Instagram et convertir les visiteurs en clients.
Le contenu généré par les utilisateurs (CGU), comme les avis Instagram, peut servir de preuve sociale et convertir davantage de visiteurs en clients.
Mieux encore, vous pouvez même créer un flux Instagram shoppable réactif pour que les gens puissent acheter vos produits directement - quel que soit l'appareil qu'ils utilisent pour visiter votre site web.
Vous savez maintenant comment l'intégration de posts Instagram réactifs peut aider votre entreprise.
Sur ce, examinons la manière la plus simple d'intégrer du contenu Instagram adapté aux mobiles.
La façon la plus simple d'intégrer des posts Instagram réactifs
Lorsqu'il s'agit d'afficher du contenu Instagram sur votre site, vous avez deux options que vous pouvez essayer :
- Méthode manuelle : Générez des codes HTML d'intégration pour chaque publication Instagram et ajoutez-les à votre site WordPress.
- Méthode automatique (méthode facile) : Obtenez un plugin Instagram qui peut intégrer des flux de photos et de vidéos réactives pour vous.
En utilisant la première méthode, l'ajout de posts Instagram sur votre site peut prendre du temps, surtout si vous souhaitez montrer beaucoup de contenu.
Après tout, vous devrez faire des allers-retours entre les deux sites web pour récupérer les codes HTML et les ajouter à votre site. Si vous n'avez pas l'habitude de manipuler beaucoup de code, cette étape peut être déroutante.
En plus de cela, vous devrez vérifier manuellement à chaque fois si vos posts Instagram s'affichent correctement sur mobile.
De plus, vous ajoutez ainsi des iFrames d'intégration d'Instagram à votre site. Cela signifie que les moteurs de recherche comme Google ne peuvent pas voir le contenu des médias sociaux sur votre site.
La bonne nouvelle ?
Vous pouvez contourner tous ces problèmes en utilisant le meilleur plugin de flux Instagram qui existe : Instagram Feed Pro.
Grâce au plugin Instagram Feed Pro, vous pouvez créer des flux réactifs pour afficher des photos, des vidéos, des bobines et bien plus encore.
Vous pouvez simplement suivre un guide en trois étapes, et le plugin vous guidera tout au long du processus de création, de personnalisation et d'intégration des flux Instagram.
En suivant ce guide, vous pouvez afficher vos posts, mentions et hashtags Instagram sur votre site WordPress.
Et tout le contenu que vous intégrez sera automatiquement redimensionné pour s'adapter à la taille de l'écran de vos visiteurs. Vous pouvez même prévisualiser l'aspect des posts Instagram sur différents appareils.
En outre, Instagram Feed Pro vous permet de contrôler la façon dont les posts Instagram apparaissent sur votre site web.
Vous pouvez choisir parmi une collection de modèles préconstruits, puis utiliser le personnalisateur de flux en direct pour personnaliser votre flux en quelques clics simples - pas besoin de JavaScript, HTML, CSS ou de tout autre type de code.
Avec toutes ces fonctionnalités étonnantes, Instagram Feed Pro est devenu le plugin de flux Instagram n°1, avec plus d'un million d'utilisateurs actifs.
Si vous souhaitez ajouter des flux Instagram réactifs à votre site, téléchargez immédiatement Instagram Feed Pro.
Allons-y et voyons comment vous pouvez utiliser ce plugin pour ajouter des posts Instagram réactifs.
Comment ajouter des Embeds Instagram réactifs à WordPress
Pour afficher des flux réactifs de posts Instagram, il vous suffit de suivre les étapes ci-dessous.
Jetons un coup d'œil !
Étape 1 : Installer le plugin Instagram Feed Pro
Tout d'abord, procurez-vous une copie d'Instagram Feed Pro et installez le plugin sur votre site web.
Si vous souhaitez en savoir plus, consultez ce guide étape par étape sur l'installation d'un plugin WordPress.
Étape 2 : Créer un nouveau flux Instagram
En suivant le flux guidé en 3 étapes, vous pouvez avoir un nouveau flux Instagram prêt à être mis en ligne en quelques clics.
Pour commencer, ouvrez le menu Instagram Feed " All Feeds " depuis votre tableau de bord WordPress. Sur la nouvelle page, cliquez sur le bouton Ajouter un nouveau en haut.
Vous pouvez ensuite sélectionner le type de contenu Instagram que vous souhaitez afficher sur votre site web :
- Timeline de l'utilisateur : Affiche les publications de votre profil Instagram
- Hashtag public: Sélectionnez des hashtags et affichez les messages contenant le hashtag.
- Messages marqués : Incorporez les posts qui mentionnent votre compte Instagram.
Si vous souhaitez combiner différents types de flux en un seul, il vous suffit de sélectionner plusieurs options ici.
Après avoir sélectionné un type d'alimentation spécifique, cliquez sur le bouton Suivant.
Étape 3 : Connecter le flux à votre Instagram
Une fois que vous avez sélectionné un type de flux, vous pouvez commencer à connecter le compte Instagram de votre entreprise ou de votre créateur à ce flux.
Pour commencer, cliquez sur le bouton Ajouter une source .
Dans la fenêtre contextuelle, vous avez le choix entre deux types de connexion Instagram :
- Basic : Affichez les photos, les bobines et les posts de collaboration de votre profil Instagram.
- Avancé : En plus des fonctionnalités de base, affichez les flux de hashtags, les flux marqués, les histoires, etc.
Après avoir choisi votre type de connexion, cliquez sur le bouton Connecter .
Ensuite, vous pouvez ouvrir Instagram ou Facebook pour terminer la connexion de votre compte. La bonne nouvelle, c'est que le processus est le même pour chaque plateforme.
Pour l'instant, je vais cliquer sur le bouton Connecter avec Instagram.
Ensuite, Instagram Feed Pro vous demandera un accès en lecture seule à votre compte. Le plugin peut également consulter des informations sur Instagram, mais ne pourra pas apporter de modifications.
Par conséquent, l'utilisation des plugins Smash Balloon comme Instagram Feed Pro est totalement sûre.
Pour continuer, cliquez sur le bouton Autoriser de la fenêtre contextuelle.
Vous pouvez désormais utiliser ce compte Instagram comme source pour vos futurs flux sans quitter votre site web.
Pour terminer la connexion de votre compte, cliquez sur le bouton Suivant.
Comme ça, votre flux Instagram peut afficher des photos et des vidéos réactives sur votre site web. Comme le plugin copie automatiquement le design de votre site web, vos posts correspondront parfaitement à votre marque.
Étape 4 : Personnalisez votre fil d'actualité Instagram réactif
Si vous souhaitez importer rapidement un beau design pour votre flux Instagram, il vous suffit de choisir parmi une collection de modèles préconçus.
Une fois que vous avez sélectionné un modèle de flux, cliquez sur le bouton Suivant.
Le plugin ouvrira alors l'éditeur de flux en direct pour que vous puissiez finir de configurer le design de votre flux Instagram.
Sur le côté gauche, vous trouverez le panneau de personnalisation de l'éditeur. Vous pouvez utiliser les options ici pour définir la mise en page de votre flux, le design de l'en-tête, la palette de couleurs, le design des boutons, le nombre d'articles, et bien plus encore.
Chaque fois que vous effectuez des modifications, l'aperçu en direct sur la droite montrera à quoi ressemble votre flux Instagram réactif.
Pour commencer, vous pouvez définir la mise en page des posts Instagram sur votre site web. Chacune de ces options de mise en page sera parfaitement responsive, vous pouvez donc être tranquille.
Il suffit de cliquer sur l'option Feed Layout pour continuer.
Désormais, vous pouvez choisir parmi 4 options de mise en page différentes pour votre flux Instagram : Grille, Carrousel, Masonry et Highlights.
Nous examinerons ci-dessous chacun de ces modèles.
Si vous optez pour l'option Grille, vous pouvez afficher tous vos posts Instagram dans des lignes et des colonnes épurées.
Vous pouvez ainsi attirer l'attention de vos visiteurs avec des tonnes de photos et de vidéos.
Ensuite, vous avez la mise en page Carousel qui permet d'afficher les articles dans un carrousel de diapositives.
En conséquence, votre site web peut être plus attrayant pour vos visiteurs.
Vous souhaitez conserver les proportions originales de vos photos et vidéos Instagram ?
Dans ce cas, vous pouvez sélectionner le modèle de maçonnerie .
Si vous optez pour la mise en page Highlight , votre flux Instagram responsive mettra en évidence des posts spécifiques.
De plus, l'accent sera mis sur vos photos et vos vidéos puisque cette mise en page masque les légendes et autres informations.
Une fois que vous avez sélectionné la disposition de votre flux, cliquez sur le bouton Enregistrer.
Pour continuer à concevoir votre nouveau flux, cliquez sur le bouton Personnaliser en haut de la page.
Vous pouvez également choisir les couleurs de votre flux Instagram à l'aide de l'éditeur de flux en direct.
Pour cela, cliquez sur l'option Schéma de couleurs à gauche.
Pour vous aider à changer facilement vos couleurs, vous pouvez choisir parmi 4 schémas de couleurs :
- Hériter du thème : Copier les couleurs de votre thème WordPress
- Clair : Affiche une couleur d'arrière-plan claire avec une police foncée
- Sombre : affiche un arrière-plan sombre avec une couleur de police claire
- Personnalisé : Choisir manuellement toutes les couleurs
Après avoir choisi votre palette de couleurs, enregistrez vos modifications en cliquant sur Enregistrer.
Grâce aux autres options de personnalisation, vous pouvez modifier le modèle de votre flux, l'en-tête, le style des boutons, le nombre d'articles et bien plus encore.
N'oubliez pas de cliquer sur Enregistrer une fois que vous êtes satisfait de l'aspect de votre flux Instagram responsive.
Étape 5 : Intégrer votre flux Instagram réactif
Avec le plugin Instagram Feed Pro, vous disposez de 2 façons différentes d'intégrer des flux Instagram sur votre site WordPress :
- Intégrer un flux Instagram réactif sur une page WordPress
- Embed Responsive Instagram Feed on WordPress Sidebar or Footer (Intégrer un flux Instagram réactif dans la barre latérale ou le pied de page de WordPress)
Les deux options sont abordées ci-dessous.
Intégrer un flux Instagram réactif sur une page WordPress
Instagram Feed Pro ayant été conçu pour être convivial, vous pouvez commencer à intégrer votre flux directement à partir de l'éditeur en direct.
Tout d'abord, cliquez sur le bouton " Embed" dans le coin supérieur droit.
Vous pouvez maintenant voir toutes les façons dont vous pouvez intégrer ce flux Instagram.
Parmi toutes les options, cliquez sur le bouton Ajouter à une page pour continuer.
Dans la fenêtre contextuelle, sélectionnez la page WordPress sur laquelle vous souhaitez afficher le flux Instagram réactif.
Ensuite, cliquez sur Ajouter pour continuer.
Pour vous aider à intégrer votre nouveau flux Instagram, le plugin ouvrira cette page web dans l'éditeur WordPress.
A partir de là, ajoutez un nouveau bloc de contenu en cliquant sur l'icône plus (+).
Dans la barre de recherche située en haut, écrivez "Instagram" pour rechercher le bloc de flux Instagram.
Une fois que vous avez fait cela, cliquez sur Instagram Feed dans les résultats de recherche ci-dessous.
Enfin, cliquez sur le bouton Mettre à jour , et votre flux Instagram responsive sera en ligne pour que vos visiteurs puissent le voir.
Désormais, les visiteurs de votre site web peuvent voir des photos et des vidéos d'Instagram sur votre site, comme dans cette capture d'écran :
Comme vous pouvez le voir, Instagram Feed Pro rend super facile l'affichage d'embeds Instagram réactifs sur votre site WordPress.
En quelques clics, les visiteurs de votre site peuvent voir votre flux Instagram qui fonctionne parfaitement sur toutes les tailles d'écran et tous les appareils !
Ensuite, voyons la manière la plus simple d'afficher les flux Instagram dans votre barre latérale ou votre pied de page.
Embed Responsive Instagram Feed on WordPress Sidebar or Footer (Intégrer un flux Instagram réactif dans la barre latérale ou le pied de page de WordPress)
Comme pour la méthode précédente, vous pouvez utiliser l'éditeur de flux en direct pour intégrer votre flux Instagram dans la barre latérale ou le pied de page.
Si votre éditeur de flux en direct n'est pas déjà ouvert, allez dans le menu Instagram Feed " All Feeds " depuis votre tableau de bord WordPress.
Cliquez ensuite sur le flux Instagram que vous souhaitez intégrer.
Vous pouvez maintenant voir le flux Instagram ouvert dans l'éditeur de flux en direct.
Pour intégrer votre flux, cliquez sur le bouton " Intégrer" en haut de la page.
À l'aide de la fenêtre contextuelle, vous pouvez choisir l'endroit où vous souhaitez intégrer votre flux Instagram, comme auparavant.
Cette fois, cliquez sur le bouton Ajouter à un widget .
Vous pouvez maintenant voir la page Widgets de votre site web. À partir de là, vous pouvez intégrer votre nouveau flux en tant que widget Instagram.
Si vous souhaitez intégrer votre flux dans la barre latérale du site web, cliquez sur le panneau Barre latérale .
Pour notre tutoriel, nous montrerons les embeds Instagram réactifs sur la barre latérale.
Vous souhaitez afficher les médias Instagram dans le pied de page de votre site ? Cliquez plutôt sur le panneau Pied de page.
Pour ajouter un nouveau widget, cliquez sur l'icône plus (+) en bas.
Enfin, sélectionnez le widget Flux Instagram dans les options, puis cliquez sur Mettre à jour.
Vous disposez désormais de flux Instagram réactifs dans la barre latérale ou le pied de page de votre site web.
Pour voir ce que cela donnera aux visiteurs de votre site web, il vous suffit d'ouvrir votre site web et de vous en rendre compte par vous-même.
Jetons un coup d'œil !
Et voilà !
Vous savez maintenant comment ajouter des embeds Instagram responsive sur WordPress en toute simplicité. Vous pouvez alors afficher des flux Instagram adaptés aux mobiles et maintenir l'engagement des visiteurs.
Avec l'aide d'Instagram Feed Pro, il est plus facile que jamais d'intégrer de magnifiques flux de photos et de vidéos Instagram sur votre site, sans avoir besoin de coder.
Prêt à intégrer des flux Instagram réactifs ? Téléchargez Instagram Feed Pro dès aujourd'hui!
Si vous êtes un créateur de contenu vidéo, ce prochain article sur la façon d'intégrer des bobines Instagram sur votre site web peut également vous être utile.
Vous avez trouvé cela utile ? Vous pouvez nous suivre sur Facebook et Twitter pour obtenir d'autres conseils et astuces utiles en matière de marketing des médias sociaux.
