Cómo agregar botones para compartir como superposición en videos de YouTube en WordPress

Los videos son una de las mejores formas de impulsar la participación de los usuarios. Recientemente, uno de nuestros usuarios nos preguntó sobre 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 superpuestos en videos de YouTube en WordPress.

Ejemplo de cómo se vería:

Cómo agregar botones para compartir como superposición en videos de YouTube en WordPress

Agregar botones para compartir como superposición en videos de YouTube

Había varias formas de hacerlo. La mayoría de las formas requieren que pegue un fragmento 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 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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook share button $string .= ''; // Close video container $string .= '
'; // 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 coloca el mouse sobre el video. También puede usarlo para agregar cualquier otro canal de redes sociales.

Para usar este shortcode, todo lo que necesita hacer es agregar la ID de video de YouTube en el shortcode de esta manera:

[wpb-yt video=”qzOOy1tWBCg”]

Puede obtener la identificación de video de YouTube de la cadena de URL. Como esto:

Encontrar la identificación de video de YouTube

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 diseñemos estos enlaces para crear botones, para que se vea un poco mejor. También ocultaremos estos botones y los haremos aparecer solo cuando un usuario coloque el mouse sobre el contenedor de video. Para hacer esto, agregue el siguiente CSS a la hoja de estilo de su tema secundario.

#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 botones para compartir superpuestos en sus videos de YouTube en WordPress.

Agregar botones para compartir como superposición para listas de reproducción de videos de YouTube en WordPress

Después de publicar este artículo, muchos de nuestros lectores preguntaron cómo se puede modificar este código para que funcione con las listas de reproducción de YouTube y con los videos. Si inserta videos de YouTube y listas de reproducción en su sitio de WordPress, entonces 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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook button $string .= ''; // Close video container $string .= '
'; // If no playlist ID is provided else : //Display video $string .= '
https://www.youtube.com/watch?v=' . $video . ''; // Add Facebook button $string .= ''; // Close video container $string .= '
'; 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 mostrar 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 esta manera:

[wpb-yt video=”exP9N3rIfV0″ playlist=”UUhA624rCabHAmd6lpkLOw7A”]

Puede obtener los ID de su video y lista de reproducción visitando la lista de reproducción en YouTube y copiando el ID de la lista de la URL, así:

Obtener el ID de lista de reproducción y video de YouTube desde la URL

Agregar un enlace de publicación de WordPress en la superposición del botón Compartir en videos de YouTube

Después de que publicamos 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 de video de YouTube. Para hacer eso, debe reemplazar la URL del video en los botones para compartir con el enlace permanente de la publicación de WordPress. Utilice este código en su functions.php o en el 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 = '
https://www.youtube.com/watch?v=' . $video . ''; // Get post permalink and encode URL $permalink_encoded = urlencode(get_permalink()); // Add Facebook share button $string .= ''; // Close video container $string .= '
'; // 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 corto para satisfacer sus necesidades. Para optimizar aún más sus videos, puede hacer que sus videos de YouTube respondan usando 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 le haya ayudado a agregar botones personalizados para compartir superpuestos en los videos de YouTube en WordPress. Háganos saber qué canales de redes sociales planea agregar en sus videos dejando un comentario a continuación.