Tutoriels

Comment ajouter des boutons de partage en superposition sur des vidéos YouTube dans WordPress

Les vidéos sont l’un des meilleurs moyens de renforcer l’engagement des utilisateurs. Récemment, un de nos utilisateurs nous a demandé comment créer des superpositions de boutons de partage sur des vidéos similaires au site populaire UpWorthy. Dans cet article, nous allons vous montrer comment ajouter des boutons de partage en superposition sur des vidéos YouTube dans WordPress..

Exemple de ce à quoi cela ressemblerait:

Ajout de boutons de partage en superposition sur des vidéos YouTube

Cela pouvait être fait de plusieurs manières. Dans la plupart des cas, vous devez coller un morceau de code HTML chaque fois que vous ajoutez une vidéo. Au lieu de cela, nous avons décidé de créer un shortcode qui automatiserait cet effet de superposition.

Copiez et collez simplement le code suivant dans un plugin spécifique au site ou dans le fichier functions.php de votre thème:

 /// La fonction wpb_yt_buttons ($ atts) // récupère l'ID de la vidéo à partir de l'extrait shortcode (shortcode_atts (array ('video' => ", $ atts))); // Affiche la vidéo $ string = ' '; // Ajouter le bouton de partage Facebook $ string. =' Facebook
'; // Ajouter le bouton Tweet $ string. = 'Tweet
'; // Ferme le conteneur vidéo $ string. = ''; // retourne la sortie return $ string;  // Ajouter le code court add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Ce code crée un shortcode qui ajoute automatiquement des liens de partage Twitter et Facebook à vos vidéos. Ces boutons ne sont visibles que lorsque l'utilisateur déplace sa souris sur la vidéo. Vous pouvez l'utiliser pour ajouter tout autre canal de média social.

Pour utiliser ce shortcode, il vous suffit d'ajouter l'ID de la vidéo YouTube dans le shortcode comme ceci:

[wpb-yt video = "qzOOy1tWBCg"]

Vous pouvez obtenir l'ID de la vidéo YouTube à partir de la chaîne d'URL. Comme ça:

Désormais, lorsque vous ajoutez une vidéo, vous pourrez voir votre vidéo YouTube et des liens en texte brut pour partager la vidéo sur Facebook ou Twitter. Vous remarquerez que ces liens ne sont pas du tout stylés.

Nous allons donc styler ces liens pour créer des boutons, donc cela a l'air un peu plus joli. Nous allons également masquer ces boutons et les afficher uniquement lorsqu'un utilisateur prend la souris sur le conteneur vidéo. Pour ce faire, ajoutez le CSS suivant à la feuille de style de votre thème enfant.

 # share-video-overlay position: relative; à droite: 40px; en haut: -190px; type de style de liste: aucun; bloc de visualisation; opacité: 0; filtre: alpha (opacité = 0); -webkit-transition: opacité .4s, top .25s; -moz-transition: opacité 0,4, haut 0,25; -o-transition: opacité .4s, top .25s; transition: opacité 0,4, top 0,25; z-index: 500;  # partage-vidéo-superposition: survol opacité: 1; filtre: alpha (opacité = 100);  .share-video-overlay li marge: 5px 0px 5px 0px;  #facebook color: #ffffff; couleur de fond: # 3e5ea1; largeur: 70px; rembourrage: 5px;  .facebook a: lien, .facebook a: actif, .facebook a: visité color: #fff; texte-décoration: aucun;  #twitter background-color: # 00a6d4; largeur: 70px; rembourrage: 5px;  .twitter a, .twitter a: lien, .twitter a: actif, .twitter a: visité, .twitter a: hover color: #FFF; texte-décoration: aucun;

C'est tout. Vous devriez maintenant avoir des boutons de partage superposés sur vos vidéos YouTube dans WordPress.

Ajout de boutons de partage en superposition pour les listes de lecture vidéo YouTube dans WordPress

Après avoir publié cet article, de nombreux lecteurs ont demandé comment ce code pouvait être modifié pour fonctionner aussi bien pour les listes de lecture YouTube que pour les vidéos. Si vous intégrez des vidéos YouTube ainsi que des listes de lecture sur votre site WordPress, vous devez utiliser ce code à la place..

 / * * Boutons de superposition Partager de WPBeginner * sur les vidéos et les listes de lecture YouTube * / function wpb_yt_buttons ($ atts) // Récupère les ID de la vidéo et de la liste de lecture à partir de l'extrait de shortcode (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Vérifie si un identifiant de playlist est fourni avec un shortcode si (! $ Playlist == "): // Affiche la playlist vidéo $ string = ''; // Ajoute le bouton Facebook $ string. = 'Facebook
'; // Ajouter le bouton Twitter $ string. = 'Tweet
'; // Ferme le conteneur vidéo $ string. = ''; // Si aucun identifiant de playlist n'est fourni, sinon: // Affiche la vidéo $ string. = ''; // Ajouter le bouton Facebook $ string. = ' Facebook
'; // Ajouter le bouton Twitter $ string. = 'Tweet
'; // Ferme le conteneur vidéo $ string. = ''; fin si; // retourne la sortie return $ string;  // Ajouter le code court add_shortcode ('wpb-yt', 'wpb_yt_buttons');

En utilisant le code ci-dessus, vous pouvez également ajouter une liste de lecture avec des boutons de partage superposés. Pour afficher votre liste de lecture, vous devez fournir l'identifiant de la vidéo et celui de la playlist dans le code court, comme suit:

[wpb-yt video = "exP9N3rIfV0" playlist = "UUhA624rCabHAmd6lpkLOw7A"]

Vous pouvez obtenir vos ID de vidéo et de playlist en visitant la liste de lecture sur YouTube et en copiant l'ID de liste à partir de l'URL, comme ceci:

Ajout de liens post WordPress dans le bouton de partage superposé sur les vidéos YouTube

Après la publication de cet article, certains de nos utilisateurs ont demandé à ce que les boutons de partage permettent de partager le lien de leur publication WordPress au lieu du lien vidéo YouTube. Pour ce faire, vous devez remplacer l'URL de la vidéo dans les boutons de partage par le lien permanent de la publication WordPress. Utilisez ce code dans votre plug-in functions.php ou spécifique au site:

 /// La fonction wpb_yt_buttons ($ atts) // récupère l'ID de la vidéo à partir de l'extrait shortcode (shortcode_atts (array ('video' => ", $ atts))); // Affiche la vidéo $ string = ' '; // Obtention du permalien de publication et encodage de l'URL $ permalink_encoded = urlencode (get_permalink ()); // Ajout du bouton de partage Facebook $ string. =' Facebook
'; // Ajouter le bouton Tweet $ string. = 'Tweet
'; // Ferme le conteneur vidéo $ string. = ''; // retourne la sortie return $ string;  // Ajouter le code court add_shortcode ('wpb-yt', 'wpb_yt_buttons');

N'hésitez pas à modifier le CSS ou les extraits de code court pour répondre à vos besoins. Pour optimiser davantage vos vidéos, vous pouvez rendre vos vidéos YouTube réactives à l'aide du plug-in FitVids jQuery. Vous pouvez également désactiver les vidéos associées qui apparaissent à la fin de la vidéo. ou même créer des images en vedette à partir de vignettes vidéo YouTube.

Nous espérons que cet article vous a aidé à ajouter des boutons de partage personnalisés en tant que superposition de vidéos YouTube dans WordPress. Dites-nous quels canaux de médias sociaux vous envisagez d'ajouter à vos vidéos en laissant un commentaire ci-dessous.

« Comment ajouter des questions de sécurité à l'écran de connexion WordPress Comment ajouter un élément de menu Shortlink dans la barre d'administration WordPress »