Los videos son una de las mejores formas de aumentar la participación de los usuarios. Recientemente, uno de nuestros usuarios nos pidió una forma de crear superposiciones de botones para compartir en videos similares al popular sitio UpWorthy. En este artículo, le mostraremos cómo agregar botones para compartir como una superposición en videos de YouTube en WordPress.
Ejemplo de cómo se vería:
Agregar botones para compartir como una superposición en videos de YouTube
Había varias formas de hacer esto. La mayoría de las formas requieren que pegue un poco de código HTML cada vez que agregue un video. En lugar de hacer eso, decidimos crear un código corto que automatizaría este efecto de superposición.
Simplemente copie y pegue el siguiente código en un plugin específico del sitio o en el archivo functions.php de su tema:
/// TrucosWP'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');
Este código crea un código corto que agrega automáticamente enlaces para compartir de Twitter y Facebook a sus videos. Estos botones solo son visibles cuando el usuario pasa el mouse sobre el video. También puede usarlo para agregar otros canales de redes sociales.
Para usar este código corto, todo lo que necesita hacer es agregar la ID de video de YouTube en el código corto de la siguiente manera:
[wpb-yt video="qzOOy1tWBCg"]
Puede obtener la identificación de video de YouTube 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ás que estos enlaces no tienen estilo alguno.
Luego, diseñamos estos enlaces para crear botones, de modo que se vea un poco mejor. También ocultaremos estos botones y solo los haremos aparecer 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 para 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 con las listas de reproducción y los videos de YouTube. Si inserta videos y listas de reproducción de YouTube en su sitio de WordPress, debe usar este código en su lugar.
/*
* TrucosWP'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');
Usando el código anterior, también puede agregar una lista de reproducción con botones para 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 corto de la siguiente manera:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puede obtener sus 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ó el enlace de publicación de WordPress en la superposición del botón de compartir en los videos de YouTube
Después de publicar este artículo, algunos de nuestros usuarios pidieron que les gustaría que los botones para compartir compartieran el enlace de su publicación de WordPress en lugar del enlace del video de YouTube. Para hacer esto, debe reemplazar la URL del video en los botones para compartir con el enlace permanente de la publicación de WordPress. Use este código en su functions.php o en el plugin específico del sitio:
/// TrucosWP'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');
Siéntase libre de modificar los fragmentos CSS o shortcode para satisfacer sus necesidades. Para optimizar aún más sus videos, puede hacer que sus videos de YouTube respondan usando el plugin jQuery de FitVids. También puede desactivar los videos relacionados que se muestran al final del video. o incluso crear imágenes destacadas a partir de miniaturas de videos de YouTube.
Esperamos que este artículo te haya ayudado a agregar botones personalizados para compartir como superposiciones en videos de YouTube en WordPress. Háganos saber qué canales de redes sociales planea agregar a sus videos dejando un comentario a continuación.
¿Te ha resultado útil??
0 / 0