Los videos son una de las mejores formas de aumentar la participación de los usuarios. Uno de nuestros usuarios nos pidió recientemente una forma de crear superposiciones de botones para compartir en un video similar al popular sitio UpWorthy. En este artículo, le mostraremos cómo agregar botones para compartir como superposiciones en videos de YouTube en WordPress.
Ejemplo de cómo quedaría:
Agregar botones para compartir como una superposición en videos de YouTube
Había varias maneras de hacer esto. La mayoría de las formas requerirán que pegue un código HTML cada vez que agregue un video. En lugar de hacer eso, decidimos crear un código abreviado que automatizaría este efecto de superposición.
Simplemente copie y pegue el siguiente código en un complemento específico del sitio o en el archivo functions.php de su tema:
/// 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/'%20.%20$video%20.%20'" 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'.%20$video%20.'" 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'.%20$video%20.'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
// Return output
return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Este código crea un código abreviado que agrega automáticamente enlaces para compartir de Twitter y Facebook a sus videos. Estos botones solo son visibles cuando el usuario mueve el mouse sobre el video. También puede usarlo para agregar cualquier otro canal de redes sociales.
Para usar este código abreviado, todo lo que necesita hacer es agregar la identificación del video de YouTube en el código abreviado de la siguiente manera:
[wpb-yt video="qzOOy1tWBCg"]
Puede obtener la identificación del video de YouTube a partir de la cadena de URL. Como esto:
Ahora, cuando agregue un video, podrá ver su video de YouTube y enlaces de texto sin formato para compartir el video en Facebook o Twitter. Notará que estos enlaces no tienen ningún estilo.
Así que hagamos estos enlaces para hacer botones, para que se vea un poco mejor. También ocultaremos estos botones y los haremos aparecer solo cuando un usuario pase el mouse sobre el contenedor de video. Para hacer esto, agregue el siguiente CSS a la hoja de estilo de su tema hijo.
#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;
}
Eso es todo. Ahora debería tener los botones de compartir superpuestos en sus videos de YouTube en WordPress.
Agregar botones para compartir como una superposición para las listas de reproducción de videos de YouTube en WordPress
Después de publicar este artículo, muchos de nuestros lectores preguntaron cómo cambiar este código para que funcione en las listas de reproducción y videos de YouTube. Si incrusta videos y listas de reproducción de YouTube en su sitio de WordPress, debe usar este código en su lugar.
/*
* 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/'%20.%20$video%20.%20'?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'.%20$video%20.%20'%26list%3D'%20.%20$playlist%20.%20'" 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'.%20$video%20.%20'%26list%3D'%20.%20$playlist%20.%20'">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/'%20.%20$video%20.%20'" 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'.%20$video%20.'" 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'.%20$video%20.'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
endif;
// Return output
return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
Usando el código anterior, también puede agregar una lista de reproducción con botones de compartir superpuestos. Para ver su lista de reproducción, deberá proporcionar la identificación del video y la identificación de la lista de reproducción en el código abreviado de la siguiente manera:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puede obtener los ID de video y lista de reproducción visitando la lista de reproducción en YouTube y copiando el ID de lista de la URL, así:
Se agregó un enlace a la publicación de WordPress en la superposición del botón Compartir en los videos de YouTube
Después de publicar este artículo, algunos de nuestros usuarios solicitaron los botones de compartir para compartir su enlace de publicación de WordPress en lugar del enlace de video de YouTube. Para hacer esto, debe reemplazar la URL del video en los botones de compartir con el enlace permanente de la publicación de WordPress. Use este código en su functions.php o complemento específico del sitio:
/// 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/'%20.%20$video%20.%20'" 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='.%20$permalink_encoded%20.'" 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');
Siéntase libre de modificar el CSS o los fragmentos de código abreviado para satisfacer sus necesidades. Para optimizar aún más sus videos, puede hacer que sus videos de YouTube respondan utilizando el complemento FitVids jQuery. También puede desactivar los videos relacionados que aparecen al final del video. o incluso crear imágenes destacadas a partir de miniaturas de videos de YouTube.
Esperamos que este artículo lo haya ayudado a agregar botones personalizados para compartir como superposiciones en videos de YouTube en WordPress. Háganos saber qué canales de redes sociales desea agregar a sus videos dejando un comentario a continuación.
