Ejemplo de cómo se vería:
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 shortcode que automatizaría este efecto de superposición.
Simplemente copie y pegue el siguiente código en un sitio específico plugin o el archivo functions.php de su tema:
/// '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 shortcode que agrega automáticamente enlaces para compartir de Twitter 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 esto shortcode, todo lo que necesita hacer es agregar el ID de video de YouTube en el shortcode como esto:
[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á 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.
/*
* '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 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 shortcode como esto:
[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í:
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 del 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. Use este código en su functions.php o específico del sitio plugin:
/// '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 el CSS o el shortcode fragmentos para satisfacer sus necesidades. Para optimizar aún más sus videos, puede hacer que sus videos de YouTube respondan usando FitVids jQuery plugin. 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.
.
Fuente: wpbeginner