Comment intégrer une vidéo Facebook dans WordPress

Publié: 2023-02-03


Voulez-vous intégrer une vidéo Facebook dans WordPress ?

Les vidéos que vous publiez sur Facebook constituent également un excellent contenu pour votre site Web. En intégrant un flux vidéo Facebook, vous pouvez garder votre site frais et intéressant tout en développant votre suivi sur Facebook.

Dans cet article, nous allons vous montrer un moyen simple d'intégrer des vidéos Facebook dans WordPress.

How to embed a Facebook video in WordPress

Pourquoi ajouter des vidéos Facebook dans WordPress ?

Les vidéos sont un excellent moyen de se connecter avec votre public et de le maintenir engagé. Cela est vrai, que vous utilisiez un blog personnel ou un site Web d'entreprise.

Cependant, les vidéos sont particulièrement puissantes si vous voulez gagner de l'argent en bloguant en ligne avec WordPress. En fait, 88% des personnes ont acheté un produit ou un service après avoir regardé une vidéo selon les dernières statistiques de blogs.

Créer des vidéos attrayantes et divertissantes prend du temps et des efforts, donc si vous publiez des vidéos sur Facebook, il est logique de les réutiliser sur votre site Web WordPress.

En liant votre site Web à votre compte Facebook, toutes les nouvelles vidéos que vous publiez sur Facebook apparaîtront automatiquement sur votre site Web. De cette façon, vous pouvez garder votre site Web frais avec très peu d'efforts quotidiens.

Les vidéos intégrées peuvent même aider à développer votre page Facebook. Si les visiteurs du site Web voient de nombreuses vidéos et listes de lecture intéressantes, ils voudront vous suivre sur Facebook. Cela peut vous procurer des abonnés supplémentaires et plus d'engagement.

Cela étant dit, voyons comment vous pouvez facilement intégrer une vidéo Facebook dans WordPress.

Installer un plugin vidéo Facebook dans WordPress

Le moyen le plus simple d'intégrer une vidéo Facebook dans WordPress consiste à utiliser le plugin Custom Facebook Feed Pro.

C'est le meilleur plugin de flux de médias sociaux et vous permet d'intégrer facilement des albums Facebook, des commentaires, des critiques, des publications communautaires, des vidéos et bien plus encore sur votre site Web WordPress.

A Facebook video feed, created using Smash Balloon

Dans ce guide, nous utiliserons la version pro de Smash Balloon car elle vous permet d'intégrer des vidéos dans WordPress, y compris des vidéos HD, 360 o et Facebook Live.

Smash Balloon Pro vous permet également d'afficher des photos dans un flux Facebook personnalisé et d'afficher le nombre total de likes, de partages, de commentaires et de réactions sous chaque publication. Cependant, si vous débutez et que vous avez un budget limité, il existe également une version gratuite que vous pouvez utiliser.

Tout d'abord, installez et activez le plugin Custom Facebook Feed Pro. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Lors de l'activation, rendez-vous sur Flux Facebook » Paramètres et entrez votre clé de licence dans le champ « Clé de licence ».

Adding your Smash Ballon license in WordPress

Vous trouverez ces informations sous votre compte sur le site Web de Smash Balloon.

Après avoir entré la clé, cliquez sur le bouton 'Activer'.

Connectez votre page ou groupe Facebook à WordPress

Le flux Facebook personnalisé de Smash Balloon vous permet d'intégrer des vidéos à partir de pages et de groupes Facebook. Vous pouvez même afficher les vidéos dans une fenêtre contextuelle lightbox afin que les gens puissent regarder la vidéo complète directement sur votre site Web WordPress.

La première étape consiste à connecter votre page ou groupe Facebook à WordPress, alors allez sur Flux Facebook » Tous les flux , puis cliquez sur « Ajouter nouveau ».

How to embed Facebook videos in WordPress

Smash Balloon vous permet d'afficher des publications de votre chronologie Facebook, des albums photo, des statuts Facebook, des événements, etc.

Puisque nous voulons intégrer des vidéos Facebook dans WordPress, vous devrez sélectionner « Vidéos », puis cliquer sur « Suivant ».

Creating a Facebook video feed using Smash Balloon

Maintenant, vous devez sélectionner la page ou le groupe Facebook d'où vous obtiendrez les vidéos.

Pour ce faire, cliquez sur "Ajouter un nouveau".

Choose a source for your Facebook video embeds

Ensuite, choisissez si vous souhaitez afficher les vidéos d'une page ou d'un groupe Facebook.

Une fois que vous avez fait cela, cliquez sur "Se connecter à Facebook".

How to connect Facebook to WordPress

Cela ouvre une fenêtre contextuelle dans laquelle vous pouvez vous connecter à votre compte Facebook et choisir les pages ou les groupes que vous souhaitez utiliser avec Smash Balloon.

Après cela, cliquez sur "Suivant".

Connecting Facebook accounts to WordPress

Désormais, Facebook affichera 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 Facebook, cliquez simplement sur pour désactiver l'un des commutateurs.

Sachez simplement que cela peut affecter les vidéos que vous pouvez intégrer sur votre blog ou site Web WordPress, nous vous recommandons donc de laisser tous les commutateurs activés.

Giving Smash Balloon access to your WordPress website

Lorsque vous êtes satisfait de la configuration des autorisations, cliquez sur "Terminé".

Après quelques instants, vous devriez voir un message confirmant que vous avez connecté votre site WordPress à Facebook.

Cela fait, vous êtes prêt à cliquer sur "OK".

Connecting Facebook pages and groups to WordPress

Smash Balloon vous renverra automatiquement au tableau de bord WordPress.

Comment intégrer des vidéos Facebook dans WordPress

À ce stade, vous verrez une fenêtre contextuelle avec le groupe ou la page Facebook que vous venez de lier à votre site Web. Sélectionnez simplement le bouton radio à côté de la page ou du groupe que vous souhaitez utiliser, puis cliquez sur le bouton "Ajouter".

Choosing a Facebook page or group to use with WordPress

Si vous avez accidentellement fermé la fenêtre contextuelle, ne vous inquiétez pas. Vous pouvez simplement actualiser la page pour rouvrir la fenêtre contextuelle.

Une fois que vous avez fait cela, WordPress vous ramènera automatiquement à la page Flux Facebook »Tous les flux . Comme avant, cliquez sur "Ajouter un nouveau", sélectionnez "Vidéos", puis cliquez sur le bouton "Suivant".

Maintenant, sélectionnez votre page ou groupe Facebook et cliquez sur "Suivant".

Selecting the Facebook page or group to use with WordPress

Sur cet écran, vous pouvez choisir le modèle que vous souhaitez utiliser pour le flux vidéo.

Tous ces modèles sont entièrement personnalisables afin que vous puissiez affiner la conception en fonction de la manière dont vous souhaitez afficher les vidéos Facebook sur votre site Web.

Nous utilisons le modèle "Par défaut", mais vous pouvez choisir le modèle de votre choix. Après avoir fait votre sélection, cliquez sur "Suivant".

Using the WordPress video template

Après cela, vous pouvez choisir d'afficher toutes les vidéos de votre page ou groupe Facebook ou uniquement les vidéos d'une liste de lecture spécifique.

Si vous choisissez "Afficher à partir d'une liste de lecture spécifique", vous devrez saisir l'URL de cette liste de lecture.

Adding a Facebook playlist to WordPress

Une fois que vous avez pris une décision, allez-y et cliquez sur le bouton "Suivant".

Smash Balloon va maintenant créer un flux basé sur votre source et le modèle que vous avez choisi. C'est un bon début, mais vous voudrez peut-être affiner la façon dont les vidéos apparaissent sur votre site.

Comment personnaliser vos vidéos Facebook intégrées

Le plugin Smash Balloon Custom Facebook Feed vous offre de nombreuses façons de personnaliser la façon dont les vidéos apparaissent sur votre site Web. Cela étant dit, cela vaut la peine de jeter un œil à ces paramètres.

Dans le tableau de bord WordPress, accédez à Flux Facebook » Tous les flux . Ici, trouvez le flux vidéo que vous venez de créer et cliquez sur le bouton "Modifier" à côté de celui-ci, qui ressemble à un petit crayon.

Customizing the Facebook video feed for WordPress

Cela ouvre l'éditeur de flux Smash Balloon, qui affiche un aperçu de votre flux vidéo Facebook à droite.

Sur le côté gauche, vous verrez tous les différents paramètres que vous pouvez utiliser pour personnaliser la façon dont ces vidéos apparaissent sur votre site Web WordPress. La plupart de ces paramètres sont explicites, mais nous couvrirons rapidement les principaux domaines.

The Smash Balloon video feed editor

Si vous souhaitez modifier le modèle, cliquez sur "Modèle".

Ensuite, sélectionnez le bouton "Modifier".

Changing the Facebook video feed layout

Cela ouvre une fenêtre contextuelle montrant tous les différents modèles que vous pouvez utiliser pour votre flux vidéo.

Sélectionnez simplement le design que vous souhaitez utiliser à la place, puis cliquez sur "Mettre à jour".

Changing the video feed layout

Le paramètre suivant est "Type de flux", qui vous permet d'afficher différents contenus dans votre flux. Par exemple, vous pouvez décider d'afficher des photos, des albums ou des événements au lieu de vidéos.

Puisque nous voulons intégrer des vidéos Facebook, vous voudrez généralement ignorer cette zone.

Ensuite, cliquez sur "Mise en page du flux".

Embedding Facebook videos in your WordPress website

Ici, vous pouvez choisir entre différentes dispositions, telles que la maçonnerie et la grille, et modifier la hauteur d'alimentation.

Au fur et à mesure que vous apportez des modifications, l'aperçu se met à jour automatiquement afin que vous puissiez essayer différents paramètres pour voir ce qui semble le mieux.

Changing the social media feed layout

Par défaut, Smash Balloon affichera le même nombre de vidéos sur les ordinateurs de bureau et les appareils mobiles tels que les smartphones.

Vous pouvez prévisualiser l'apparence de vos vidéos sur les ordinateurs de bureau, les tablettes et les smartphones à l'aide de la rangée de boutons dans le coin supérieur droit.

Testing the video feed on smartphones and tablets

Les appareils mobiles ont généralement des écrans plus petits et peuvent avoir du mal à traiter de nombreuses vidéos volumineuses et haute résolution. Les visiteurs peuvent également utiliser leurs données mobiles plutôt que le Wi-Fi gratuit.

Cela étant dit, vous souhaiterez peut-être afficher moins de vidéos sur les smartphones et les tablettes. Pour ce faire, saisissez simplement un numéro différent dans le champ "Mobile" sous "Nombre de publications".

Creating a mobile-responsive Facebook video feed

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

Cependant, après avoir testé la version mobile de votre site WordPress, vous n'êtes peut-être pas satisfait de l'apparence des colonnes sur les tablettes et les smartphones.

Vous pouvez modifier le nombre de colonnes utilisées par Smash Balloon sur les tablettes, les mobiles et les ordinateurs de bureau à l'aide des paramètres "Colonnes".

Changing the columns in a mobile responsive layout

La page de paramètres suivante est "Schéma de couleurs".

Smash Balloon utilise par défaut les couleurs héritées de votre thème WordPress, mais sur cet écran, vous pouvez à la place passer à un jeu de couleurs « clair » ou « foncé ».

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, modifier la couleur du texte dans WordPress, etc.

Adding a custom color scheme to a social media feed

Smash Balloon peut ajouter un en-tête à votre flux, qui est votre photo de profil Facebook et le nom de la page ou du groupe. Cela permet aux visiteurs de savoir d'où proviennent les vidéos intégrées et où ils peuvent trouver ce contenu sur Facebook.

Pour ajouter cette section, cliquez sur 'En-tête' dans le menu de gauche.

Changing the Smash Balloon header settings

Vous pouvez ensuite cliquer sur le bouton "Activer".

Après avoir ajouté un en-tête, vous pouvez modifier l'apparence de cette zone, y compris masquer ou ajouter votre photo de profil Facebook, modifier la taille du texte bio, et plus encore.

Removing the Facebook header from a WordPress embed

Si vous souhaitez supprimer complètement l'en-tête, cliquez sur pour désactiver la bascule "Activer".

Par défaut, Smash Balloon affiche le titre de chaque vidéo. Si vous souhaitez masquer le titre, sélectionnez "Messages" dans le menu principal de l'éditeur Smash Balloon.

Ensuite, allez-y et cliquez sur "Style de publication".

Changing the video post style

Sur cet écran, vous pouvez masquer les titres des vidéos en cliquant sur le curseur "Afficher le titre de la vidéo".

Cela peut être utile si vous n'avez pas ajouté de titres à toutes vos vidéos ou si vos titres n'ont pas de sens en dehors de Facebook.

Hiding the Facebook video titles

Sur cet écran, vous pouvez également masquer ou afficher les descriptions vidéo. Par exemple, vous pouvez utiliser ces descriptions pour fournir des informations supplémentaires sur la vidéo.

Pour ajouter la description, cliquez simplement pour activer le commutateur "Afficher la description de la vidéo".

Par défaut, Smash Balloon n'ajoute pas le bouton "J'aime" de Facebook à votre flux vidéo. Si les visiteurs aiment vos vidéos intégrées, ils voudront peut-être vous suivre sur Facebook.

Cela étant dit, vous pouvez ajouter un bouton "J'aime" au flux en sélectionnant "J'aime la boîte" dans le menu de gauche de l'éditeur.

Après cela, cliquez simplement sur le bouton "Activer" pour qu'il devienne bleu.

Adding a Facebook like button to WordPress

Smash Balloon ajoute ce bouton sous votre flux vidéo, mais vous pouvez modifier cela en ouvrant le menu déroulant "Position" et en choisissant "Haut".

Sur cet écran, vous pouvez également modifier l'apparence de la section "J'aime", notamment en modifiant sa largeur, en indiquant combien de personnes vous suivent sur Facebook, en ajoutant un appel à l'action personnalisé, etc.

How to customize the Facebook like button in WordPress

Lorsque vous êtes satisfait de l'apparence du bouton, vous pouvez passer à la page de paramètres suivante en sélectionnant "Charger plus de bouton".

Le bouton Charger plus encourage les visiteurs à faire défiler une plus grande partie de votre flux vidéo, donc Smash Balloon l'ajoute par défaut à votre flux Facebook intégré.

Adding a Load More button to WordPress

Puisqu'il s'agit d'un bouton si important, vous pouvez personnaliser ce bouton en modifiant sa couleur d'arrière-plan, son état de survol, son étiquette, etc.

Une autre option consiste à supprimer complètement le bouton en cliquant sur le bouton "Activer". Par exemple, vous pouvez supprimer ce bouton, puis encourager les visiteurs à consulter votre page Facebook afin de voir plus de vos vidéos.

Removing the Load More button from WordPress

Par défaut, Smash Balloon permet aux visiteurs de regarder vos vidéos Facebook sans quitter votre site WordPress.

Ils peuvent simplement cliquer sur n'importe quelle vignette vidéo pour l'ouvrir dans une lightbox, comme vous pouvez le voir dans l'image suivante

Smash Balloon's lightbox popup feature

Les visiteurs peuvent faire défiler les vidéos de votre flux à l'aide des flèches.

S'ils veulent aimer une photo, laisser un commentaire ou partager la vidéo sur leur page, ils peuvent cliquer sur le lien "Voir sur Facebook".

A 'View on Facebook' link created by Smash Balloon

Il existe plusieurs façons de personnaliser la lightbox par défaut de Smash Balloon.

Pour voir vos options, cliquez sur "Lightbox" dans le menu de gauche.

 Customizing the lightbox popup using Smash Balloon

Ici, vous pouvez modifier la couleur du texte, des liens et des couleurs d'arrière-plan de la lightbox.

La fonction lightbox permet aux visiteurs de regarder vos vidéos dans une fenêtre contextuelle. Si vous préférez, vous pouvez désactiver la visionneuse afin que toutes vos vidéos soient lues sous forme de petites vignettes, intégrées dans le contenu de la page.

De cette façon, vous pouvez encourager les gens à visiter votre page Facebook, pour voir la vidéo en taille réelle. Pour désactiver la lightbox, cliquez simplement sur la bascule "Activer" pour la faire passer du bleu au gris.

Disabling the lightbox popup feature

Lorsque vous êtes satisfait de l'apparence du flux vidéo, n'oubliez pas de cliquer sur "Enregistrer".

Vous êtes maintenant prêt à intégrer le flux Smash Balloon dans votre site Web.

Comment ajouter des vidéos Facebook à WordPress

Avec Smash Balloon, vous pouvez ajouter le flux vidéo à votre site Web WordPress à l'aide d'un bloc, d'un widget ou d'un shortcode.

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

Pour obtenir ce code, accédez à Flux Facebook » Tous les flux , puis regardez la partie feed="" du shortcode. Vous devrez ajouter ce code au bloc ou au widget, alors notez-le.

Dans l'image suivante, nous devrons utiliser feed="6"

Getting the code for a Facebook video feed

Si vous souhaitez intégrer votre flux Facebook dans une page ou une publication, nous vous recommandons d'utiliser le bloc Flux Facebook personnalisé.

Ouvrez simplement la page ou publiez où vous souhaitez intégrer vos vidéos Facebook. Ensuite, cliquez sur l'icône "+" pour ajouter un nouveau bloc et commencez à taper "Flux Facebook personnalisé".

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

The Custom Facebook Feed WordPress block

Le bloc affichera l'un de vos flux Smash Balloon par défaut. Si vous souhaitez utiliser un flux vidéo différent à la place, recherchez "Paramètres de code court" dans le menu de droite.

Ici, ajoutez simplement le code feed="" , puis cliquez sur "Appliquer les modifications".

Adding a video feed to WordPress using code

Le bloc affichera maintenant les vidéos de votre page ou groupe Facebook. Il vous suffit de publier ou de mettre à jour la page pour diffuser le flux vidéo en direct sur votre site Web.

Une autre option consiste à ajouter le flux à n'importe quelle zone prête pour les widgets, telle que la barre latérale ou une section similaire. Cela permet aux visiteurs de regarder vos vidéos Facebook depuis n'importe quelle page de votre site.

Allez simplement dans Apparence » Widgets puis cliquez sur le bouton bleu '+'.

Adding videos to Facebook using a widget

Après cela, recherchez le widget "Flux Facebook personnalisé".

Ensuite, faites-le simplement glisser sur la zone où vous souhaitez afficher le flux vidéo.

Embedding Facebook videos using a widget

Le widget affichera automatiquement l'un de vos flux Smash Balloon.

Pour afficher un flux différent à la place, saisissez ou collez le code du flux dans la zone "Paramètres du code court", puis cliquez sur "Appliquer les modifications".

Adding a Facebook video feed to WordPress using shortcode

Vous pouvez maintenant faire vivre le widget en cliquant sur le bouton 'Mettre à jour'. Pour plus d'informations, veuillez consulter notre guide étape par étape sur la façon d'ajouter et d'utiliser des widgets dans WordPress.

Enfin, vous pouvez intégrer des vidéos sur n'importe quelle page, publication ou zone prête pour les widgets à l'aide d'un code court.

Allez simplement sur Facebook Feed » All Feeds et copiez le code dans la colonne « Shortcode ». Vous pouvez maintenant ajouter ce code à n'importe quel bloc Shortcode.

Pour obtenir de l'aide pour placer le shortcode, veuillez consulter notre guide sur la façon d'ajouter un shortcode.

Ajouter une vidéo Facebook spécifique dans WordPress

Parfois, vous souhaiterez peut-être intégrer une vidéo Facebook spécifique dans une page ou une publication. Par exemple, vous pourriez avoir une vidéo Facebook qui parle des mêmes sujets que votre dernier blog, ou une vidéo promotionnelle montrant le produit que vous venez de lancer sur votre boutique en ligne.

Pour intégrer une vidéo spécifique, vous devrez acheter et installer l'extension Featured Posts car elle vous permet d'afficher une publication ou un événement particulier à l'aide de son ID.

Pour commencer, rendez-vous sur Flux Facebook » Extensions .

Ici, trouvez l'extension "Articles en vedette" et cliquez sur son bouton "Ajouter".

How to install the Featured Posts WordPress extension

Cela ouvrira le site Web Smash Balloon dans un nouvel onglet, avec des instructions sur la façon d'acheter l'extension.

Une fois que vous avez l'extension, vous pouvez l'installer exactement de la même manière que vous installez un plugin. Si vous avez besoin d'aide, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.

Après avoir activé le plug-in, accédez à Flux Facebook » Tous les flux et cliquez sur « Ajouter un nouveau ».

Sous "Types de flux avancés", sélectionnez "Message en vedette unique", puis cliquez sur "Suivant".

How to show a specific Facebook video in WordPress

Vous pouvez maintenant choisir la page ou le groupe que vous souhaitez utiliser comme source en suivant le même processus décrit ci-dessus.

Sur la page suivante, vous devrez entrer l'ID de la vidéo que vous souhaitez intégrer.

Adding a Facebook post URL or ID to WordPress

Pour obtenir cet identifiant, visitez Facebook dans un nouvel onglet, puis ouvrez la vidéo que vous souhaitez intégrer.

Vous pouvez maintenant continuer et copier l'URL.

How to get the post ID for a Facebook video

Après cela, publiez simplement l'URL dans votre tableau de bord WordPress et cliquez sur "Suivant".

Une fois que vous avez fait cela, vous pouvez styliser la vidéo, puis l'ajouter à votre site en suivant le même processus décrit ci-dessus.

Nous espérons que cet article vous a montré comment intégrer une vidéo Facebook dans WordPress. Vous voudrez peut-être consulter notre guide sur la création d'une newsletter par e-mail et notre sélection d'experts des meilleurs plugins de galerie vidéo YouTube.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.