Comment créer un flux photo Instagram personnalisé dans WordPress

Un flux Instagram peut maintenir votre site web à jour tout en vous permettant d'obtenir plus de likes, de partages et d'abonnés Instagram. Il vous aide à vous connecter avec votre public sur plusieurs plateformes et stimule l'engagement.

Les médias sociaux ont joué un rôle déterminant dans l'augmentation du trafic vers notre site web et l'élargissement de notre audience. En partageant du contenu engageant et en interagissant avec nos abonnés, nous avons pu accroître la notoriété de notre marque et attirer de nouveaux visiteurs.

Dans cet article, nous allons vous montrer comment créer facilement un flux photo Instagram personnalisé pour votre site web WordPress.

Pourquoi inclure un flux Instagram sur votre site WordPress ?

Intégrer un flux Instagram sur votre site WordPress vous permet de montrer du contenu frais à vos visiteurs sans beaucoup d'efforts supplémentaires. Cela encourage également les lecteurs à vous suivre sur Instagram.

Au lieu d'ajouter manuellement des images dans l'éditeur de blocs WordPress, vous pouvez simplement créer un flux qui se met à jour automatiquement chaque fois que vous publiez de nouvelles photos sur Instagram. Vous pouvez même afficher les photos d'autres personnes sur votre site en créant un flux de hashtags.

Dans l'image suivante, vous pouvez voir un exemple de marque qui utilise un flux Instagram personnalisé pour afficher du contenu généré par les utilisateurs.

De cette façon, vous pouvez utiliser un flux Instagram personnalisé pour fournir une preuve sociale précieuse et gagner plus d'argent en ligne.

Cela dit, voyons comment vous pouvez créer un flux photo Instagram personnalisé dans WordPress.

Comment créer un flux photo Instagram personnalisé dans WordPress

La manière la plus simple d'ajouter un flux photo Instagram à votre site est d'utiliser le plugin Smash Balloon Instagram Feed. C'est le meilleur plugin Instagram pour WordPress qui vous permet d'afficher instantanément le contenu de votre compte Instagram.

C'est aussi le moyen le plus simple de corriger le problème d'oEmbed de Facebook et Instagram dans WordPress.

Nous couvrirons plusieurs étapes dans notre tutoriel, et vous pouvez utiliser les liens rapides ci-dessous pour accéder aux différentes sections :

• How to Connect an Instagram Account to WordPress
• How to Customize Your Instagram Photo Feed
• Afficher un flux de vos photos Instagram dans WordPress
• Bonus : Laissez les clients acheter vos produits via Instagram

Tutoriel vidéo

S'abonner à WPBeginner

Si vous préférez des instructions écrites, continuez à lire.

How to Connect an Instagram Account to WordPress

Tout d'abord, vous devrez installer et activer le plugin Smash Balloon Instagram Feed. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, rendez-vous sur la page Flux Instagram » Paramètres depuis le tableau de bord WordPress.

Ensuite, saisissez votre clé de licence Smash Balloon dans le champ « Clé de licence ».

Vous trouverez ces informations dans l'e-mail de confirmation que vous avez reçu lors de l'achat de Smash Balloon, ainsi que dans votre compte Smash Balloon.

Une fois que vous avez fait cela, cliquez sur le bouton « Activer ».

Vous êtes maintenant prêt à créer un flux Instagram personnalisé. Pour commencer, sélectionnez Flux Instagram » Tous les flux, puis cliquez sur le bouton « Ajouter nouveau ».

Smash Balloon affichera maintenant tous les différents types de flux Instagram que vous pouvez créer.

Sélectionnez simplement le type de flux que vous souhaitez ajouter à WordPress, et cliquez sur « Suivant ».

Si vous souhaitez simplement afficher vos photos Instagram, vous pouvez utiliser un compte Instagram personnel. Cependant, vous aurez besoin d'un compte Instagram professionnel si vous souhaitez créer un flux de hashtags ou afficher les publications dans lesquelles votre compte est identifié.

Si vous sélectionnez « Publier Hashtag », vous devrez alors taper les hashtags que vous souhaitez utiliser. Pour afficher plusieurs hashtags dans le même flux, séparez simplement chaque hashtag par une virgule.

Une fois que vous avez fait cela, cliquez simplement sur « Suivant ».

Souhaitez-vous afficher les publications dans lesquelles votre compte est identifié ? Vous devrez sélectionner « Publications identifiées » à la place, puis cliquer sur « Suivant ».

Quel que soit le type de flux que vous créez, vous devrez connecter WordPress à votre compte Instagram.

Pour commencer, cliquez sur le bouton « Ajouter une source ».

Après cela, choisissez si vous souhaitez afficher des images d'un compte personnel ou professionnel.

Si vous sélectionnez le bouton à 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 manuellement l'avatar et la biographie Instagram dans les paramètres du plugin.

Après avoir choisi entre un compte professionnel et un compte personnel, cliquez simplement sur « Se connecter avec Facebook ».

Vous pouvez maintenant sélectionner le compte Instagram que vous souhaitez présenter sur votre site Web WordPress et cliquer sur « Suivant ».

Après cela, cochez la case à côté de la page Facebook liée au compte Instagram que vous souhaitez utiliser.

Une fois cela fait, vous devez cliquer sur le bouton « Suivant ».

Vous verrez maintenant une fenêtre contextuelle avec toutes les informations auxquelles Instagram Feed Pro aura accès et les actions qu'il pourra effectuer.

Pour restreindre l'accès du plugin à votre compte Instagram, cliquez simplement sur l'un des interrupteurs pour le faire passer de « Oui » à « Non ». Sachez simplement que cela peut affecter les photos qui apparaissent sur votre blog WordPress ou votre site web.

Dans cet esprit, nous vous recommandons de laisser tous les interrupteurs activés. Lorsque vous êtes satisfait de la configuration du flux, cliquez sur « Terminé ».

Vous verrez maintenant une fenêtre contextuelle avec le compte Instagram que vous venez d'ajouter à votre site web.

Cochez simplement la case à côté de ce compte, puis cliquez sur « Ajouter ».

Instagram Feed Pro vous ramènera maintenant à l'écran Flux Instagram » Tous les flux.

Pour créer un flux Instagram personnalisé, cochez simplement la case à côté du compte Instagram que vous souhaitez utiliser. Ensuite, cliquez sur « Suivant ».

Le plugin va maintenant créer un flux de photos Instagram que vous pouvez ajouter à n'importe quelle page, publication ou zone prête pour les widgets.

How to Customize Your Instagram Photo Feed

Par défaut, Smash Balloon ouvrira votre flux dans son éditeur, prêt à être personnalisé.

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 de médias sociaux.

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

Pour modifier la mise en page, cliquez simplement sur « Mise en page du flux » dans le menu de gauche. Vous pouvez maintenant choisir parmi une mise en page en grille, en maçonnerie ou en carrousel.

Il existe également une mise en page mise en surbrillance qui met en surbrillance une photo sur trois par défaut.

Lorsque vous cliquez sur les différentes options, l'aperçu en direct se mettra automatiquement à jour pour afficher la nouvelle mise en page. Cela facilite l'essai de différents designs et la recherche de celui que vous préférez.

Par défaut, Smash Balloon affiche le même nombre de photos 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.

Smartphones and tablets typically have smaller screens and less processing power, so you may want to show fewer Instagram photos and videos on mobile devices.

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

Par défaut, Smash Ballon divisera vos photos en 4 colonnes sur ordinateur, 2 colonnes sur tablette et une seule colonne sur mobile.

Vous souhaitez utiliser un nombre différent de colonnes ? Faites alors défiler jusqu'à la section « Colonnes » dans le menu de gauche.

Vous pouvez maintenant taper un nouveau nombre dans les champs Ordinateur, Tablette ou Mobile.

Pour vous assurer que votre flux Instagram est esthétique sur les appareils mobiles, il est judicieux de visualiser la version mobile de votre site WordPress.

Après avoir effectué vos modifications, cliquez sur le lien « Personnaliser ». Cela vous ramènera à l'éditeur principal de Smash Balloon, prêt à 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 propose également des thèmes « Clair » et « Sombre » que vous pourriez vouloir utiliser pour votre flux Instagram.

Vous pouvez même créer votre propre schéma de couleurs en sélectionnant « Personnalisé », puis en utilisant les paramètres pour changer la couleur des liens, la couleur de fond, la couleur du texte, et plus encore.

Par défaut, Smash Balloon ajoute un en-tête au flux Instagram, qui est votre photo de profil et le nom de votre page. Cela peut fournir un contexte supplémentaire utile pour que les visiteurs comprennent d'où proviennent ces images.

Pour modifier l'apparence de cette section, retournez à l'écran des paramètres principaux, puis sélectionnez « En-tête ».

Sur cet écran, vous pouvez changer la couleur de fond, afficher votre bio Instagram, modifier la taille de l'en-tête, et plus encore.

Par défaut, l'en-tête inclut votre photo de profil Instagram. Cependant, vous pourriez vouloir afficher une image différente, telle que le logo personnalisé de votre site.

Pour changer la photo de profil, cliquez sur « Ajouter une image » sous « Afficher l'avatar personnalisé ». Vous pouvez ensuite choisir une image dans la médiathèque WordPress ou télécharger une nouvelle photo.

Vous pouvez également ajouter une bio différente. Par exemple, vous pourriez ajouter un appel à l'action qui encourage les gens à visiter votre page Instagram.

Pour créer une bio Instagram unique, tapez simplement dans la zone « Ajouter une bio personnalisée ».

Lorsque vous êtes satisfait de l'apparence de l'en-tête, cliquez sur le lien « Personnaliser » pour revenir à l'écran des paramètres principaux.

Maintenant, vous devez cliquer sur « Articles ».

Pour commencer, vous pouvez basculer entre les mises en page en boîte et les mises en page normales pour les articles individuels dans le flux Instagram.

Pour ce faire, sélectionnez « Style des articles ».

Vous pouvez maintenant cliquer pour sélectionner la mise en page que vous souhaitez utiliser.

Si vous sélectionnez « En boîte », vous pouvez modifier la couleur d'arrière-plan, ajouter une ombre portée et augmenter le rayon de la bordure pour créer des coins arrondis.

Lorsque vous êtes satisfait de vos modifications, cliquez simplement sur le lien « Articles » pour revenir à l'écran précédent de Smash Balloon.

Cette fois, sélectionnez « Images et vidéos ».

Smash Balloon analyse automatiquement vos photos Instagram et les affiche à la meilleure résolution. Nous vous recommandons d'utiliser ces paramètres par défaut, car ils sont conçus pour améliorer la vitesse et les performances de votre WordPress. Cependant, vous pouvez agrandir ou réduire les images Instagram si nécessaire.

Pour modifier la taille de l'image, ouvrez simplement le menu déroulant « Résolution » et choisissez l'une des tailles d'images WordPress par défaut dans la liste.

Encore une fois, cliquez sur le lien « Articles » pour revenir à l'écran précédent.

Cette fois, sélectionnez « Légende ». Sur l'écran suivant, vous pouvez afficher la légende Instagram à côté de chaque image en cliquant sur le curseur « Activer ».

Cela ouvrira de nouvelles options de personnalisation à partir desquelles vous pourrez modifier la taille et la couleur du texte et définir une longueur de texte maximale.

Une fois cela fait, cliquez simplement sur le lien « Publications » pour revenir à l'écran précédent.

Le paramètre suivant est « Résumé des J'aime et des Commentaires ».

Ici, vous pouvez ajouter ou masquer le nombre total de J'aime et de commentaires sur chaque image. Si vos publications Instagram obtiennent un bon niveau d'engagement, ces chiffres peuvent encourager les gens à visiter votre page Instagram ou à vous suivre sur les réseaux sociaux.

Comme toujours, vous devez cliquer sur « Publications » pour revenir à l'écran précédent.

La dernière option est « État au survol », qui est la superposition que Smash Balloon ajoute à une publication lorsque vous la survolez avec votre souris.

Ici, vous pouvez choisir les informations que Smash Balloon affiche lorsque quelqu'un survole une publication en utilisant les paramètres sous « Informations à afficher ».

Vous pouvez également modifier la couleur de la superposition au survol.

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

Cela vous ramène à la page principale des paramètres de Smash Balloon, où vous pouvez cliquer sur l'onglet « Bouton Charger plus ».

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

Vous pouvez également essayer d'ajouter votre propre message au bouton en tapant dans le champ « Texte ».

Bien que nous recommandions de laisser ce bouton activé, vous pouvez le supprimer. Par exemple, vous pourriez encourager les gens à visiter votre Instagram en limitant le nombre de photos qu'ils peuvent voir sur votre site.

Pour supprimer le bouton, désactivez simplement le curseur « Activer » pour qu'il devienne gris.

If visitors like what they see, they may decide to subscribe using the ‘Follow on Instagram’ button that appears below the embedded feed.

Comme il s'agit d'un bouton très important, vous voudrez peut-être ajouter un style personnalisé pour le faire ressortir. Pour ce faire, sélectionnez « Personnaliser » pour revenir à l'écran des paramètres principaux. Ensuite, sélectionnez « Bouton Suivre » dans le menu de gauche.

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

By default, the button shows a ‘Follow on Instagram’ label.

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

Smash Balloon est livré avec une fenêtre contextuelle intégrée qui permet aux visiteurs d'ouvrir vos photos et vidéos Instagram sans quitter votre site Web.

Pour configurer cette fonctionnalité, retournez à l'écran principal des paramètres de Smash Balloon, puis cliquez sur « Fenêtre contextuelle ».

Ici, vous pouvez modifier le nombre de commentaires que Smash Balloon affichera dans la fenêtre contextuelle.

Si vous ne souhaitez pas utiliser la fonctionnalité de fenêtre contextuelle, vous pouvez la désactiver à l'aide du curseur « Activer ».

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 à votre site Web WordPress.

Afficher un flux de vos photos Instagram dans WordPress

Vous pouvez ajouter le flux Instagram personnalisé à votre site Web à l'aide d'un bloc, d'un widget ou d'un shortcode.

Si vous avez créé plusieurs flux à l'aide de Smash Balloon, vous devrez connaître le code du flux pour utiliser un widget ou un bloc.

Pour obtenir ce code, vous devez aller sur Instagram Feed » Tous les flux, puis copier le texte sous « Shortcode ».

Dans l'image suivante, nous devrons utiliser instagram-feed feed=4.

Si vous souhaitez intégrer le flux Instagram dans une page ou un article, vous pouvez utiliser le bloc Instagram Feed.

Ouvrez simplement la page ou la publication où vous souhaitez intégrer votre flux Instagram personnalisé. Ensuite, cliquez sur l'icône '+' pour ajouter un nouveau bloc et commencez à taper 'Flux Instagram'.

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à la page ou à la publication.

Le bloc affichera par défaut l'un de vos flux Instagram. Si vous souhaitez afficher un autre flux Smash Balloon, recherchez 'Paramètres du shortcode' dans le menu de droite.

Ici, ajoutez simplement le shortcode, puis cliquez sur « Appliquer les modifications ».

Si vous êtes satisfait de l'apparence du flux Instagram personnalisé, vous pouvez alors publier ou mettre à jour la page.

Une autre option consiste à ajouter le widget Flux Instagram à votre site Web. C'est un excellent moyen d'afficher un flux Instagram sur chaque page de votre site. Par exemple, vous pourriez ajouter le widget Instagram à la barre latérale ou au pied de page du thème WordPress.

Pour ajouter le widget Flux Instagram à votre site, accédez à Apparence » Widgets. Vous pouvez ensuite cliquer sur l'icône bleue '+' en haut de l'écran.

Dans le panneau qui apparaît, tapez 'Flux Instagram' pour trouver le bon widget.

Comme vous pouvez le voir dans l'image suivante, il existe deux widgets Flux Instagram, alors assurez-vous d'utiliser le bon.

Ensuite, faites simplement glisser le widget dans la zone où vous souhaitez afficher le flux Instagram, telle que 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. S'il ne s'agit pas du flux Instagram personnalisé que vous venez de créer, tapez le code du flux dans la boîte 'Paramètres du shortcode'.

After that, click on ‘Apply Changes.’

Vous pouvez maintenant rendre le widget actif en cliquant sur le bouton « Update ». Pour plus d'informations, veuillez consulter notre guide étape par étape sur comment ajouter et utiliser des widgets dans WordPress.

Another option is embedding the Instagram feed on any page, post, or widget-ready area using a shortcode.

Allez simplement dans Flux Instagram » Tous les flux et copiez le code dans la colonne 'Shortcode'. Vous pouvez maintenant ajouter ce code à n'importe quel bloc Shortcode. Pour obtenir de l'aide sur le placement du shortcode, veuillez consulter notre guide sur comment ajouter un shortcode.

Utilisez-vous un thème compatible avec les blocs ? Vous pouvez alors utiliser l'éditeur de site complet pour ajouter le bloc Flux Instagram n'importe où sur votre site Web WordPress.

Dans le tableau de bord, allez dans Apparence » Éditeur.

By default, the full-site editor will show the theme’s home template.

Si vous souhaitez ajouter le flux Instagram à une autre zone, cliquez sur « Modèle » ou « Parties de modèle ».

The editor will now show a list of all the template parts that make up your WordPress theme.

Simply click on the template where you want to show the Instagram feed.

WordPress will now show a preview of the design.

Pour modifier ce modèle, cliquez sur la petite icône en forme de crayon.

After choosing a template, just hover your mouse over the area where you want to add the Instagram photo feed.

Then, click on the blue ‘+’ button.

Une fois que vous avez fait cela, vous devez taper « Flux Instagram ».

When the right block appears, click to add it to the template.

Comme toujours, Smash Balloon affichera un flux par défaut. Vous pouvez modifier ce flux en ajoutant un shortcode en suivant le même processus décrit ci-dessus.

Bonus : Laissez les clients acheter vos produits via Instagram

Si vous avez une boutique en ligne, vous pouvez également utiliser votre flux Instagram personnalisé pour vendre facilement vos produits.

Smash Balloon Instagram Feed Pro vous permet d'étiqueter vos images Instagram avec des liens de produits afin que les utilisateurs puissent cliquer dessus et les acheter directement au lieu de naviguer sur vos pages de produits. Cela peut augmenter les ventes et stimuler les profits de votre boutique.

Pour plus de détails, vous pouvez consulter notre guide complet sur comment ajouter des images shoppables Instagram dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment créer un flux Instagram personnalisé dans WordPress. Vous pourriez également vouloir apprendre comment ajouter un concours Facebook dans WordPress pour augmenter l'engagement et notre liste de statistiques sur les médias sociaux pour les débutants.

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.