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:
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 agrega 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:
/// Themelocal'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 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 del 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 vean 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.
/* * Themelocal'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 código corto de esta manera:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puede obtener las ID de su video y lista de reproducción visitando la lista de reproducción en YouTube y copiando la 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 en el complemento específico del sitio:
/// Themelocal'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 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 a los videos de YouTube en WordPress. Háganos saber qué canales de redes sociales planea agregar a sus videos dejando un comentario a continuación.