botones-yt-dashicons

Botones de compartir superpuestos en vídeos YouTube en WordPress

A simple vista el título puede resultar raro, pero en este post veremos cómo crear botones de compartir, de Facebook y Twitter, superpuestos en un vídeo youtube, dentro de una página o entrada de WordPress.

Los videos son una de las mejores maneras de aumentar la participación del usuario. Así que crearemos unos enlaces dentro de ese video a nuestras redes sociales. Vamos a ello.



* Para este Tutorial estamos usando un tema hijo del tema Twenty Fourteen.

Agregar Botones como superposición de vídeos de YouTube

Hay varias maneras de hacerlo. La mayoría de las formas requieren que escribas un poco de código HTML cada vez que se agrega un video. En lugar de hacer eso, hemos decidido crear un Shortcode que automatice este efecto de superposición, que en inglés se dice overlay .

Simplemente copia y pega el siguiente código en un plugin específico que hayas creado o edita el archivo functions.php de tu tema:

/// Botones de compartir superpuestos en video Youtube. Código de WPBeginner. Gracias. 
function botones_en_yt($atts) { 
// Obtener el ID del del shortcode
extract( shortcode_atts( array(
 'video' => ''
 ), $atts ) );
// Mostrar el video
 $string = '<div id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Enlace permanente y la URL de codificación
$permalink_encoded = urlencode(get_permalink()); 
// Botón de compartir en Facebook 
 $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">
 Comparte</a></li>'; 
// Botón de Twitter 
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&amp;url='. $permalink_encoded .'">Twitea</a></li></ul>';
// Cerrar el contenedor de video 
 $string .= '</div>';
// output 
 return $string; 
} 
// Añadir Shortcode 
add_shortcode('bt-yt', 'botones_en_yt');

Este código crea un shortcode que agrega automáticamente los enlaces de compartir deTwitter y Facebook a tus videos. Estos botones sólo son visibles cuando el usuario lleva su ratón sobre el video.

Para utilizar este shortcode, todo lo que necesitas hacer es agregar el ID de vídeo de YouTube en el shortcodde, como esto:

[bt-yt video="ZFAK8nxKxvc"]

El ID lo obtienes de la URL del video, (la parte que está en negrita).

https://www.youtube.com/watch?v=ZFAK8nxKxvc

Esto es lo que tenemos hasta el momento.

Botones de compartir superpuestos en vídeos YouTube en WordPress

Verás que sólo aparecen los enlaces de texto, para compartir el video en Facebook o Twitter, sin formato. Es decir, no están superpuestos dentro del vídeo, todavía.

Así que vamos a dar estilo a estos enlaces para crear botones, para que se vea un poco más agradable. También vamos a ocultar estos botones y hacer que sólo aparezcan cuando un usuario pasa su ratón por el vídeo. Para ello, añade los siguientes estilos CSS a tu archivo style.css.

#share-video-overlay {
position: relative;
right: 20px;
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: 80px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited { 
color:#fff;
text-decoration:none;
} 
#twitter { 
background-color:#00a6d4;
width: 80px;
padding: 5px;
} 
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { 
color:#FFF;
text-decoration:none;
}

Y ya está. Ya puedes ver los botones de Facebook y Twitter superpuestos en tu vídeo deYoutube.

botones-yt-superpuestos

Si te has dado cuenta, en la imagen que mostramos al principio del post salen unos iconos junto al texto. Sí, lo has adivinado, son Dashicons.

Agregando Dashicons a nuestros botones de compartir

Desde la página de Dashicons hemos escogido nuestros iconos.

Edita el archivo style.css de tu tema y añade el código siguiente.

.facebook a:before { 
 color: #ffffff; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: middle;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f305";
}
.twitter a:before { 
 color: #ffffff; 
 display: inline-block;
 -webkit-font-smoothing: antialiased;
 font: normal 20px/1 'dashicons';
 vertical-align: middle;
 margin-right: 5px;
 margin-right: 0.5rem;
 content: "\f301";
}

Nota que al añadir el icono tendrás que modificar el ancho del botón, según el texto que hayas escrito, claro está.

Fuente Wpbeginner

Espero que este post te haya resultado útil.

Y tú. ¿Usas botones de compartir en tus vídeos de Youtube?

Comenta, comparte, difunde. Gracias.

Carlos A para FreelanceEvolution®

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *