Les vidéos sont l'un des meilleurs moyens d'augmenter l'engagement des utilisateurs. Récemment, l'un de nos utilisateurs nous a interrogés sur un moyen de créer des superpositions de boutons de partage sur les vidéos, similaires au site populaire UpWorthy. Dans cet article, nous vous montrerons comment ajouter des boutons de partage en superposition sur les vidéos YouTube dans WordPress.
Exemple de ce à quoi cela ressemblerait :
Ajout de boutons de partage en superposition sur les vidéos YouTube
Il existait plusieurs façons de procéder. La plupart des méthodes nécessiteraient de coller des bouts 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 :
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
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 passe sa souris sur la vidéo. Vous pouvez l'utiliser pour ajouter n'importe quel autre canal de médias sociaux également.
Pour utiliser ce shortcode, il vous suffira 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 ceci :
Maintenant, lorsque vous ajouterez une vidéo, vous pourrez voir votre vidéo YouTube et des liens texte brut pour partager la vidéo sur Facebook ou Twitter. Vous remarquerez que ces liens ne sont pas du tout stylisés.
Alors stylisons ces liens pour créer des boutons, pour que cela soit un peu plus joli. Nous allons également masquer ces boutons et les faire apparaître uniquement lorsqu'un utilisateur passe sa 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;
right: 40px;
top: -190px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
C'est tout. Vous devriez maintenant avoir des boutons de partage superposés à vos vidéos YouTube dans WordPress.
Ajout de boutons de partage en superposition pour les playlists YouTube dans WordPress
Après la publication de cet article, plusieurs de nos lecteurs nous ont demandé comment ce code pouvait être modifié pour fonctionner également pour les playlists YouTube ainsi que pour les vidéos. Si vous intégrez des vidéos YouTube ainsi que des playlists sur votre site WordPress, vous devriez utiliser ce code à la place.
/*
* WPBeginner's Share Overlay Buttons
* on YouTube Videos and Playlists
*/
function wpb_yt_buttons($atts) {
// Get the video and playlist ids from shortcode
extract( shortcode_atts( array(
'video' => '',
'playlist' => '',
), $atts ) );
// Check to see if a playlist id is provided with shortcode
if (!$playlist == '' ) :
// Display video playlist
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '?list=' . $playlist . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '" target="_blank">Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// If no playlist ID is provided
else :
//Display video
$string .= '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Facebook button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank">
Facebook</a></li>';
// Add Twitter button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
endif;
// Return output
return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
En utilisant le code ci-dessus, vous pouvez également ajouter une playlist avec des boutons de partage superposés. Pour afficher votre playlist, vous devrez fournir l'ID de la vidéo et l'ID de la playlist dans le shortcode comme ceci :
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Vous pouvez obtenir vos identifiants de vidéo et de playlist en visitant la playlist sur YouTube et en copiant l'ID de la liste depuis l'URL, comme ceci :
Ajout du lien d'un article WordPress dans la superposition du bouton de partage sur les vidéos YouTube
Après la publication de cet article, certains de nos utilisateurs ont demandé qu'ils aimeraient que les boutons de partage partagent le lien de leur article WordPress au lieu du lien de la vidéo YouTube. Pour ce faire, vous devez remplacer l'URL de la vidéo dans les boutons de partage par le permalien de l'article WordPress. Utilisez ce code dans votre fichier functions.php ou votre plugin spécifique au site :
/// WPBeginner's YouTube Share Overlay Buttons
function wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
'video' => ''
), $atts ) );
// Display video
$string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Get post permalink and encode URL
$permalink_encoded = urlencode(get_permalink());
// Add Facebook share button
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u='. $permalink_encoded .'" target="_blank">
Facebook</a></li>';
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
N'hésitez pas à modifier les extraits CSS ou de shortcode pour répondre à vos besoins. Pour optimiser davantage vos vidéos, vous pouvez rendre vos vidéos YouTube responsives en utilisant le plugin jQuery FitVids. 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 mises en avant à partir des miniatures de vidéos YouTube.
Nous espérons que cet article vous a aidé à ajouter des boutons de partage personnalisés en superposition sur les vidéos YouTube dans WordPress. Faites-nous savoir quels réseaux sociaux vous prévoyez d'ajouter à vos vidéos en laissant un commentaire ci-dessous.
Tracy
Étant donné que cela fait six ans, je ne m'attends pas vraiment à une réponse, mais sur le dernier shortcode, vous dites de mettre l'URL de WordPress à la place de YouTube, mais vous ne dites pas quel est ce code ni où le mettre. Pouvez-vous s'il vous plaît garder à l'esprit que les grands débutants ne sauront pas comment faire cela ?
Support WPBeginner
Nous nous excusons pour toute confusion, nous nous efforcerons d'améliorer notre formulation à l'avenir pour rendre cela plus clair.
Admin
Craig
« La plupart des méthodes vous obligeraient à coller des extraits de code HTML chaque fois que vous ajoutez une vidéo »
J'aimerais apprendre cette méthode... comment fait-on ?
Merci
Martin Dekker
Je cherche une image fixe différente d'une vidéo YouTube que j'ai sur mon site. Celle que le propriétaire de la vidéo a, je ne l'aime pas et j'ai entendu dire que l'on peut choisir une image de la chronologie de la vidéo pour qu'elle devienne l'image fixe une fois la vidéo terminée. Comme ce n'est pas ma vidéo, j'ai besoin de pouvoir le faire dans le code d'intégration iframe.
Est-ce possible et si oui, pourriez-vous me donner le code. Merci
Tizy
Bonjour,
c'est un tutoriel incroyable. Est-il possible d'afficher le bouton de partage à la fin de la vidéo YouTube et comment ? Merci d'avance pour votre aide.
L'équipe de WPBeginner
Dave, nous avons mis à jour l'article pour inclure une méthode qui partagera le lien de votre article au lieu de la vidéo YouTube. Suivez les instructions dans la section « Ajouter le lien de l'article WordPress dans la superposition du bouton de partage sur les vidéos YouTube ».
Dave
J'allais retourner modifier mon commentaire parce que j'ai eu un moment « D'oh » et j'ai remarqué que je n'avais pas activé le plugin du site. Je n'ai pas pu modifier car mon commentaire devait être approuvé.
Lorsque je l'ai activé, mes options de partage Facebook et Twitter ne se superposaient pas à la vidéo. Elles étaient en dessous de la vidéo.
Je ne sais pas, peut-être que j'ai mal fait quelque chose dans le processus.
J'aime votre site et je continuerai à revenir pour d'autres excellents articles.
Jessie Delmo
comment ajuster l'énorme espace en bas après la vidéo ?
Christenger
C'est une excellente solution, mais j'ai un problème étrange. Certains ID fonctionnent mais d'autres non.
Par exemple, cet ID fonctionne pour moi [wpb-yt video=”7vJdBec_B6A”] mais cet autre non [wpb-yt video=”CYveDEem5VA”]
Rednasil
Salut les gars, merci pour le tutoriel... J'ai réussi à le faire fonctionner en un rien de temps sur mon site.
Mais j'utilise le plugin Yoast's video SEO, et j'ai remarqué qu'il ne reconnaît pas les vidéos YouTube intégrées avec le shortcode.
Y a-t-il un moyen d'y parvenir ? Peut-être une solution de contournement où vous n'avez pas besoin d'utiliser de shortcodes ??
Support WPBeginner
Nous n'avons pas essayé avec le plugin Video SEO de Yoast. Nous verrons ce que nous pouvons faire.
Admin
Rednasil
Merci, j'espère que vous pourrez trouver une solution à ce problème.
Mat
Salut tout le monde,
Comment puis-je ajouter des "boutons de partage en superposition sur les vidéos YouTube" avec un embed YouTube à l'intérieur du Revolution Slider ?
Dans quels fichiers php et css dois-je coller les codes ?
Merci, votre aide est très appréciée !!
Mat
Jay
Salut — j'apprécie vraiment le post.
J'essaie de modifier l'extrait de functions.php pour que les boutons de partage/tweet renvoient à mon site au lieu du site youtube.com. Malheureusement, j'ai toutes sortes de problèmes. Pouvez-vous m'aider ou me diriger vers quelqu'un qui peut m'aider ?? J'y travaille depuis une heure sans progrès.
Je suis vraiment content que vous ayez publié ceci. C'est incroyablement utile !!
Support WPBeginner
Jay, nous avons mis à jour le post et ajouté un nouvel extrait qui partage le lien du post au lieu de la vidéo youtube. J'espère que cela vous aidera.
Admin
Ike Brown
S'il vous plaît, quand je clique sur le lien, ça ne marche pas. les boutons s'affichent mais quand on clique dessus, rien ne se passe
Farhan Shah
C'est génial et descriptif.
Farhan Shah
Patrycja
Does it work with all the themes? Like Jarvis theme? I couldn’t make it work..
Support WPBeginner
Vous devrez probablement ajuster le CSS. Nous ne pouvons pas être sûrs que cela fonctionne avec tous les thèmes car il existe des milliers de thèmes.
Admin
Martin
J'ai créé ce plugin 27 fois maintenant et il ne fonctionne toujours pas du tout ! J'ai vraiment besoin de cette fonction, pourriez-vous s'il vous plaît l'expliquer à nouveau et étape par étape. S'il vous plaît, évitez de commencer par « faites juste... » parce que je suis un vrai débutant et quand je suis assis ici, je ne sais rien.. J'ai déjà suivi votre tutoriel functions.php et mon site a planté complètement. Je comprends que vous offrez un excellent support ici, génial ! Pouce en l'air !! Super !!! Mais s'il vous plaît, comprenez que c'est vraiment frustrant de créer et de suivre les étapes autant de fois et sans résultat. Ce plugin n'apparaît pas du tout dans mon installation wp.
Martin
« copiez-le simplement dans functions.php.. » vous savez, où dans functions.php ?? en haut où ça commence par 1 ou en bas où il y a des numéros 300 et ainsi de suite ?? ou quelque part au milieu ? Merci <3
Support WPBeginner
en bas de votre fichier functions.php
Admin
Support WPBeginner
Martin, nous comprenons votre frustration. Pouvez-vous installer d'autres plugins sur votre site ?
Admin
Martin
bien sûr, pas de problème pour installer des plugins. Je l'ai aussi corrigé moi-même à la fin, mais le résultat était juste moyen, ça n'a pas l'air très soigné honnêtement. Je l'ai donc supprimé à nouveau. Je cherchais d'autres solutions mais elles ne semblent pas exister, tout est lié à "gagner de l'argent" ou "verrouiller du contenu" .. pourquoi quelqu'un aimerait une page pour la verrouiller ? J'ai vraiment besoin de ce plugin et je n'ai pas d'argent pour engager des gens. Veuillez m'offrir un support par e-mail, vous pourriez m'expliquer comment je peux styliser le tout pour que cela ait l'air mieux. S'il vous plaît, s'il vous plaît, s'il vous plaît ! J'apprécierais vraiment cela. Merci <3
Patrycja
C'est pareil pour moi. J'ai essayé de l'ajouter dans functions.php, puis avec un plugin spécifique au site. Rien. Nada. Et j'aimerais vraiment que ça marche. Est-ce que ça marche avec tous les thèmes ?
Ignorer
Excellent code que j'ai adapté et implémenté sur une page de test, y compris Google+. Je sais que l'essentiel n'est pas le CSS, mais je voulais juste souligner que je pense que l'opacité à 0 est une très mauvaise idée, car de plus en plus de navigation se fait sur des écrans tactiles où il n'y a pas d'événement de survol et les boutons ne seraient jamais vus. Je préférerais soit oublier complètement les effets d'opacité, soit définir une opacité initiale à 0,5, soit utiliser des requêtes média pour cibler différents appareils avec des réglages d'opacité individuels.
Jason Gooljar
Peut-on faire cela aussi avec l'attribut IMG ?
Kannan M
Astuce géniale
Pam Simmons
C'est très utile. Il semble que les boutons de partage dans cet exemple partagent en fait le lien de la vidéo YouTube, plutôt que la page contenant la vidéo intégrée comme le font les superpositions de boutons UpWorthy. Comment modifierait-on le code pour récupérer le permalien de la page plutôt que le lien YouTube ?
Dave
I just wasted 30 minutes of my life. I did everything the tutorial said to do and it just showed a short code on my post. But even if it did work, according to the comment I am replying to, it would have driven traffic to youtube and not my site.
Madeline
Merci. J'ai hâte d'essayer et de vous faire part des résultats.
Manish Misra
C'est vraiment bien et ça m'aide dans mon travail...
Chris
C'est bien. Qu'en est-il de l'utilisation d'un ID de playlist dans le shortcode ?
La plupart des gens utilisent des vidéos statiques sur les articles, mais sur les pages d'accueil, nous utilisons des playlists.
Comment ce code pourrait-il être modifié pour ajouter les boutons de partage sur les vidéos de playlists ?
C'est-à-dire pour fonctionner avec le plugin YouTube Channel Gallery.
BTW – SOUS le code, votre texte dit ceci : « Le code suivant crée un shortcode qui ajoute automatiquement des boutons Twitter et Facebook à vos vidéos. »
Ne devrait-il pas dire « ...code PRÉCÉDENT... » ?
Support WPBeginner
Chris, nous avons mis à jour l'article, vous pouvez maintenant l'utiliser avec des playlists également.
Admin
Krish Murali Eswar
Bien joué. Je suis généralement opposé à modifier quoi que ce soit au niveau du code. Cela semble être un candidat évident pour un plugin. Êtes-vous sûr qu'il n'existe pas de plugin ?
Support WPBeginner
Ce code peut être utilisé dans un plugin spécifique au site.
Admin
Mai
Cela semble génial. Pourriez-vous donner des instructions très simples, étape par étape, sur la façon de l'installer – peut-être sur YouTube ?
Subbareddy
C'est génial
Steven
Excellent article !
Comment ajouter ce shortcode maintenant à l'éditeur de shortcode HTML qui apparaît sur la barre TinyMCE ?
Steve Wharton
Code plutôt cool. J'ai hâte de jouer avec et de l'ajouter à mon nouveau site. Merci !
Tom Horn
Y a-t-il un moyen d'utiliser un plugin pour ajouter ce code afin de ne pas tout gâcher si nous n'avons pas l'habitude de travailler en coulisses ? Merci pour cela, j'ai vu des choses comme ça auparavant et je voulais vraiment savoir comment faire.
Support WPBeginner
Oui, vous pouvez l'ajouter à un plugin spécifique au site.
Admin
Pam Blizzard
Merci de partager ceci, c'est une solution élégante.
Pensez-vous que cela pourrait également fonctionner pour les playlists YouTube, avec la syntaxe « PLxxxetc » ?
Support WPBeginner
Fondamentalement, vous pouvez modifier le shortcode pour générer n'importe quel type d'intégration, puis utiliser CSS pour positionner les boutons de partage sur cette intégration. Donc oui, cela devrait fonctionner.
Admin
Steven Jacobs
Y aurait-il un moyen de faire cela aussi avec les lecteurs SoundCloud ?
Excellent article au passage.
Support WPBeginner
Oui, cela devrait fonctionner avec les intégrations SoundCloud, mais vous devrez les ajouter dans le shortcode, puis utiliser CSS pour un positionnement correct.
Admin
Zimbrul
C'est une chose assez cool à faire sur vos vidéos YouTube : les boutons de partage. J'aime aussi ces boutons flottants sur les images ajoutés par FooBox
Pam
C'est génial, merci !
Pensez-vous qu'il pourrait être adapté pour fonctionner avec des playlists ainsi qu'avec des vidéos individuelles ?