Comment créer un widget YouTube pour votre site web (étape par étape)
Accueil Blog Comment créer un widget YouTube pour votre site web (Guide ultime)

Comment créer un widget YouTube pour votre site web (Guide ultime)

Comment créer un widget YouTube pour votre site web

Vous voulez savoir comment créer un widget YouTube pour votre site web ?

YouTube étant le premier réseau social pour le contenu vidéo, les widgets YouTube peuvent être un moyen intelligent d'attirer les visiteurs ou de développer votre chaîne.

Mais l'ajout direct de widgets YouTube peut s'avérer délicat, surtout si vous n'avez pas l'habitude de manipuler du code.

Pour vous aider, nous avons élaboré un guide complet sur l'ajout de widgets YouTube à votre site web.

Nous aborderons plusieurs méthodes dans cet article, vous pouvez donc cliquer sur celle qui vous intéresse :

Pourquoi utiliser un widget YouTube pour votre site web ?

  • Vous pouvez présenter des preuves sociales telles que des critiques et des témoignages sur YouTube et convaincre les gens d'acheter vos produits.
  • Pour obtenir plus de vues, de likes et d'abonnés, vous pouvez diffuser votre propre contenu vidéo à l'aide d'un widget YouTube.
  • Votre widget YouTube peut également partager votre flux en direct avec les visiteurs de votre site web, ce qui vous permet d'inciter les personnes intéressées à se joindre à vous.
exemple de flux en direct sur youtube
  • Vous pouvez partager du contenu généré par les utilisateurs (CGU) de vos clients afin d'encourager davantage de personnes à créer du contenu vidéo sur votre marque.
  • En montrant du contenu pertinent provenant de YouTube, vous pouvez attirer l'attention des internautes et les inciter à rester sur votre site.

Le moyen le plus simple d'ajouter un widget YouTube à WordPress ?

Si vous souhaitez ajouter un widget YouTube à votre site web, vous avez le choix entre deux options :

  • Ajouter manuellement le widget YouTube à votre site web
  • Utiliser un plugin WordPress pour créer et intégrer le widget YouTube

La méthode manuelle présente l'inconvénient de nécessiter l'utilisation de CSS, de JavaScript et d'autres langages de codage.

intégrer manuellement une vidéo youtube

Une alternative simple consiste à utiliser un plugin WordPress. Ainsi, le plugin pourra récupérer les vidéos et les afficher automatiquement sur votre site web.

En ce qui concerne les plugins de flux YouTube, la meilleure option sur le marché est YouTube Feed Pro de Smash Balloon.

youtube feed pro homepage

Cet outil fantastique vous permet de créer des widgets YouTube et de les afficher sur votre site web en quelques clics seulement - aucun codage n'est nécessaire.

Pour rendre les choses encore plus faciles, vous disposez également de plusieurs fonctionnalités intéressantes :

  • Vous pouvez utiliser votre widget pour afficher des vidéos de votre chaîne, des listes de lecture YouTube, des flux en direct, etc.
  • Le plugin étant très léger, vous pouvez afficher des tonnes de vidéos YouTube, et votre flux se chargera toujours à la vitesse de l'éclair.
  • Pour vous aider à développer votre chaîne, le plugin vous permet d'afficher une bannière avec un bouton d'abonnement pendant la lecture de votre vidéo.
  • En un seul clic, vous pouvez importer un modèle préconstruit et même utiliser l'éditeur en direct pour concevoir votre widget en détail.
éditeur de flux en direct youtube

Comme vous pouvez le constater, YouTube Feed Pro vous offre le moyen le plus simple d'intégrer des widgets YouTube sur les sites Web.

Prêt à vous lancer dans le marketing sur YouTube ? Obtenez votre exemplaire de YouTube Feed Pro dès aujourd'hui.

Méthodes de création d'un widget YouTube pour votre site web

Voyons maintenant les étapes à suivre pour créer un widget YouTube pour votre site web. Nous commencerons par la méthode la plus simple, puis nous passerons aux instructions les plus difficiles.

Méthode 1 : Créer un widget YouTube à l'aide d'un plugin WordPress

Comme indiqué précédemment, la méthode la plus simple consiste à utiliser un plugin WordPress et à le laisser récupérer et afficher les vidéos YouTube pour vous.

Commençons :

Étape 1 : Télécharger et installer le plugin YouTube Feed Pro

Tout d'abord, cliquez ici pour obtenir votre copie de YouTube Feed Pro. Ensuite, installez et activez ce plugin sur votre site web.

Si vous ne savez pas comment faire, vous pouvez simplement suivre les étapes suivantes pour installer un plugin WordPress.

Étape 2 : Créer un nouveau widget YouTube

Vous pouvez maintenant suivre la procédure en 3 étapes pour créer un nouveau widget YouTube.

Tout d'abord, ouvrez le menu YouTube Feed " All Feeds " dans votre tableau de bord WordPress.

À partir de là, vous pouvez cliquer sur le bouton Ajouter un nouveau .

ajouter un nouveau flux youtube.

YouTube Feed Pro vous permet alors de choisir le type de contenu YouTube à afficher dans votre widget. Les options proposées sont les suivantes :

  • Chaîne : Flux affichant le contenu d'une chaîne YouTube à l'aide d'un identifiant de chaîne ou d'un nom d'utilisateur.
  • Liste de lecture : Afficher des listes de lecture spécifiques dans un flux en saisissant l'identifiant de la liste de lecture YouTube.
  • Recherche : Utilisez le type de flux "recherche" pour afficher des contenus basés sur des termes ou des phrases de recherche spécifiques.
  • Flux en direct : Affichez une seule vidéo à venir ou en direct dans votre flux.
  • Vidéos individuelles : Afficher des vidéos individuelles triées dans l'ordre

Pour continuer, sélectionnez votre type de flux et cliquez sur Suivant.

choisissez votre type de flux youtube.jpg

Dans notre exemple, nous utiliserons l'option Chaîne pour intégrer une chaîne YouTube dans le widget.

Étape 3 : Ajouter la source de votre widget YouTube

Maintenant que vous avez créé un nouveau widget, il est temps de le connecter à votre compte YouTube. La manière la plus simple de le faire est d'utiliser une clé API.

Conseil de pro: si vous n'avez pas encore de clé, vous pouvez suivre ce guide simple sur la création d'une nouvelle clé API.

Une fois que vous avez votre clé API, collez-la dans la fenêtre avant de cliquer sur Ajouter.

ajouter une clé api au flux yotube pro

Il est maintenant temps de sélectionner le contenu YouTube que vous souhaitez afficher. Pour cet exemple, nous utiliserons une chaîne YouTube.

Tout d'abord, ouvrez la chaîne YouTube que vous souhaitez intégrer. L'URL de la chaîne se trouve en haut de la barre d'adresse.

Copiez tout ce qui se trouve après /user/ ou /channel/ , puis retournez sur votre site.

copier le nom d'utilisateur de la chaîne youtube

Sur votre site web, collez le code que vous venez de copier dans le champ Channel ID ou Username avant de cliquer sur Next.

De même, vous pouvez copier le code de l'URL de vos sélections, flux en direct, vidéos individuelles, etc. pour d'autres types de flux.

entrer la source pour le flux youtube

Étape 4 : Personnalisation de votre widget YouTube

Si vous souhaitez vraiment que votre widget YouTube se démarque du reste de votre contenu, vous pouvez choisir parmi une collection de modèles de flux :

  • Défaut
  • Carrousel
  • Cartes
  • Liste
  • Galerie
  • Dernière vidéo
  • Carrousel de présentation
  • Widget

Il vous suffit de choisir le modèle que vous préférez et de cliquer sur le bouton " Suivant".

choisir un modèle de flux youtube feed pro

Vous pouvez ainsi importer un design prédéfini pour votre widget YouTube.

Pour vous aider à personnaliser votre widget en détail, le plugin affiche désormais l'éditeur de flux en direct. C'est ici que vous pouvez modifier la mise en page, les couleurs, l'en-tête, la taille du flux et bien plus encore.

éditeur de flux en direct youtube feed pro

Chaque fois que vous effectuez des modifications, vous pouvez voir à quoi ressemble votre widget YouTube en utilisant l'aperçu en direct sur la droite.

Pour commencer, cliquez sur l'option Feed Layout à gauche.

open feed layout options youtube feed pro

À partir de là, vous pouvez choisir parmi 4 mises en page différentes pour votre widget YouTube :

  • Grille : Incorporez des tonnes de vidéos en une seule fois dans différentes lignes et colonnes.
  • Galerie : Affiche un grand lecteur vidéo avec de petites vignettes en dessous.
  • Liste : Afficher les vidéos YouTube dans une seule colonne
  • Carrousel : Affichez vos vidéos sous forme de diaporama sur votre site web.

Un clic sur chaque option de mise en page permet de définir d'autres paramètres, tels que le nombre de colonnes à utiliser, etc.

options de mise en page du flux youtube feed pro

Une fois que vous avez choisi la mise en page qui vous convient, cliquez sur Enregistrer pour conserver vos modifications.

Pour continuer à personnaliser votre widget, cliquez sur le bouton Personnaliser en haut à gauche.

Vous pouvez maintenant modifier les couleurs de votre widget en cliquant sur l'option Color Scheme à gauche.

Avec YouTube Feed Pro, vous pouvez facilement changer toutes les couleurs en une seule fois en sélectionnant une palette de couleurs.

Ici, vous avez le choix entre 4 schémas de couleurs :

  • Héritage du thème : Assurez-vous que votre widget reprend les couleurs de votre site web.
  • Léger : Utilisez des couleurs claires et une police sombre pour votre widget YouTube.
  • Sombre : affiche un widget avec une couleur d'arrière-plan sombre et une couleur de police claire.
  • Personnalisé : Sélectionnez manuellement toutes les couleurs du widget YouTube.
options de couleurs pour votre widget youtube

N'oubliez pas de cliquer sur Enregistrer pour confirmer vos modifications une fois que vous avez choisi une palette de couleurs.

Comme auparavant, vous pouvez cliquer sur Personnaliser en haut à gauche pour continuer à modifier le design de votre widget YouTube.

option de schéma de couleurs widget youtube

Cliquez maintenant sur l'option En-tête dans le panneau de gauche pour modifier l'apparence de l'en-tête de votre widget.

options d'en-tête ouvertes flux youtube

Vous pouvez choisir d'afficher ou de masquer votre en-tête en basculant l'option Activer.

En dessous, vous pouvez choisir d'afficher un en-tête standard avec le nom de votre chaîne, votre logo, le nombre d'abonnés et des descriptions.

Vous pouvez également choisir un en-tête Texte et rédiger un texte personnalisé pour l'en-tête de votre widget YouTube.

options d'en-tête youtube feed pro

Ensuite, cliquez sur Enregistrer pour confirmer vos modifications, comme auparavant.

Vous pouvez maintenant utiliser les options restantes pour définir la taille de votre flux, le design des boutons, les éléments visibles et bien plus encore. Vous pouvez même créer votre flux de médias sociaux en ajoutant des filtres à partir d'ici.

Une fois que vous êtes satisfait du design de votre widget YouTube, cliquez à nouveau sur le bouton Enregistrer.

Étape 5 : Afficher votre widget YouTube

Maintenant que vous avez créé votre widget YouTube, il est temps de l'afficher sur votre site web. Pour intégrer votre widget YouTube dans une page, vous pouvez simplement utiliser l'éditeur de flux en direct.

Il vous suffit de cliquer sur le bouton Embed dans le coin supérieur droit.

intégrer votre flux youtube

Une fenêtre contextuelle s'affiche alors, dans laquelle vous pouvez définir l'emplacement de votre widget de flux YouTube. Vous pouvez choisir d'afficher le contenu des médias sociaux sur votre page web ou dans les zones de votre site prêtes à recevoir des widgets.

Pour l'instant, cliquez sur le bouton Ajouter à une page de la fenêtre contextuelle.

intégrer à une page un flux youtube

YouTube Feed Pro affiche alors une liste des pages de votre site Web WordPress.

Pour continuer, sélectionnez une page dans la liste et cliquez sur Ajouter.

sélectionnez votre page wordpress

Cela ouvrira cette page dans l'éditeur de blocs de WordPress. Dans l'éditeur de blocs, cliquez sur l'icône Plus (+) pour choisir un nouveau bloc de contenu.

ajouter un bloc page wordpress

Utilisez maintenant la barre de recherche en haut pour chercher "youtube feed" avant de cliquer sur le widget Feeds for YouTube ci-dessous.

Cela permettra d'intégrer le widget de flux YouTube à votre page. Cliquez ensuite sur le bouton Mettre à jour ou Publier en haut de la page, et votre widget YouTube sera en ligne.

Il suffit d'ouvrir votre site web pour voir à quoi il ressemble.

exemple de flux youtube sur votre site web

Voyons maintenant la prochaine façon d'intégrer votre widget de flux YouTube.

Méthode 2 : Créer un widget YouTube pour votre barre latérale ou votre pied de page WordPress

Le plugin YouTube Feed Pro est également fourni avec un widget WordPress prêt à l'emploi que vous pouvez ajouter aux zones de la barre latérale de votre site web, telles que le pied de page ou la barre latérale.

Pour afficher un widget de barre latérale YouTube sur WordPress, suivez les étapes ci-dessus pour créer votre widget de flux.

Ensuite, allez dans YouTube Feed " All Feeds depuis votre tableau de bord WordPress et cliquez sur votre widget YouTube.

Votre widget de flux YouTube s'ouvre à nouveau dans l'éditeur de flux en direct.

Comme pour la méthode précédente, cliquez sur le bouton Embed en haut.

intégrer votre flux youtube

À l'aide de la fenêtre contextuelle, vous pouvez choisir d'intégrer ce widget de flux YouTube dans votre barre latérale ou votre pied de page.

Il suffit de cliquer sur le bouton Ajouter à un widget ici.

intégrer dans un widget youtube feed pro

En cliquant dessus, vous accéderez à la page Widgets de votre site web, où vous pourrez gérer les widgets de votre barre latérale ou de votre pied de page.

Vous souhaitez afficher le widget du flux YouTube dans la barre latérale ? Cliquez sur le panneau Barre latérale .

ouvrir le panneau latéral

Si vous souhaitez afficher le contenu de YouTube dans le pied de page, vous pouvez cliquer sur Pied de page ici.

Pour l'instant, nous utiliserons la barre latérale pour notre exemple.

ouvrir le panneau de bas de page

Vous pouvez cliquer sur l'icône plus (+) pour ajouter un nouveau widget.

Ensuite, il suffit de cliquer sur le widget Feeds for YouTube dans les options.

ajouter un widget youtube à votre site

Cliquez sur Mettre à jour, et votre nouveau widget de flux YouTube sera maintenant en ligne.

Lorsque vous naviguez vers l'avant de votre site web, vous pouvez voir comment fonctionne le widget de votre chaîne YouTube.

afficher le flux vidéo de youtube dans la barre latérale de wordpress

Méthode 3 : Créer manuellement un widget YouTube pour votre site

Si vous souhaitez créer manuellement un widget YouTube pour votre site web, vous devrez copier et coller le code d'intégration de YouTube sur votre site.

Comme vous devez faire des allers-retours pour coller le code d'intégration de chaque vidéo, cette méthode prend beaucoup plus de temps. De plus, elle n'offre pas le même niveau de personnalisation qu'un plugin WordPress.

En fait, pour que votre widget ressemble exactement à ce que vous souhaitez, vous devrez peut-être faire appel à un développeur.

Cela dit, il existe deux façons de créer manuellement un widget YouTube sur WordPress :

  • En collant l'URL d'une vidéo YouTube directement dans votre éditeur WordPress
  • Copier le code d'intégration iFrame à partir de l'option de partage de la vidéo

Aucune de ces méthodes ne vous permet d'afficher un flux complet de vidéos, ce qui limite votre widget à une seule vidéo.

Méthode de l'URL YouTube

Pour essayer la première option, ouvrez d'abord la vidéo YouTube que vous souhaitez intégrer.

Après avoir ouvert la vidéo, copiez l'URL depuis le haut.

copier l'url de votre vidéo youtube

Une fois que vous avez fait cela, créez une nouvelle page sur votre site WordPress en naviguant vers le menu Pages " Ajouter une nouvelle page depuis votre tableau de bord.

nouvelle page pour le flux youtube

Si vous souhaitez utiliser un article WordPress à la place, allez dans Articles " Ajouter un nouvel article dans votre tableau de bord.

Pour notre exemple, nous utiliserons une page WordPress.

ajouter un nouveau message wordpress

Ensuite, collez l'URL directement dans l'éditeur classique ou l'éditeur de blocs du nouvel article ou de la nouvelle page.

WordPress convertira alors cette URL en vidéo YouTube et l'affichera sur votre page ou votre article.

intégrer manuellement une vidéo youtube

Vous pouvez également utiliser cette méthode pour afficher votre widget dans une barre latérale.

Il vous suffit de naviguer vers Apparence " Widgets pour commencer à gérer vos widgets WordPress.

page de widgets wordpress

Cliquez ensuite sur l'option Sidebar pour intégrer la vidéo dans votre sidebar.

ouvrir le panneau latéral

Vous souhaitez afficher une vidéo dans votre pied de page ? Cliquez plutôt sur le panneau Pied de page.

Pour ce tutoriel, nous utiliserons la barre latérale.

ouvrir le panneau de bas de page

Cliquez sur l'icône plus (+) pour ajouter un nouveau widget, puis sélectionnez Paragraphe dans la liste des widgets.

Il vous suffit maintenant de coller l'URL de votre vidéo YouTube dans le widget de paragraphe pour intégrer votre vidéo.

widget d'intégration d'une vidéo youtube

Enfin, il existe un autre moyen d'intégrer du contenu YouTube sur votre site web.

Méthode iFrame YouTube

Pour utiliser la méthode iFrame, plus complexe, commencez par trouver la vidéo YouTube que vous souhaitez intégrer et cliquez sur l'icône Partager.

Dans l'écran suivant, choisissez l'option Embed.

bouton d'intégration d'une vidéo youtube

Copiez maintenant tout le code fourni dans la boîte.

bouton d'intégration d'une vidéo youtube

Dans l'éditeur de blocs de WordPress, cliquez sur l'icône Plus (+) et recherchez le widget "custom html" . Dans les résultats de la recherche, cliquez sur le bloc HTML personnalisé dans les options.

Ensuite, collez votre code d'intégration dans le bloc HTML personnalisé et cliquez sur Publier.

Lorsque vous prévisualisez votre page, elle ressemble à l'exemple ci-dessous.

Pour créer un widget YouTube dans la barre latérale de votre site à l'aide de cette méthode, ouvrez simplement votre page de widgets en vous rendant à nouveau dans Apparence " Widgets.

page de widgets wordpress

Comme précédemment, vous pouvez choisir entre une barre latérale et un panneau de pied de page.

Ensuite, cliquez sur l'icône plus (+) et ajoutez le widget HTML personnalisé dans votre barre latérale ou votre pied de page.

ajouter le widget html personnalisé

Enfin, collez le code d'intégration dans le widget pour intégrer la vidéo YouTube.

collez votre code d'intégration youtube

Faites maintenant glisser le widget dans la barre latérale de votre choix, collez le code d'intégration et cliquez sur Enregistrer.

Et voilà !

Vous pouvez ainsi créer des widgets YouTube pour votre site afin d'obtenir plus de vues, d'augmenter le nombre de vos abonnés ou même de faire participer les visiteurs de votre site web.

Comme vous pouvez le constater, YouTube Feed Pro facilite grandement l'intégration des widgets YouTube, même si vous ne connaissez pas encore WordPress.

Prêt à intégrer des widgets YouTube en toute simplicité ? Cliquez ici pour commencer à utiliser YouTube Feed Pro.

Vous voulez aussi booster vos vidéos Instagram ? Alors consultez ce guide complet sur la façon de créer des vidéos Instagram populaires.

Autres guides et tutoriels sur les médias sociaux

avatar de l'auteur
Stacey Corrin

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité et que tous les liens ne sont pas suivis. N'utilisez PAS de mots-clés dans le champ du nom. Engageons une conversation personnelle et constructive.