Voulez-vous intégrer des flux Instagram dans WordPress ?
Afficher des photos et des vidéos Instagram sur votre site Web permet de garder votre contenu frais, d'augmenter l'engagement des utilisateurs et de renforcer la confiance. C'est aussi un excellent moyen de promouvoir votre compte Instagram et d'obtenir plus d'abonnés.
Dans cet article, nous allons vous montrer comment intégrer Instagram dans WordPress, étape par étape.

Pourquoi intégrer Instagram sur 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 et services, accroître la notoriété de votre marque et développer votre audience.
Cependant, les gens ne verront pas votre contenu Instagram s'ils visitent simplement votre site Web. Dans cette optique, il est judicieux d'intégrer votre flux Instagram dans WordPress, afin que tout le monde puisse le voir.
C'est un moyen facile de promouvoir votre page de médias sociaux et d'encourager plus de personnes à vous suivre sur Instagram.
Tout ce contenu supplémentaire peut améliorer l'optimisation pour les moteurs de recherche (SEO) de votre site, et encourager les visiteurs à revenir pour consulter les derniers articles. Les commentaires et les likes positifs sont également une preuve sociale puissante qui peut renforcer la confiance et vous permettre de réaliser plus de ventes.
Cela étant dit, voyons comment vous pouvez intégrer un flux Instagram dans WordPress.
Comment installer un plugin de photos Instagram
La meilleure façon d'intégrer Instagram dans WordPress est d'utiliser le plugin 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.

C'est aussi le moyen le plus simple de résoudre le problème oEmbed de Facebook et Instagram dans WordPress.
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 ajouter un flux Instagram à votre site Web WordPress. Cependant, il existe également une version pro qui vous permet d'afficher des flux de hashtags, d'ajouter des images shoppables Instagram, 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 aussi 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 la section FAQ à la fin de ce guide.
When you’re ready, go ahead and install and activate the Smash Balloon Social Photo Feed plugin. For more details, see our guide on how to install a WordPress plugin.
How to Connect an Instagram Account to WordPress
After activating the plugin, your first task is connecting your Instagram account to WordPress. Simply go to Instagram Feed » Settings and then click on ‘Add New.’

With Smash Balloon pro, you can create feeds from tagged posts and hashtags, or even create a social wall with content from lots of different social media websites.
Since we’re using the free plugin, simply select ‘User Timeline’ and then click on ‘Next.’

Now, simply choose the account that you’ll use in your custom Instagram photo feed.
Pour commencer, cliquez sur le bouton « Ajouter une 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 « Personnel », 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 Instagram plus tard dans les paramètres du plugin.

Après avoir choisi « Personnel » ou « Professionnel », cliquez sur « Connexion avec Facebook ».
Vous pouvez maintenant sélectionner le compte Instagram que vous souhaitez présenter sur votre site Web WordPress, et cliquez sur « Suivant ».

Après cela, cochez la case à côté de la page Facebook liée à votre compte Instagram.
Une fois que vous avez fait cela, cliquez sur le bouton « Suivant ».

Vous verrez maintenant une fenêtre contextuelle avec toutes les informations auxquelles Smash Balloon aura accès et les actions qu'il peut effectuer.
Pour restreindre l'accès de Smash Balloon à 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 et vidéos que vous pouvez afficher 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 des paramètres, 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 ».

Smash Balloon vous ramènera maintenant à l'écran Flux Instagram » Tous les flux.
Pour ajouter un flux de médias sociaux à WordPress, cochez simplement la case à côté du compte Instagram que vous souhaitez utiliser. Ensuite, cliquez sur « Suivant ».

The plugin will now create an Instagram photo feed that you can add to any page, post, or widget-ready area. For example, you can display Instagram photos in a WordPress sidebar.
However, before embedding the Instagram feed you may want to customize how it looks and add any missing information.
How to Customize Your Instagram Photo Feed
By default, Smash Balloon will open your feed in its editor ready for you to customize.
On the right, you’ll see a preview of your Instagram photo feed. On the left-hand side are all the settings you can use to customize the photo feed.

Most of these settings are self-explanatory, but we’ll quickly cover some key areas.
To start, you can change the Instagram photo layout and add padding by selecting ‘Feed Layout’ from the left-hand menu.
As you make changes, the preview will update automatically so you can try different settings to see what looks the best.

By default, Smash Balloon shows the same number of photos no matter whether the user is on a desktop computer or mobile device.
You can preview how the Instagram feed will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

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.
To do this, just type a different number into the ‘Mobile’ field under ‘Number of Posts.’

By creating different layouts for smartphones, tablets, and desktop computers you can make sure the feed looks great, no matter what device the visitor is using.
By default, the plugin feed shows fewer columns on smartphones and tablets, compared to desktop computers. This helps your photos and videos fit comfortably on smaller screens.
To change these default settings, simply type new numbers into the ‘Columns’ settings.

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 à la place.
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 d'arrière-plan, la couleur du texte dans WordPress, 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. Pour modifier l'apparence de cette section, cliquez sur « En-tête » dans le menu de gauche.
Sur cet écran, vous pouvez changer la couleur d'arrière-plan, afficher votre bio Instagram, modifier la taille de l'en-tête, et plus encore.

Parfois, vous voudrez peut-être afficher une photo de profil différente. Par exemple, si votre avatar Instagram ne ressort pas de votre thème, vous pouvez utiliser un logo personnalisé à la place.
Pour changer l'image de profil, cliquez sur « Ajouter une image » sous « Afficher un 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 encourager les gens à vous rendre visite sur Instagram, ou à commencer à suivre votre compte.
Pour créer une bio Instagram unique, tapez simplement dans la zone « Ajouter une bio personnalisée ».

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, mais vous pouvez agrandir ou réduire les images Instagram si nécessaire.
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 des images miniatures, moyennes et en taille réelle à l'aide du menu déroulant qui apparaît.
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 de l'apparence du flux, 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 afin que les visiteurs puissent faire défiler vos photos et vidéos.
Vous pouvez modifier l'apparence de ce bouton en sélectionnant « 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 vous 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, basculez 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.
Since it’s such an important button, you may want to add some custom styling to help it stand out. To do this, select ‘Follow Button’ in the left-hand menu.
Here, you can change the button’s background color, hover state, and text color.

By default, the button shows a ‘Follow on Instagram’ label.
You can replace this with your own call to action by typing into the ‘Text’ field.

When you’re happy with how the Instagram feed looks, don’t forget to click on ‘Save’ to store your changes.
You’re now ready to add the Instagram feed to your WordPress website.
How to Embed Instagram Feed in WordPress
You can add the Instagram feed to your website using a block, widget, or shortcode.
Si vous avez créé plus d'un flux avec Smash Balloon Social Photo Feed, vous devrez connaître le code du flux si vous souhaitez utiliser un widget ou un bloc.
Pour obtenir ce code, allez dans Instagram Feed » Tous les flux, puis copiez le texte sous « Shortcode ».
Dans l'image suivante, nous devrons utiliser instagram-feed feed=1.

Si vous souhaitez intégrer le flux Instagram dans une page ou un article, nous vous recommandons d'utiliser le bloc Instagram Feed.
Remarque : Si vous utilisez un thème compatible avec les blocs, vous pouvez suivre les instructions ci-dessous pour ajouter le bloc n'importe où sur votre site en utilisant l'éditeur complet du site.
Ouvrez simplement la page ou l'article où vous souhaitez intégrer votre flux de photos et vidéos Instagram. Ensuite, cliquez sur l'icône « + » pour ajouter un nouveau bloc et commencez à taper « Instagram Feed ».
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 Smash Balloon. Si vous souhaitez afficher un flux Instagram différent à la place, recherchez « Paramètres du shortcode » dans le menu de droite.
Ici, ajoutez simplement le codeinstagram-feed feed=1, puis cliquez sur le bouton « Appliquer les modifications ».

Le bloc affichera désormais les photos et vidéos de votre compte Instagram. Publiez ou mettez à jour la page pour rendre le flux visible sur votre site Web.
Vous pouvez également ajouter le flux Instagram à n'importe quelle zone prête pour les widgets. Par exemple, vous pourriez l'ajouter au pied de page de votre site WordPress, ou à la section de la barre latérale. De cette façon, les visiteurs pourront voir le flux sur chaque page de votre site Web.
Allez simplement dans Apparence » Widgets dans le tableau de bord WordPress, puis cliquez sur le bouton bleu « + ».

Dans la barre de recherche, tapez « Instagram Feed » et sélectionnez le bon widget lorsqu'il apparaît.
WordPress dispose d'un bloc intégré « Instagram Feed », assurez-vous donc de choisir celui qui affiche le logo officiel d'Instagram.

After that, simply drag the widget onto the area where you want to show the Instagram feed.
The widget will automatically show one of the feeds you created using Smash Balloon. If you want to show a different Instagram feed, then just type the feed’s shortcode into the ‘Shortcode Settings’ box.
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.
Simply go to Instagram Feed »All Feeds and copy the code in the ‘Shortcode’ column. You can now add this code to any Shortcode block.
Pour obtenir de l'aide sur la façon de placer le shortcode, veuillez consulter notre guide sur comment ajouter un shortcode.
Finally, if you have a block-enabled theme, then you can use the full-site editor to add the Instagram Feed block anywhere on your site.
In the WordPress dashboard, simply go to Appearance » Editor.

By default, the full-site editor will show the theme’s home template.
If you want to add the Instagram feed to a different area, then click on either ‘Template’ or ‘Template Parts.’

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.

After that, start typing in ‘Instagram Feed.’
When the right block appears, click to add it to the template.

As always, Smash Balloon will show a feed by default if you do not add a specific shortcode. You can change this feed by adding a shortcode following the same process described above.
FAQ sur l'intégration d'Instagram dans WordPress
Smash Balloon facilite l'affichage de photos et vidéos Instagram sur votre site web. Cela dit, voici quelques-unes des questions les plus fréquemment posées concernant l'ajout d'un flux Instagram dans WordPress.
Comment créer un compte Instagram professionnel ?
Smash Balloon Social Photo Feed 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 d'un compte Instagram personnel. Gardez cela à l'esprit, vous voudrez peut-être vérifier si vous avez un compte personnel ou professionnel, puis passer à un compte professionnel afin que Smash Balloon puisse récupérer automatiquement votre avatar et votre biographie.
Pour vérifier, visitez simplement votre compte Instagram et cliquez sur l'icône à trois lignes dans le menu latéral.

Après cela, sélectionnez « Paramètres ».
Si vous n'avez pas de compte professionnel, cet écran affichera « Passer à un compte professionnel » dans le menu de gauche.

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 ajouter un flux Instagram à WordPress, vous devrez 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.
Après cela, cliquez sur « Compte lié ». Vous pouvez maintenant sélectionner « Instagram » et cliquer sur le bouton « Connecter ».

Facebook affichera maintenant toutes les informations auxquelles il pourra accéder et les actions qu'il pourra effectuer sur Instagram.
Si vous êtes d'accord pour continuer, cliquez sur le bouton « Connecter ».

Sachez simplement que toute autre personne qui gère votre page Facebook pourra voir vos messages Instagram et y répondre. Si vous souhaitez garder vos messages Instagram privés, cliquez pour désactiver l'option.
Lorsque vous êtes satisfait et prêt à passer à l'étape suivante, cliquez sur « Confirmer ».

Cela ouvre une fenêtre contextuelle où vous pouvez saisir votre nom d'utilisateur et votre mot de passe Instagram.
Ensuite, cliquez sur « Se connecter ».

Après quelques instants, vous verrez un message indiquant que vos comptes Instagram et Facebook sont maintenant connectés.
Nous espérons que cet article vous a aidé à apprendre comment intégrer facilement Instagram dans WordPress. Vous pourriez également consulter notre guide sur comment créer un flux Facebook personnalisé dans WordPress, ou consulter notre sélection d'experts des meilleurs plugins de médias sociaux pour WordPress.
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.


Ayanda Temitayo
C'est la première fois que j'intègre Instagram sur mon site WordPress et cela semble assez facile avec ce guide. J'adore la façon dont vous utilisez des illustrations et des images pour les explications. C'est un article de blog très long mais cela en valait la peine.
Merci pour ce guide. Avez-vous un lien utile pour intégrer également un flux Twitter ?
Support WPBeginner
Nous avons un guide pour intégrer des tweets sur notre page ci-dessous !
https://www.wpbeginner.com/plugins/how-to-embed-actual-tweets-in-wordpress-blog-posts/
Admin
Ekene
Comment puis-je intégrer un plugin vidéo YouTube à mon blog
Support WPBeginner
There are multiple options for adding a YouTube video to your site, you would want to take a look at our guide below:
https://www.wpbeginner.com/beginners-guide/how-to-easily-embed-videos-in-wordpress-blog-posts/
Admin
Todd
I have added an Instagram video on wordpress with the oAuth but am experiencing a problem. I have the page broken into 2 columns with videos going down the page and the Instagram videos have a large white space under them. Do you know a way to fix that? Here is my site http://www.BeardGrowl.com
Thanks for any help you might be able to offer.
Stephen Clark
I implemented this neat snippet as you instructed however when it rendered on my WP blog/site, it was a thumbnail sized photo. Is that the intended behavior? Or is it supposed to render the image at full size, meaning there is something in my code I need to dig into?
Personnel éditorial
Is the image being resized? If so look in your Settings > Media to see the maximum embed width.
Admin
Julien Maury
I’m afraid this code will be useless with WordPress 3.5 :
https://twitter.com/jmlapam/status/264101995357540354
Julien Maury
Sorry : the link is here : http://core.trac.wordpress.org/changeset/22351
greg
It’s best practise to omit the last ?> from an all php file.
Cool article!
Mia
Thank you WPB..your articles have been so helpful!
Personnel éditorial
Thanks for the kind words Mia
Admin
Richard Wells
Don’t want to be picky, but the closing ?> tag is missing from the code snippet.
Personnel éditorial
WordPress takes care of that by default. It should not give you any error.
Admin
Richard Wells
Yes, it dawned on me after I posted the comment, I am feeling foolish…
Javier Villanueva
WP n’ajoute pas de balise ?> de fermeture, elle n’est tout simplement pas nécessaire dans les fichiers php et c’est une bonne pratique générale de l’omettre pour éviter d’envoyer accidentellement des espaces supplémentaires
Konstantin Kovshenin
Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare
Personnel éditorial
Je n'ai même pas vu ça dans les fonctionnalités de la version 3.5. Bon, pendant encore un mois environ, les gens pourront toujours l'utiliser.
Admin