Comment afficher les photos Instagram dans le widget de la barre latérale WordPress

Voulez-vous afficher vos photos Instagram dans la barre latérale de WordPress ?

Les publications Instagram peuvent constituer un excellent contenu pour votre site Web. En créant un flux Instagram, vous pouvez garder votre site frais et intéressant tout en faisant la promotion de votre compte Instagram.

Dans cet article, nous vous montrerons comment afficher vos photos et vidéos Instagram dans le widget de la barre latérale de WordPress.

Pourquoi ajouter un flux Instagram à votre site WordPress ?

Selon notre recherche sur les statistiques marketing, Instagram compte plus de 2 milliards d'utilisateurs actifs mensuels. Cela signifie que c'est un excellent endroit pour promouvoir vos produits, services et articles de blog.

Selon votre secteur d'activité, Instagram peut même être le meilleur endroit pour promouvoir votre site Web. Par exemple, Instagram est particulièrement populaire auprès des grands blogs de mode, des sites de cuisine, de style de vie et de photographie.

Cependant, les gens ne verront pas vos publications Instagram s'ils ne visitent que votre site Web WordPress. Cela peut rendre difficile la croissance de votre nombre d'abonnés Instagram et l'obtention d'interactions sur vos photos et vidéos.

Cela dit, il est judicieux d'ajouter un flux Instagram à votre site Web WordPress. Cela générera plus de trafic vers votre page Instagram et encouragera les visiteurs à interagir avec vos publications en laissant des commentaires, en cliquant sur le bouton « Partager », et plus encore.

Cela dit, examinons comment afficher facilement des photos Instagram dans le widget de la barre latérale WordPress.

Comment installer un plugin de photos Instagram

La meilleure façon d'afficher des photos Instagram dans une barre latérale ou un widget similaire de WordPress est d'utiliser Smash Balloon Social Photo Feed. Ce plugin gratuit vous permet d'afficher des photos d'un ou plusieurs comptes Instagram dans un flux entièrement personnalisable.

Après avoir créé un flux, vous pouvez l'ajouter à la barre latérale en utilisant un shortcode ou un bloc.

Après avoir placé le flux sur votre site Web, il se mettra à jour automatiquement chaque fois que vous publierez sur Instagram. De cette façon, vous pouvez garder votre site frais et intéressant sans avoir à le mettre à jour manuellement.

Dans ce guide, nous utiliserons la version gratuite de Smash Balloon, car elle contient tout ce dont vous avez besoin pour intégrer un flux Instagram. Cependant, il existe également une version Pro qui vous permet d'afficher des flux de hashtags, d'ajouter des images shoppables Instagram dans WordPress, et plus encore.

Avant de commencer, vous devrez connecter votre compte Instagram à une page Facebook. Si vous avez un compte Instagram personnel, vous voudrez peut-être également le transformer en compte professionnel, car cela permet à Smash Balloon d'afficher automatiquement votre bio et votre en-tête Instagram.

Pour des instructions étape par étape sur la façon de faire ces deux choses, consultez notre section FAQ à la fin de la publication.

Lorsque vous êtes prêt, procédez à l'installation et à l'activation du plugin Smash Balloon Social Photo Feed. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.

How to Connect an Instagram Account to WordPress

Après avoir activé le plugin, il est temps de connecter votre compte Instagram à WordPress. Allez simplement dans Instagram Feed » Settings, puis cliquez sur « Add New ».

Avec Smash Balloon Pro, vous pouvez créer des flux à partir de publications et de hashtags tagués ou même créer un mur social en combinant du contenu provenant de nombreux sites Web différents.

Par exemple, vous pourriez afficher les dernières vidéos de votre chaîne YouTube, vos Tweets récents, un flux de groupe Facebook, et plus encore.

Puisque nous utilisons le plugin gratuit Smash Balloon, sélectionnez simplement « User Timeline » puis cliquez sur « Next ».

Après cela, vous devrez choisir le compte Instagram que vous utiliserez pour créer un flux photo Instagram personnalisé dans WordPress.

Pour commencer, cliquez sur « Add Source ».

Sur l'écran suivant, choisissez si vous souhaitez afficher des photos d'un compte Instagram personnel ou professionnel.

Si vous cochez la case à côté de « Personal », Smash Balloon n'inclura pas l'avatar et la bio Instagram dans votre en-tête par défaut. Cependant, vous pouvez toujours ajouter l'avatar et la bio manuellement dans les paramètres du plugin.

Après avoir choisi « Personnel » ou « Professionnel », cliquez sur « Connexion avec Facebook ».

Vous pouvez maintenant vérifier le compte Instagram que vous souhaitez utiliser et cliquer sur « Next ».

Après cela, cochez la case à côté de la page Facebook liée à votre compte Instagram.

Une fois cela fait, cliquez sur « Next ».

Smash Balloon affichera maintenant une fenêtre contextuelle listant toutes les informations auxquelles il aura accès et les actions qu'il pourra effectuer.

Pour restreindre l'accès de Smash Balloon à votre compte Instagram, cliquez sur l'un des interrupteurs pour le faire passer de « Yes » à « No ». Sachez simplement que cela peut affecter les photos et vidéos que vous pouvez intégrer sur votre blog WordPress ou votre site web.

Cela étant dit, nous vous recommandons de laisser tous les interrupteurs activés.

Lorsque vous êtes prêt, cliquez sur « Terminé ».

Vous verrez maintenant une fenêtre contextuelle avec le compte Instagram que vous venez de lier à WordPress.

Cochez simplement la case à côté du compte, puis cliquez sur « Add ».

Smash Balloon vous ramènera automatiquement à Instagram Feeds » All Feeds.

Pour créer un flux de médias sociaux, cochez simplement la case à côté de votre compte Instagram. Ensuite, cliquez sur « Next ».

Le plugin va maintenant créer un flux de photos Instagram pour votre site web et l'ouvrir dans l'éditeur Smash Balloon.

How to Customize Your Instagram Photo Feed

Vous pouvez utiliser l'éditeur pour affiner l'apparence des photos Instagram sur votre site web.

Sur la droite, vous verrez un aperçu de votre flux de photos Instagram. Sur la gauche se trouvent tous les paramètres que vous pouvez utiliser pour personnaliser le flux de photos.

La plupart de ces paramètres sont explicites, mais nous allons rapidement passer en revue quelques domaines clés.

Pour commencer, vous pouvez modifier la disposition du flux et ajouter un espacement en sélectionnant « Disposition du flux » dans le menu de gauche. Au fur et à mesure que vous apportez des modifications, l'aperçu se mettra à jour automatiquement, vous permettant ainsi d'essayer différents paramètres pour voir ce qui convient le mieux à votre flux de photos Instagram.

Par défaut, Smash Balloon affiche le même nombre de publications sur les ordinateurs de bureau et les appareils mobiles.

Vous pouvez prévisualiser l'apparence du flux Instagram sur les ordinateurs de bureau, les tablettes et les smartphones en utilisant la rangée de boutons dans le coin supérieur droit. En testant différentes dispositions, vous pouvez créer un flux Instagram qui est superbe, quel que soit l'appareil utilisé par le visiteur.

Les smartphones et les tablettes ont généralement des écrans plus petits et moins de puissance de traitement, vous pourriez donc vouloir afficher moins de photos et de vidéos sur les appareils mobiles.

Pour ce faire, tapez simplement un nombre différent dans le champ « Mobile » sous « Nombre de publications ».

Par défaut, le flux Facebook affiche moins de colonnes sur les smartphones et les tablettes par rapport aux ordinateurs de bureau. Cela permet à vos photos et vidéos de s'adapter confortablement sur des écrans plus petits.

Après avoir testé la version mobile de votre site WordPress, vous pourriez être mécontent de l'apparence des colonnes sur les smartphones et les tablettes. Si tel est le cas, vous pouvez afficher moins de colonnes en modifiant les nombres dans la section « Colonnes ».

Lorsque vous êtes satisfait des modifications que vous avez apportées, cliquez sur le lien « Personnaliser ».

Cela vous ramènera à l'éditeur principal de Smash Balloon, où vous pourrez explorer l'écran de paramètres suivant, qui est « Schéma de couleurs ».

Par défaut, Smash Balloon utilise un schéma de couleurs hérité de votre thème WordPress, mais il dispose également de thèmes « Clair » et « Sombre » que vous pouvez utiliser.

Une autre option consiste à créer votre propre schéma de couleurs en sélectionnant « Personnalisé », puis en utilisant les contrôles pour modifier la couleur d'arrière-plan, la couleur des boutons, changer la couleur du texte, et plus encore.

Par défaut, Smash Balloon ajoute un en-tête à votre flux, qui est la photo de profil de votre compte Instagram et le nom de votre page. Cela peut ajouter un contexte supplémentaire, plutôt que de simplement intégrer Instagram dans WordPress sans explication.

Pour modifier l'apparence de cette section, cliquez sur « En-tête » dans le menu de gauche.

Sur cet écran, vous pouvez modifier la taille et la couleur de l'en-tête et afficher ou masquer votre biographie Instagram.

Parfois, vous voudrez peut-être afficher une image de profil différente. Par exemple, votre avatar Instagram peut jurer avec votre thème WordPress.

Pour ce faire, cliquez simplement sur « Ajouter une image » sous « Afficher l'avatar personnalisé ».

Vous pouvez ensuite choisir une image dans la bibliothèque de médias WordPress ou télécharger une nouvelle photo depuis votre ordinateur.

De même, vous pouvez afficher une biographie différente. Par exemple, vous pourriez vouloir présenter votre flux Instagram ou encourager les gens à vous suivre pour plus de contenu.

Pour remplacer la biographie Instagram, tapez-la simplement dans la zone « Ajouter une biographie personnalisée ».

Smash Balloon analyse automatiquement vos photos Instagram et les affiche à la meilleure résolution. Bien que les paramètres par défaut conviennent à la plupart des sites Web, il est possible de rendre les images plus grandes ou plus petites.

Pour modifier la taille de l'image, cliquez sur « Publications » dans le menu de gauche. Sélectionnez ensuite l'option « Images et vidéos ».

Vous pouvez maintenant choisir entre miniature, moyenne et taille réelle à l'aide du menu déroulant. Pour en savoir plus sur ce sujet, veuillez consulter notre guide pour débutants sur les tailles d'images WordPress.

Si vous n'êtes pas satisfait des résultats, vous pouvez revenir à cet écran à tout moment et sélectionner « Détection automatique (recommandé) » dans le menu déroulant.

Par défaut, Smash Balloon ajoute un bouton « Charger plus » en bas de votre flux Instagram, ce qui permet aux visiteurs de parcourir plus de vos photos et vidéos.

Comme il s'agit d'un bouton très important, vous voudrez peut-être le personnaliser en sélectionnant l'option « Bouton Charger plus » dans le menu de gauche.

Ici, vous pouvez aider le bouton « Charger plus » à se démarquer en changeant la couleur d'arrière-plan, la couleur du texte et l'état de survol.

Vous pouvez également modifier le libellé du bouton en tapant dans le champ « Texte ».

Une autre option consiste à supprimer complètement le bouton en cliquant sur le bouton bascule « Activer ». De cette façon, vous pouvez encourager les gens à visiter votre Instagram en limitant le nombre de publications qu'ils peuvent voir sur votre site Web.

Si les visiteurs aiment ce qu'ils voient, ils peuvent décider de vous suivre sur Instagram en utilisant le bouton « Suivre sur Instagram » que Smash Balloon ajoute automatiquement.

Dans cette optique, vous voudrez peut-être aider le bouton à se démarquer en sélectionnant « Bouton de suivi » dans le menu de gauche.

Here, you can change the button’s background color, hover state, and text color.

Par défaut, le bouton a un libellé général « Suivre sur Instagram ».

Vous pouvez le remplacer par votre propre message en tapant dans le champ « Texte ».

Lorsque vous êtes satisfait de l'apparence du flux Instagram, n'oubliez pas de cliquer sur « Enregistrer » pour sauvegarder vos modifications. Vous êtes maintenant prêt à ajouter le flux Instagram au widget de votre barre latérale WordPress.

Comment ajouter vos photos Instagram dans le widget de la barre latérale WordPress

Vous pouvez maintenant ajouter le flux Instagram à la barre latérale ou à une section similaire en utilisant le bloc Flux Instagram.

Si vous avez créé plus d'un flux à l'aide de Smash Balloon, vous devrez connaître le code du flux.

Allez simplement dans Instagram » Tous les flux, puis copiez la valeur dans la colonne « Shortcode ». Dans l'image suivante, nous devrons utiliser instagram-feed feed=1.

Une fois cela fait, allez dans Apparence » Widgets dans le tableau de bord WordPress.

Cliquez ensuite sur le bouton bleu « + ».

Dans la barre de recherche, tapez « Flux Instagram » et sélectionnez le bon widget lorsqu'il apparaît.

WordPress dispose d'un widget Instagram intégré, assurez-vous donc de choisir celui qui affiche le logo officiel d'Instagram.

Après cela, faites simplement glisser le widget sur la zone où vous souhaitez afficher le flux Instagram, comme la barre latérale ou une section similaire.

Le widget affichera automatiquement l'un des flux que vous avez créés à l'aide de Smash Balloon.

Pour afficher un flux différent à la place, tapez simplement le shortcode du flux dans la zone « Paramètres du shortcode » puis cliquez sur « Appliquer les modifications ».

Vous pouvez maintenant cliquer sur le bouton « Mettre à jour » pour rendre le widget actif. Pour plus d’informations, consultez notre guide étape par étape sur comment ajouter et utiliser des widgets dans WordPress.

Si vous utilisez un thème compatible avec les blocs, vous pouvez ajouter un flux Instagram à la barre latérale à l'aide de l'éditeur de site complet. Pour commencer, allez simplement dans Apparence » Éditeur.

Dans l'éditeur, cliquez simplement pour sélectionner la section de la barre latérale, puis cliquez sur le bouton ‘+’.

Vous pouvez ensuite commencer à taper « Flux Instagram » et sélectionner le bon bloc lorsqu'il apparaît.

Par défaut, l'éditeur de site complet affichera l'un des flux Instagram que vous avez créés à l'aide de Smash Balloon. Pour afficher un flux différent, ajoutez simplement le shortcode en suivant le même processus décrit ci-dessus.

Lorsque vous êtes satisfait de l'apparence du flux Instagram, cliquez sur « Enregistrer ».

Comment afficher une photo Instagram spécifique dans WordPress

Parfois, vous voudrez peut-être afficher une publication Instagram spécifique sur votre site Web. Il peut s'agir de votre photo la plus populaire, d'une publication intemporelle, ou même d'un concours sur les réseaux sociaux que vous organisez actuellement.

Dans le passé, vous pouviez facilement intégrer une publication Instagram dans WordPress en utilisant un protocole connu sous le nom d'oEmbed. Cependant, Facebook a modifié le fonctionnement d'oEmbed, vous ne pouvez donc plus intégrer facilement de photos Instagram dans WordPress.

La bonne nouvelle est que Smash Balloon peut résoudre le problème oEmbed de Facebook et Instagram. Cela vous permet d'intégrer facilement une publication Instagram spécifique dans n'importe quelle page, article ou zone prête pour les widgets, comme la barre latérale. Vous pouvez également facilement créer un flux Facebook personnalisé dans WordPress.

Pour activer cette fonctionnalité, allez simplement dans Instagram Feed » oEmbeds. Vous pouvez ensuite cliquer sur le bouton « Activer » à côté de « Instagram ».

Après cela, allez dans Apparence » Widgets et cliquez sur le bouton bleu « + ».

Dans la barre de recherche, tapez « Embed » pour trouver le bon bloc.

Lorsque le bloc « Embed » apparaît, faites-le glisser dans la zone où vous souhaitez afficher la photo.

Dans le champ « Embed », collez simplement l'URL de la publication Instagram que vous souhaitez afficher sur votre site Web. Ensuite, cliquez sur « Embed ».

WordPress affichera maintenant la publication Instagram spécifique.

Si vous êtes satisfait du résultat, cliquez sur « Mettre à jour » pour le rendre visible.

Maintenant, si vous visitez votre site Web, vous verrez la publication Instagram en direct.

Si vous utilisez un thème compatible avec les blocs, vous devrez ajouter des publications Instagram spécifiques à l'aide de l'éditeur complet du site.

Pour ce faire, activez simplement la fonctionnalité oEmbed de Smash Balloon et obtenez l'URL de la publication Instagram en suivant le même processus décrit ci-dessus.

Après cela, ouvrez l'éditeur complet du site en allant dans Apparence » Éditeur dans le tableau de bord WordPress. Une fois dans l'éditeur complet du site, cliquez sur le bouton « + » dans la section de la barre latérale, puis tapez « Embed ».

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à la barre latérale.

Vous pouvez ensuite ajouter l'URL de la publication que vous souhaitez intégrer et cliquer sur le bouton « Embed ».

L'éditeur de site complet affichera désormais le post Instagram.

Si vous êtes satisfait du résultat, cliquez sur « Enregistrer » pour publier cette photo ou vidéo dans la barre latérale activée pour les blocs.

FAQ sur l'affichage des posts Instagram dans WordPress

Smash Balloon facilite la création d'un flux Instagram personnalisé ou même l'affichage de posts Instagram spécifiques sur votre site WordPress.

Cela dit, voici quelques-unes des questions les plus fréquemment posées concernant l'affichage des posts Instagram sur WordPress.

Comment créer un compte Instagram professionnel ?

Smash Balloon peut afficher des photos provenant d'un compte Instagram personnel ou professionnel.

Cependant, Smash Balloon ne peut pas récupérer automatiquement l'avatar et la biographie Instagram d'un compte Instagram personnel. Vous devrez plutôt ajouter l'avatar et la biographie manuellement dans les paramètres du plugin.

Dans cet esprit, vous voudrez peut-être vérifier si vous avez un compte personnel ou professionnel, puis passer à un compte professionnel si nécessaire.

Pour ce faire, visitez simplement votre compte Instagram et cliquez sur l'icône avec des lignes dans le menu latéral.

Après cela, cliquez sur « Paramètres ».

Si vous n'avez pas de compte professionnel, le menu de gauche affichera « Passer à un compte professionnel ».

Si vous avez actuellement un compte personnel et que vous souhaitez passer à un compte professionnel, cliquez simplement sur ce lien.

Comment connecter une page Facebook à un compte Instagram ?

Avant de pouvoir afficher des photos Instagram dans WordPress, vous devrez d'abord connecter votre compte Instagram à une page Facebook.

Pour ce faire, rendez-vous sur la page Facebook que vous souhaitez utiliser, puis cliquez sur « Paramètres » dans le menu de gauche.

Une fois que vous avez fait cela, cliquez sur « Comptes liés ».

Vous pouvez maintenant sélectionner « Instagram » et cliquer sur le bouton « Connecter ».

Facebook affichera maintenant toutes les actions qu'il peut effectuer et les informations auxquelles il peut accéder.

Si cela vous convient, cliquez sur le bouton « Connecter ».

Sachez simplement que les personnes qui gèrent votre page Facebook pourront voir vos messages Instagram et y répondre. Si vous souhaitez garder vos messages privés, cliquez pour désactiver le bouton bascule.

Lorsque vous êtes prêt à passer à l'écran suivant, cliquez sur « Confirmer ».

Cela ouvre une fenêtre contextuelle où vous pouvez taper votre nom d'utilisateur ou votre adresse e-mail et votre mot de passe.

Après cela, cliquez sur le bouton « Se connecter ».

Après quelques instants, vous verrez un message indiquant que vos comptes Instagram et Facebook sont maintenant connectés.

Comment afficher des images Instagram sur WordPress ?

Dans le passé, vous pouviez facilement intégrer des images Instagram dans WordPress en utilisant un protocole appelé oEmbed.

Cependant, Facebook a modifié le fonctionnement d'oEmbed, vous ne pouvez donc plus intégrer facilement d'images Instagram dans WordPress.

Au lieu de cela, vous devez maintenant enregistrer une application et utiliser un jeton client pour obtenir des données de l'API Graph de Facebook avant de pouvoir intégrer du contenu Instagram dans WordPress.

Heureusement, il est facile de corriger le problème oEmbed d'Instagram dans WordPress en utilisant le plugin Smash Balloon Social Photo Feed. Vous pouvez ensuite intégrer des photos Instagram spécifiques sur votre site web.

Vous pouvez même ajouter des photos Instagram à des zones prêtes pour les widgets, telles que le pied de page de votre site WordPress, l'en-tête, la barre latérale, et plus encore. Cela vous permet d'afficher facilement la même image sur l'ensemble de votre site web.

Nous espérons que cet article vous a aidé à apprendre comment afficher des photos Instagram dans un widget de barre latérale WordPress. Vous pourriez également consulter notre guide sur comment intégrer une vidéo Facebook dans WordPress ou nos meilleures sélections pour les meilleurs plugins de preuve sociale pour WordPress et WooCommerce.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.