Cómo añadir botones Compartir como superposición en vídeos de YouTube en WordPress
Los vídeos son una de las mejores maneras de aumentar la participación de los usuarios. Recientemente uno de nuestros usuarios nos preguntó sobre una forma de crear superposiciones de botones para compartir en vídeos similares al popular sitio UpWorthy. En este artículo, le mostraremos cómo añadir botones de compartir como superposición en vídeos de YouTube en WordPress.
Un ejemplo de cómo sería:
Adición de botones Compartir como superposición en vídeos de YouTube
Había varias maneras de hacerlo. La mayoría de las formas requieren que pegues un poco de código HTML cada vez que añadas un vídeo. En lugar de hacer eso, decidimos crear un atajo 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:
1234567891011121314141516171718192021222324252627282930/// Función YouTube Share Overlay Buttons de AprenderWPwpb_yt_butt_buttons($atts) { // Obtener el ID de vídeo a partir de shortcodeextract( shortcode_atts('array( 'video'=> '' ), $atts)); // Mostrar la cadena de vídeo= '. $video. height="315" allowfullscreen=""" frameborder="0">'; // Añadir botón de compartir en Facebook $string.= ''.
- . $video.'"> Facebook
- . $video.'">Tweet
"Agregar botón de Tweet $string.=
Cerrar el contenedor de vídeo $string.= ''; // Devolver la salida return$string; } // Add Shortcode add_shortcode('wpb-yt', 'wpb_yt_butt_buttons');
Este código crea un atajo que añade automáticamente enlaces de twitter y facebook a tus vídeos. Estos botones sólo son visibles cuando el usuario pasa el ratón por encima del vídeo. Puedes usarlo para añadir cualquier otro canal de medios sociales también.
Para usar este código abreviado, todo lo que tendrá que hacer es añadir el ID de vídeo de YouTube en el código abreviado de esta manera:
[wpb-yt video="qzOOy1tWBCg"]
Puede obtener el Id. de vídeo de YouTube a partir de la cadena de URL. Así:
Ahora, cuando añadas un vídeo, podrás ver tu vídeo de YouTube y los enlaces de texto para compartirlo en Facebook o Twitter. Notarás que estos enlaces no tienen estilo en absoluto.
Así que vamos a darle estilo a estos enlaces para crear botones, para que se vea un poco mejor. También ocultaremos estos botones y los haremos aparecer sólo cuando un usuario pase el ratón sobre el contenedor de vídeo. Para hacer esto, agregue el siguiente CSS a la hoja de estilos de su Tema Infantil.
123456789101112131414151617171819202122232425262728293031323334353637383940414243444546#posición: relativa;derecha: 40px;arriba: -190px;tipo de lista: ninguna;visualización: bloque;opacidad: 0;filtro: alfa(opacidad=0);-transición del kit web: opacidad.4s, arriba.25ss;-moz-transición: opacidad .4s, top.25s;-o-transición: opacidad.4s, top.25s;transición: opacidad.4s, top.25s;z-index: 500;} #share-video-overlay:hover { opacidad:1;filter:alpha(opacidad=100);} .share-video-overlay li { margen: 5px0px5px0px0px; }#facebook {color: #ffffffff;color de fondo: #3e5ea1;ancho: 70px;relleno: 5px;}.facebook a:link,.facebook a:active,.facebook a:visited { color:#fff;text-decoration:none;} #twitter { color de fondo:#00a6d4;ancho: 70px;relleno: 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ías tener botones para compartir en tus videos de YouTube en WordPress.
Adición de botones Compartir como superposición para listas de reproducción de vídeos 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 en las listas de reproducción de YouTube, así como en los vídeos. Si incrusta vídeos de YouTube así como listas de reproducción en su sitio de WordPress, entonces debería utilizar este código en su lugar.
123456789101112131414151617171819202122232425262728293031323334353637383940414243444546474849505152535455/** Botones de superposición de AprenderWP's Share* en YouTube Videos y listas de reproducción*/ functionwpb_yt_butt_buttons($atts) { // Obtener los ids del vídeo y de las listas de reproducción a partir del extracto de código abreviado ('shortcode_atts( 'video'=> '', playlist'=> '', ), $atts) ); // Compruebe si un Id. de lista de reproducción tiene el código abreviado if(!$playlist=== '') : // Mostrar lista de reproducción de vídeo $string= '. $video. "lista=". Lista de reproducción. "height="315" allowfullscreen=""" frameborder="0">'; // Añadir botón de Facebook $string.= '.
- . $video. lista%26%3D'. Lista de reproducción. ">Facebook
- . $video. lista%26%3D'. Lista de reproducción. "Tweet
"Agregar botón de Twitter $string.=
Cerrar el contenedor de vídeo $string.= ''; // Si no se proporciona ningún otro ID de lista de reproducción: //Muestra el video $string.= '. $video. "height="315" allowfullscreen=""" frameborder="0">'; // Añadir botón de Facebook $string.= '.
- . $video.'"> Facebook
- . $video.'">Tweet
"Agregar botón de Twitter $string.=
Cerrar el contenedor de vídeo $string.= ''; endif; // Devolver la salida return$string; } // Añadir shortcodeadd_shortcode('wpb-yt', 'wpb_yt_butt_buttons');
Usando el código anterior también puede añadir una lista de reproducción con botones de compartir superpuestos. Para mostrar su lista de reproducción tendrá que proporcionar el Id. de vídeo y el Id. de lista de reproducción en el código abreviado de esta manera:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
Puede obtener los Id. de vídeo y de lista de reproducción visitando la lista de reproducción en YouTube y copiando el Id. de lista desde la URL, de esta manera:
Adición de un enlace de publicación de WordPress en el botón Compartir en vídeos de YouTube
Después de publicar este artículo, algunos de nuestros usuarios nos pidieron que les gustaría que los botones de compartir compartieran el enlace de su post de WordPress en lugar del enlace de vídeo de YouTube. Para hacer eso necesitas reemplazar la URL del video en los botones de compartir con el permalink del post de WordPress. Utilice este código en su functions.php o plugin específico del sitio:
123456789101112131414151617171819202122232425262728293031323334/// La función de YouTube Share Overlay Buttons de AprenderWPwpb_yt_butt_buttons($atts) { // Obtener el ID de vídeo a partir de shortcodeextract( shortcode_atts( array('video'=>> ''), $atts); // Mostrar vídeo $string= '. $video. height="315" allowfullscreen="" frameborder="0">"; // Get post permalink and encode URL $permalink_encoded= urlencode(get_permalink()); // Add Facebook share button $string.= '.
- . codificado"> Facebook
- . Codificado por $permalink.'">Tweet
"Agregar botón de Tweet $string.=
Cerrar el contenedor de vídeo $string.= ''; // Devolver la salida return$string; } // Add Shortcode add_shortcode('wpb-yt', 'wpb_yt_butt_buttons');
Siéntase libre de modificar el CSS o los fragmentos de código abreviado para satisfacer sus necesidades. Para optimizar aún más sus vídeos, puede hacer que sus vídeos de YouTube respondan utilizando el plugin FitVids jQuery. También puede desactivar los vídeos relacionados que aparecen al final del vídeo o incluso crear imágenes destacadas a partir de miniaturas de vídeos de YouTube.
Esperamos que este artículo le haya ayudado a añadir botones de compartir personalizados como superposición en los vídeos de YouTube en WordPress. Háganos saber qué canales de medios sociales planea agregar a sus videos dejando un comentario a continuación.
Deja una respuesta