Las imágenes en movimiento son una de las mejores estrategias para aumentar el compromiso de una persona en particular. Actualmente, uno de nuestros prospectos nos preguntó sobre algunos métodos para crear superposiciones para botones de compartir en películas, similar a lo que hicimos en su sitio web favorito UpWorthy. En este texto, le presentaremos los medios exactos para agregar botones para compartir como una superposición en los videos de YouTube en WordPress.

Junto con los botones de compartir como superposición en los videos de YouTube

Ha habido varios procedimientos en los que, en ocasiones, esto se puede hacer de manera muy eficaz. La mayoría de las estrategias requieren que guardes un pequeño código HTML cada vez que agregas un video. En su lugar, decidimos crear un código corto que pueda automatizar esta influencia 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:

/// WPSaviour's YouTube Share Overlay Buttons
carry out wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
    'video' => ''
    ), $atts ) );
// Present video
    
$string = '<div id="video-container"><iframe src="https://www.youtube.com/embed/' . $video . '" prime="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Fb share button
    
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="fb" id="fb"><a href="https://www.fb.com/sharer/sharer.php?u=httpspercent3Apercent2Fpercent2Fyoutube.com/watchpercent3Fvpercent3D'. $video .'" purpose="_blank">
 Fb</a></li>';   
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&textual content material=Take a look at+this+video&amp;url=httppercent3A//www.youtube.com/watchpercent3Fvpercent3D'. $video .'">Tweet</a></li></ul>';
// Shut 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 proporciona automáticamente hipervínculos para compartir en Twitter y Facebook a sus películas. Estos botones solo son visibles cuando la persona respectiva mueve el mouse sobre el video. Tienes que usarlo para agregar correctamente cada canal de redes sociales diferente.

Para usar este código abreviado, todo lo que necesita hacer es pegar 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 de la cadena de URL. Como esto:

Encuentra la identificación del video de YouTube

Ahora, cuando agrega un video, puede mostrar su video de YouTube e hipervínculos en texto sin formato para compartir el video en Facebook o Twitter. Puede encontrar que estos hipervínculos a menudo no están formateados en lo más mínimo.

Ordenemos estos hipervínculos para crear botones para que parezcan un poco más agradables. Incluso cubriremos estos botones y solo los dejaremos aparecer cuando una persona levante su mouse en el contenedor de video. Para probar esto, agregue el siguiente CSS a la hoja de estilo de su tema hijo.

#share-video-overlay {
place: relative;
correct: 40px;
prime: -190px;
list-style-type: none;
present: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, prime .25s;
-moz-transition: opacity .4s, prime .25s;
-o-transition: opacity .4s, prime .25s;
transition: opacity .4s, prime .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay  li {
margin: 5px 0px 5px 0px;
}
#facebook {
shade: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.fb a:hyperlink, .fb a:energetic, .fb a:visited {
shade:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:hyperlink, .twitter a:energetic, .twitter a:visited, .twitter a:hover {
shade:#FFF;
text-decoration:none;
}

Eso es todo. Ahora es mejor superponer los botones para compartir en sus videos de YouTube en WordPress.

Junto con los botones de compartir como una superposición para las listas de reproducción de videos de YouTube en WordPress

Después de publicar este contenido de texto, algunos de nuestros lectores preguntaron cómo se podría cambiar este código para las listas de reproducción de YouTube junto con las imágenes en movimiento. Para las personas que incorporan películas de YouTube en su sitio web de WordPress junto con listas de reproducción, es mejor usar este código en su lugar.

/*
* WPSaviour's Share Overlay Buttons
* on YouTube Motion pictures and Playlists
*/
carry out wpb_yt_buttons($atts) {
// Get the video and playlist ids from shortcode
extract( shortcode_atts( array(
    'video' => '',
    'playlist' => '',
        ), $atts ) );
            
// Take a look at to see if a playlist id is provided with shortcode        
            
    if (!$playlist == '' ) :   
// Present video playlist
        
    $string = '<div id="video-container"><iframe src="https://www.youtube.com/embed/' . $video . '?report=" . $playlist . "" prime="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Fb button     
    $string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="fb" id="fb"><a href="https://www.fb.com/sharer/sharer.php?u=httpspercent3Apercent2Fpercent2Fyoutube.com/watchpercent3Fvpercent3D'. $video . '%26listpercent3D' . $playlist . '" purpose="_blank">Fb</a></li>';
// Add Twitter button
    $string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&textual content material=Take a look at+this+video&amp;url=httppercent3A//www.youtube.com/watchpercent3Fvpercent3D'. $video . '%26listpercent3D' . $playlist . '">Tweet</a></li></ul>';
// Shut video container   
    $string .= '</div>';
        
// If no playlist ID is obtainable
    else :
//Present video    
    $string .= '<div id="video-container"><iframe src="https://www.youtube.com/embed/' . $video . '" prime="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Add Fb button     
    $string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="fb" id="fb"><a href="https://www.fb.com/sharer/sharer.php?u=httpspercent3Apercent2Fpercent2Fyoutube.com/watchpercent3Fvpercent3D'. $video .'" purpose="_blank">
 Fb</a></li>';
 
// Add Twitter button          
    $string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&textual content material=Take a look at+this+video&amp;url=httppercent3A//www.youtube.com/watchpercent3Fvpercent3D'. $video .'">Tweet</a></li></ul>';
    // Shut video container  
        $string .= '</div>';
        
    endif;
        
// Return output       
    return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');

El código anterior también le permite agregar una lista de reproducción con botones para compartir superpuestos. Para especificar su lista de reproducción, es posible que deba actualizar la identificación del video y la identificación de la lista de reproducción en todo el código corto de la siguiente manera:

[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]

Puede obtener las identificaciones de su video y lista de reproducción yendo a la lista de reproducción en YouTube y copiando la identificación del informe de la URL de la siguiente manera:

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

Envíe junto con el hipervínculo de WordPress en la superposición del botón de compartir en los videos de YouTube

Después de que imprimimos este contenido de texto, solo algunos de nuestros prospectos pidieron que necesitaran los botones de compartir para compartir el hipervínculo de su construcción de WordPress en lugar del hipervínculo de video de YouTube. Para hacer esto, es posible que desee reemplazar la URL del video en los botones para compartir con el enlace permanente de WordPress. Use este código en su options.php o en el complemento específico de su sitio:

/// WPSaviour's YouTube Share Overlay Buttons
carry out wpb_yt_buttons($atts) {
// Get the video ID from shortcode
extract( shortcode_atts( array(
    'video' => ''
    ), $atts ) );
// Present video
    
$string = '<div id="video-container"><iframe src="https://www.youtube.com/embed/' . $video . '" prime="315" width="560" allowfullscreen="" frameborder="0"></iframe>';
// Get put up permalink and encode URL
$permalink_encoded = urlencode(get_permalink());
// Add Fb share button
    
$string .= '<ul class="share-video-overlay" id="share-video-overlay"><li class="fb" id="fb"><a href="https://www.fb.com/sharer/sharer.php?u='. $permalink_encoded .'" purpose="_blank">
 Fb</a></li>';   
// Add Tweet button
$string .= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&textual content material=Take a look at+this+video&amp;url=". $permalink_encoded ."">Tweet</a></li></ul>';
// Shut video container   
    $string .= '</div>';
// Return output   
    return $string;
}
// Add Shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');

Puede cambiar el CSS o los fragmentos de código corto para que se adapten a sus necesidades. Para optimizar aún más sus imágenes en movimiento, puede hacer que sus videos de YouTube respondan con el complemento jQuery de FitVids. También es posible desactivar los videos relacionados que aparecen al final del video. e incluso crear imágenes destacadas a partir de miniaturas de videos de YouTube.