Comment afficher des 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 créer 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 allons vous montrer comment afficher vos photos et vidéos Instagram dans le widget de la barre latérale WordPress.
Pourquoi ajouter un flux Instagram à votre site WordPress ?
Selon nos recherches sur les statistiques marketing, Instagram compte plus de 2 milliards d'utilisateurs actifs par mois. Cela signifie que c'est un endroit idéal 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 parmi les meilleurs blogs de mode, de cuisine, de style de vie et de photographie.
Cependant, les internautes ne verront pas vos publications Instagram s'ils visitent uniquement votre site Web WordPress. Cela peut rendre difficile le développement de votre audience sur Instagram et l'obtention d'un engagement sur vos photos et vidéos.
Cela étant dit, c’est une bonne idée d’ajouter un flux Instagram à votre site 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 étant dit, voyons comment afficher facilement des photos Instagram dans le widget de la barre latérale de WordPress.
Comment installer un plugin Instagram Photos
La meilleure façon d’afficher des photos Instagram dans une barre latérale WordPress ou un widget similaire consiste à 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 à l'aide d'un shortcode ou d'un bloc.
Après avoir placé le flux sur votre site Web, il sera automatiquement mis à jour à chaque fois que vous publierez une nouvelle publication sur Instagram. De cette façon, vous pouvez garder votre site à jour 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 hashtag, d'ajouter des images achetables sur Instagram dans WordPress, et bien plus encore.
Avant de commencer, vous devrez connecter votre compte Instagram à une page Facebook. Si vous avez un compte Instagram personnel, vous souhaiterez 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 obtenir des instructions étape par étape sur la façon de réaliser ces deux choses, consultez notre section FAQ à la fin de l'article.
Lorsque vous êtes prêt, installez et activez le plugin Smash Balloon Social Photo Feed. Pour plus de détails, consultez notre guide sur la façon d'installer un plugin WordPress.
Comment connecter un compte Instagram à WordPress
Après avoir activé le plugin, il est temps de connecter votre compte Instagram à WordPress. Accédez simplement à Flux Instagram » Paramètres, puis cliquez sur « Ajouter un nouveau ».
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 le contenu de nombreux sites Web différents.
Par exemple, vous pouvez afficher les dernières vidéos de votre chaîne YouTube, vos Tweets récents, un flux de groupe Facebook, etc.
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 de photos Instagram personnalisé dans WordPress.
Pour commencer, cliquez sur « Ajouter une source ».
Sur l'écran suivant, choisissez si vous souhaitez afficher les photos d'un compte Instagram personnel ou professionnel.
Si vous cochez la case à côté de « Personnel », Smash Balloon n'inclura pas par défaut l'avatar et la biographie Instagram dans votre en-tête. Cependant, vous pouvez toujours ajouter l’avatar et la bio manuellement dans les paramètres du plugin.
Après avoir choisi « Personnel » ou « Professionnel », continuez et cliquez sur « Se connecter avec Facebook ».
Vous pouvez maintenant vérifier le compte Instagram que vous souhaitez utiliser et cliquer sur « Suivant ».
Après cela, cochez la case à côté de la page Facebook liée à votre compte Instagram.
Cela fait, continuez et cliquez sur « Suivant ».
Smash Balloon affichera désormais une fenêtre contextuelle répertoriant 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 commutateurs pour le faire passer de « Oui » à « Non ». Sachez simplement que cela peut affecter les photos et vidéos que vous pouvez intégrer sur votre blog ou site Web WordPress.
Cela étant dit, nous vous recommandons de laisser tous les commutateurs 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 « Ajouter ».
Smash Balloon vous ramènera désormais automatiquement à Flux Instagram »Tous les flux.
Pour créer un flux de réseaux sociaux, cochez simplement la case à côté de votre compte Instagram. Ensuite, cliquez sur « Suivant ».
Le plugin va maintenant créer un flux de photos Instagram pour votre site Web et l'ouvrira dans l'éditeur Smash Balloon.
Comment personnaliser votre flux de photos Instagram
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 le côté gauche se trouvent tous les paramètres que vous pouvez utiliser pour personnaliser le flux photo.
La plupart de ces paramètres sont explicites, mais nous aborderons rapidement certains domaines clés.
Pour commencer, vous pouvez modifier la disposition du flux et ajouter un remplissage en sélectionnant « Disposition du flux » dans le menu de gauche. Au fur et à mesure que vous apportez des modifications, l'aperçu sera automatiquement mis à jour, vous pourrez donc essayer différents paramètres pour voir ce qui fonctionne le mieux pour 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 à l'aide de la rangée de boutons dans le coin supérieur droit. En testant différentes mises en page, vous pouvez créer un flux Instagram qui a fière allure, 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 souhaiterez donc peut-être afficher moins de photos et de vidéos sur les appareils mobiles.
Pour ce faire, tapez simplement un numéro 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 que sur les 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 une palette de couleurs héritée de votre thème WordPress, mais il propose également des thèmes « Clair » et « Sombre » que vous pouvez utiliser.
Une autre option consiste à créer votre propre jeu de couleurs en sélectionnant « Personnalisé », puis en utilisant les commandes pour modifier la couleur d'arrière-plan, la couleur du bouton, la couleur du texte, etc.
Par défaut, Smash Balloon ajoute un en-tête à votre flux, qui est votre photo de profil 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 bio Instagram.
Parfois, vous souhaiterez peut-être afficher une photo de profil différente. Par exemple, votre avatar Instagram peut entrer en conflit avec votre thème WordPress.
Pour ce faire, cliquez simplement sur « Ajouter une image » sous « Afficher l'avatar personnalisé ».
Vous pouvez ensuite soit choisir une image dans la médiathèque WordPress, soit télécharger une nouvelle photo depuis votre ordinateur.
De même, vous pouvez afficher une biographie différente. Par exemple, vous souhaiterez peut-être présenter votre flux Instagram ou encourager les gens à vous suivre pour obtenir davantage de contenu intéressant.
Pour remplacer la bio Instagram, tapez-la simplement dans la case « Ajouter une bio personnalisée ».
Smash Balloon analyse automatiquement vos photos Instagram et les affiche dans la meilleure résolution. Bien que les paramètres par défaut conviennent à la plupart des sites Web, il est possible d'agrandir ou de réduire les images.
Pour modifier la taille de l'image, cliquez sur « Messages » dans le menu de gauche. Ensuite, sélectionnez l’option « Images et vidéos ».
Vous pouvez désormais choisir entre une miniature, une taille moyenne et une taille réelle à l'aide du menu déroulant. Pour en savoir plus sur ce sujet, veuillez consulter notre guide du débutant sur les tailles d’image 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 » au bas de votre flux Instagram, qui permet aux visiteurs de faire défiler davantage de vos photos et vidéos.
Puisqu'il s'agit d'un bouton très important, vous souhaiterez peut-être le personnaliser en sélectionnant l'option « Charger plus de bouton » dans le menu de gauche.
Ici, vous pouvez aider « Load More » à se démarquer en modifiant la couleur d’arrière-plan, la couleur du texte et l’état de survol.
Vous pouvez également modifier l’étiquette du bouton en la tapant dans le champ « Texte ».
Une autre option consiste à supprimer complètement le bouton en cliquant sur le bouton « 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 cet esprit, vous souhaiterez peut-être aider le bouton à se démarquer en sélectionnant « Suivre le bouton » dans le menu de gauche.
Ici, vous pouvez modifier la couleur d’arrière-plan du bouton, l’état de survol et la couleur du texte.
Par défaut, le bouton a une étiquette générale « 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 enregistrer vos modifications. Vous êtes maintenant prêt à ajouter le flux Instagram à votre widget de 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 à l'aide du bloc Flux Instagram.
Si vous avez créé plusieurs flux à l’aide de Smash Balloon, vous devrez connaître le code du flux.
Allez simplement sur Instagram » Tous les flux, puis copiez la valeur dans la colonne « Shortcode ». Dans l'image suivante, nous devrons utiliser instagram-feed feed=1.
Cela fait, accédez à 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é, alors assurez-vous 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 faire vivre le widget. Pour plus d’informations, veuillez consulter notre guide étape par étape sur la façon d’ajouter et d’utiliser des widgets dans WordPress.
Si vous utilisez un thème compatible avec le blocage, vous pouvez ajouter un flux Instagram à la barre latérale à l'aide de l'éditeur complet du site. Pour commencer, accédez simplement à 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 « Instagram Feed » et sélectionner le bon bloc lorsqu’il apparaît.
Par défaut, l'éditeur complet du site 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 souhaiterez 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 persistante 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 appelé oEmbed. Cependant, Facebook a modifié la façon dont fonctionne oEmbed, vous ne pouvez donc plus facilement intégrer des 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, publication ou zone prête à accueillir un widget, telle que la barre latérale. Vous pouvez également créer facilement un flux Facebook personnalisé dans WordPress.
Pour activer cette fonctionnalité, accédez simplement à 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 « Intégrer » pour trouver le bon bloc.
Lorsque le bloc « Intégrer » apparaît, faites-le glisser sur la zone où vous souhaitez afficher la photo.
Dans le champ « Intégrer », collez simplement l'URL de la publication Instagram que vous souhaitez afficher sur votre site Web. Ensuite, cliquez sur « Intégrer ».
WordPress affichera désormais la publication Instagram spécifique.
Si vous êtes satisfait de son apparence, cliquez sur « Mettre à jour » pour le mettre en ligne.
Désormais, si vous visitez votre site Web, vous verrez la publication Instagram en direct.
Si vous utilisez un thème compatible avec le blocage, vous devrez alors 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 accédant à Apparence » Éditeur dans le tableau de bord WordPress. Une fois que vous êtes dans l'éditeur complet du site, cliquez sur le bouton « + » dans la section de la barre latérale, puis tapez « Intégrer ».
Lorsque le bloc de droite apparaît, cliquez 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 « Intégrer ».
L'éditeur complet du site affichera désormais la publication Instagram.
Si vous êtes satisfait de son apparence, cliquez sur « Enregistrer » pour publier cette photo ou cette vidéo dans la barre latérale activée par le blocage.
FAQ sur l'affichage des publications Instagram dans WordPress
Smash Balloon facilite la création d'un flux Instagram personnalisé ou même l'affichage de publications Instagram spécifiques sur votre site Web WordPress.
Cela étant dit, voici quelques-unes des questions les plus fréquemment posées concernant l’affichage des publications Instagram sur WordPress.
Comment créer un compte professionnel Instagram ?
Smash Balloon peut afficher des photos 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. Au lieu de cela, vous devrez ajouter l’avatar et la bio manuellement dans les paramètres du plugin.
Dans cet esprit, vous souhaiterez peut-être vérifier si vous disposez d’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 lignée 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 au compte professionnel ».
Si vous possédez actuellement un compte personnel et 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 désormais 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 peut-être voir vos messages Instagram et y répondre. Si vous souhaitez garder vos messages privés, cliquez pour désactiver la bascule.
Lorsque vous êtes prêt à passer à l'écran suivant, cliquez sur « Confirmer ».
Cela ouvre une fenêtre contextuelle dans laquelle vous pouvez saisir 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 désormais connectés.
Comment afficher des images Instagram sur WordPress ?
Dans le passé, vous pouviez facilement intégrer des images Instagram dans WordPress à l'aide d'un protocole appelé oEmbed.
Cependant, Facebook a modifié la façon dont fonctionne oEmbed, vous ne pouvez donc plus facilement intégrer des 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 Facebook Graph avant de pouvoir intégrer du contenu Instagram dans WordPress.
Heureusement, il est facile de résoudre le problème d'Instagram oEmbed dans WordPress à l'aide du 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 à accueillir des widgets telles que le pied de page de votre site WordPress, l'en-tête, la barre latérale, etc. 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 la barre latérale WordPress. Vous voudrez peut-être également consulter notre guide sur la façon d'intégrer une vidéo Facebook dans WordPress ou nos choix d'experts pour les meilleurs plugins de preuve sociale pour WordPress et WooCommerce.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.