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 stimuler 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 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 y avait plusieurs façons de procéder. La plupart des méthodes vous obligeront à coller des morceaux 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 function.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 amène sa souris sur la vidéo. Vous pouvez également l'utiliser pour ajouter n'importe quel autre canal de médias sociaux.
Pour utiliser ce shortcode, il vous suffira d'ajouter l'identifiant 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 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.
Stylisons donc ces liens pour créer des boutons, afin 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 sur vos vidéos YouTube dans WordPress.
Ajout de boutons de partage en superposition pour les listes de lecture de vidéos YouTube dans WordPress
Après la publication de cet article, beaucoup de nos 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 playlists sur votre site WordPress, vous devez plutôt utiliser ce code.
/*
* 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 liste de lecture avec des boutons de partage superposés. Pour afficher votre playlist, vous devrez fournir l'identifiant de la vidéo et l'identifiant de la playlist dans le shortcode comme ceci :
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Vous pouvez obtenir les identifiants de votre vidéo et de votre playlist en visitant la playlist sur YouTube et en copiant l'identifiant de la liste à partir de l'URL, comme ceci :
Ajout d'un lien de publication WordPress dans la superposition du bouton de partage sur les vidéos YouTube
Après avoir publié cet article, certains de nos utilisateurs ont demandé qu’ils souhaitent que les boutons de partage partagent 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 plugin function.php ou 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 le CSS ou les extraits de shortcode pour répondre à vos besoins. Pour optimiser davantage vos vidéos, vous pouvez rendre vos vidéos YouTube réactives à l'aide du plugin 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 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 canaux de médias sociaux vous envisagez d'ajouter à vos vidéos en laissant un commentaire ci-dessous.