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 vidéo.

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

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 de 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 directement dans votre site 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. Même si vous êtes 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.

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.

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 :

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]

<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.

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

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

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

Pour vous donner un exemple concret, voici ce que à 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 devriez 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.

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 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. 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 :

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

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. [GRATUIT]

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.

C’est tout pour ce tutoriel. N’hésitez pas à nous poser des questions si vous en avez ou à partager l’article sur les réseaux sociaux.

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
4 Partages
Partagez2
Tweetez
Enregistrer2