skip to Main Content

Comment intégrer une vidéo Facebook sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Saviez-vous que les vidéos Facebook génèrent plus de 8 milliards de pages vues chaque jour ?

Et que 8 milliards est le double de ce nombre il y a un an ?

Alors que le mérite de ce succès massif peut être attribué à la lecture automatique des vidéos et à une méthodologie favorable de comptage de vues, le fait demeure que Facebook vidéo est aujourd’hui un acteur majeur pour la consommation des vidéos.

Ce tutoriel vous permettra d’exploiter les vidéos Facebook en l’intégrant dans vos articles et pages WordPress. Je vais vous montrer comment vous pouvez facilement intégrer des vidéos Facebook à travers l’éditeur de WordPress. Je vais en plus vous donner des informations sur la façon dont vous pouvez modifier certains détails d’affichage des vidéos pour activer la lecture automatique par exemple.

Et enfin, si vous ne voulez pas vous salir les mains avec la première méthode, je vais aussi vous montrer la méthode la plus simple pour intégrer des vidéos via un iframe.

Mais avant, découvrons ensemble Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog.

Ensuite, revenons vers ce pourquoi nous sommes là.

Les avantages de l’Intégration Facebook Vidéos

Alors que YouTube est susceptible de rester le roi de la vidéo pour l’avenir, je vois certains avantages à l’intégration de vidéos Facebook. Par exemple, vous pouvez …

  • Profitez du Live Streaming – vous avez peut-être vu la nouvelle fonctionnalité populaire de streaming en direct que Facebook a récemment lancé. Lorsque vous incorporez des vidéos avec cette méthode, vous serez également en mesure d’intégrer le streaming en direct de Facebook sur votre site web WordPress.
  • Promotion croisée de votre page Facebook – l’intégration de vidéos Facebook fournit une autre méthode pour promouvoir votre page Facebook sur votre site web. Même si vous avez déjà inclus des boutons « Likes » ou de partages, l’intégration des vidéos directement à partir de Facebook fournit une autre connexion. Bien sûr, si vous essayer de promouvoir une chaîne YouTube, vous aurez besoin de choisir l’endroit où se situent vos priorités.
  • Organiser le contenu vidéo à partir d’autres pages Facebook – si vous voyez une vidéo sur Facebook que vous souhaitez inclure dans un article ou une page, l’intégration est à peu près la seule option, sauf si vous souhaitez accéder directement à la page Facebook.

Comment intégrer « Facebook Video » Avec le SDK JavaScript

Ce processus de mise en place « Facebook vidéo » est assez indolore. Mais, il ne nécessite l’ajout d’un petit extrait de code à votre thème ou sur un plugin que vous aurez conçu. Cet extrait de code est nécessaire car il vous permet de faire des choses astucieuses comme l’ajout de la lecture automatique à vos vidéos intégrées.

Voici les 10 meilleurs plugins WordPress à utiliser pour gérer la publicité

Donc, pour commencer, vous devez ajouter le SDK JavaScript de Facebook l’en-tête de votre thème. C’est essentiellement un nom de fantaisie pour ce morceau de code :

<!-- Load Facebook SDK for JavaScript -->
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

Pour ceux  qui utilisent des thèmes WordPress sans option d’injection de contenu, vous aurez besoin d’accéder au fichier header.php de votre thème et d’ajouter juste après la balise <body> le code suivant :

ajouter-une-code-sur-le-header-dun-theme

Idéalement, vous devez utiliser un thème enfant et ajouter cet extrait de code à votre thème enfant header.php plutôt qu’au parent. 

Comment intégrer les vidéos Facebook sur WordPress ? Découvrez-le également en cliquant sur ce lien

Après avoir ajouté ce code une fois, vous avez terminé avec ce dernier. Vous pouvez intégrer des vidéos partout où vous voulez en utilisant un code d’intégration standard.

Comment intégrer des Vidéos Facebook

Pour générer ce second bit de code, vous aurez besoin de trouver l’URL réelle à la vidéo que vous souhaitez partager, puis ajouter cette url à cet extrait de code :

<div class="fb-video" data-href="{your-video-post-url}" 
 data-allowfullscreen="true" data-width="500"></div>

Vous pouvez également modifier la largeur de la vidéo en pixels en modifiant l’option « data-width » pour un nombre différent.

Lire aussi notre tutoriel sur Comment optimiser une base de données en un clic sur WordPress

Il y a un plusieurs façons d’obtenir cette URL. Si vous êtes à la recherche d’un article vidéo dans le flux de votre page, vous pouvez simplement faire un clic droit sur l’horodatage et copiez l’URL:

integration-de-video-facebook

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Si vous cherchez le lien en mode plein écran, vous pouvez trouver l’URL de la même manière suivante :

recuperer-le-lien-dune-video-en-plein-ecran

Pour vous donner un exemple concret, voici ce à quoi ressemblerait le code intégré après avoir ajouté l’URL. Nous allons définir une largeur de la vidéo à 550 px :

<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/" 
 data-allowfullscreen="true" data-width="550"></div>

Il suffit de coller ce code dans l’onglet texte de l’éditeur WordPress pour intégrer la vidéo. Vous pouvez également ajouter ce code à votre barre latérale ou ailleurs qui prendra en charge ce code :

ajouter-un-code-sur-lediteur-visuel-de-wordpress

Une fois que vous publiez l’article, vous devrez voir la vidéo intégrée :

apercu-dune-video-integre-de-facebook-sur-wordpress

Comment activer la lecture automatique

Un des grands avantages à l’intégration des vidéos Facebook de cette façon est la possibilité d’activer la lecture automatique « Autoplay » (en sourdine) tout comme sur Facebook.

Consultez aussi notre article sur Les 15 meilleurs plugins WordPress de partage social

Si vous souhaitez ajouter la lecture automatique sur les vidéos Facebook, vous aurez juste besoin d’ajouter un attribut à votre code d’intégration.

Voici l’attribut que vous devez ajouter :

data-autoplay=”true”

Dans le code intégré complet, ça ressemblera à ceci :

<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/"data-allowfullscreen="true" data-width="550" data-autoplay="true"></div>

Une fois que vous faites ce changement, vos vidéos devraient jouer automatiquement sur la page ou l’article en question.

Comment intégrer des vidéos Facebook avec iFrames

Si vous ne voulez pas vous creuser la tête, Facebook a également ajouté l’intégration par « iframe ». Cette fonction est à peu près la même chose que sur YouTube. Seulement, vous devez être conscient que vous ne pourra pas activer la lecture automatique sur Facebook.

Découvrez nos 10 plugins WordPress pour améliorer la promotion de vos produits

Ainsi, alors qu’il est plus simple d’ajouter des vidéos de cette façon, cette méthode ne propose pas autant de fonctionnalités que celle qui précède.

Pour trouver le code d’intégration, vous devez d’abord cliquer sur la petite flèche sur le coin supérieur droit d’une publication vidéo :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

integration-de-contenu-video-facebook

Ensuite, sélectionnez l’option « Intégration » ou « embed » (Mon facebook est en anglais).

Une nouvelle fenêtre s’ouvrira pour vous permettre de copier le code du lecteur qui proposera la vidéo.

code-integre-facebook

Il suffit de copier ce code et de le coller dans l’onglet texte de l’éditeur WordPress :

coller-un-code-integrable-sur-facebook

Lorsque vous publiez la vidéo, vous devriez la voir s’afficher exactement de la même façon que celle de l’exemple qui précède.

Découvrez aussi quelques plugins WordPress premium supplémentaires 

Vous pouvez utiliser d’autres plugins pour afficher des comptes à rebours sur votre blog WordPress. Dans ce qui suit, je vous en propose quelques uns.

1. Share, Print and PDF Products for WooCommerce

Ce plugin WordPress vous aidera non seulement à offrir la possibilité à vos visiteurs de visualiser directement sur votre site web tout PDF mis à leur disposition, mais il pourra également les aider à partager facilement ce dernier.

Il vous offre de nombreuses fonctionnalités telles que l’impression, le téléchargement, le zoom, le partage, et bien plus encore. Il s’agit d’un plugin WordPress dont la mise en page est totalement responsive, enfin de permettre à tout utilisateur d’y avoir accès sur son périphérique mobile sans trop de contraintes.

Lisez aussi 8 plugins WordPress pour afficher les icônes de partage sur votre blog

Il vous propose également de nombreuses options de personnalisation pour l’adapter à votre thème WordPress. Vous aurez ainsi la possibilité de modifier la couleur, d’utiliser la qualité d’image Retina, etc…

Télécharger | Démo | Hébergement Web

2. Instagram Testimonials

Le plugin WordPress premium Instagram Testimonials vous permet d’afficher les publications Instagram de vos clients sous forme de témoignages sur votre site Web. Ne loupez pas cette nouvelle tendance et utilisez les réseaux sociaux pour susciter de la confiance chez vos clients. Si ces derniers apprécient vraiment vos services et les partagent sur Instagram, pourquoi ne pas s’en vanter ?

Affichez donc leurs impressions positives sous forme de témoignages sur votre site Web avec un design reconnaissable. Ajoutez des autocollants et rendez-les plus attirants, mettez en surbrillance les phrases pour qu’elles attirent le regard, définissez le classement et vous verrez à quel point ce plugin WordPress est très attirant.

Découvrez Comment supprimer la chaîne de caractères v=xxx des URLs WordPress

Télécharger | Démo | Hébergement Web

3. YouTube Plugin

Préparez de la meilleure façon possible votre site Web à la diffusion des vidéos YouTube . Yottie -son petit nom- est un puissant plugin WordPress dédié à la gestion et à l’intégration des vidéos YouTube sur votre site web ou blog. 

Il permet de sélectionner les chaînes souhaitées et même des vidéos uniques pour créer votre propre liste de lecture directement sur votre blog. Il possède plus de 100 paramètres ajustables, 4 palettes de couleurs et prend en charge près de 16 langues. En bref, vous aurez des tonnes de choses à personnaliser.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Découvrez Comment enregistrer et optimiser les images de votre blog WordPress

Cette galerie vidéo WordPress dédiée à YouTube est entièrement responsive afin que vous puissiez couvrir un large public avec tout type de périphérique de navigation.

Télécharger Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voila ! C’est tout pour ce tutoriel. J’espère que cette présentation vous aidera à comprendre comment intégrer une vidéo Facebook sur WordPress. Si vous avez des questions, n’hésitez pas à nous les poser.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

N’hésitez pas à partager cet article avec vos amis sur vos réseaux sociaux préférés.  Mais, en attendant, faites-nous part de vos commentaires et suggestions dans la section dédiée.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
3 Partages
Partagez1
Tweetez
Enregistrer2