Tutoriales

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

Los videos 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 de compartir en videos similares al popular sitio UpWorthy. En este artículo, le mostraremos cómo agregar botones de compartir como superposición en los videos de YouTube en WordPress.

Ejemplo de cómo se vería:

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

Había varias maneras de hacer esto. La mayoría de las formas requieren que pegue un poco de código HTML cada vez que agregue un video. En lugar de hacerlo, decidimos crear un código corto que automatizara 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:

 /// Función de botones de superposición de compartir de YouTube de WPBeginner wpb_yt_buttons ($ atts) // Obtener el ID de video del extracto de shortcode (shortcode_atts (array ('video' => ",, $ atts)); // Display video $ string = ' '; // Agregar el botón de compartir de Facebook $ cadena. =' Facebook
'; // Añadir botón de Tweet $ cadena. = 'Pío
'; // Cerrar video string $ string. = ''; // Retorno de salida return $ cadena;  // Añadir el Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Este código crea un código corto que agrega automáticamente enlaces de Twitter y Facebook a tus videos. Estos botones solo son visibles cuando el usuario coloca el mouse sobre el video. Puedes usarlo para agregar cualquier otro canal de redes sociales también..

Para usar este código abreviado, todo lo que deberá hacer es agregar la ID del video de YouTube en el código abreviado de la siguiente manera:

[wpb-yt video = "qzOOy1tWBCg"]

Puede obtener el ID de video de YouTube de la cadena de URL. Me gusta esto:

Ahora, cuando agrega un video, podrá ver sus videos de YouTube y enlaces de texto sin formato para compartir el video en Facebook o Twitter. Notarás que estos enlaces no tienen ningún estilo..

Así que vamos a diseñar estos enlaces para crear botones, para que se vea un poco mejor. También esconderemos estos botones y los haremos aparecer solo cuando un usuario toma su mouse en el contenedor de video. Para hacer esto, agregue el siguiente CSS a la hoja de estilo de su tema infantil.

 # share-video-overlay position: relative; derecha: 40px; arriba: -190px; tipo de estilo de lista: ninguno; bloqueo de pantalla; opacidad: 0; filtro: alfa (opacidad = 0); -webkit-transición: opacidad .4s, top .25s; -moz-transición: opacidad .4s, top .25s; -o-transición: opacidad .4s, top .25s; transición: opacidad .4s, top .25s; índice z: 500;  # share-video-overlay: hover opacity: 1; filtro: alfa (opacidad = 100);  .share-video-overlay li margen: 5px 0px 5px 0px;  #facebook color: #ffffff; color de fondo: # 3e5ea1; ancho: 70px; relleno: 5px;  .facebook a: enlace, .facebook a: activo, .facebook a: visitó color: #fff; texto-decoración: ninguno;  #twitter background-color: # 00a6d4; ancho: 70px; relleno: 5px;  .twitter a, .twitter a: enlace, .twitter a: activo, .twitter a: visitado, .twitter a: hover color: #FFF; texto-decoración: ninguno;

Eso es todo. Ahora deberías tener botones de compartir superpuestos en tus videos de YouTube en WordPress.

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

Después de publicar este artículo, muchos de nuestros lectores preguntaron cómo podría modificarse este código para que funcione con las listas de reproducción de YouTube y los videos. Si integras videos de YouTube y listas de reproducción en tu sitio de WordPress, deberías usar este código en su lugar.

 / * * Botones de superposición de recursos compartidos de WPBeginner * en Videos y listas de reproducción de YouTube * / function wpb_yt_buttons ($ atts) // Obtenga los identificadores de video y lista de reproducción del extracto de shortcode (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Verifique si una identificación de la lista de reproducción se proporciona con el código corto if (! $ Playlist == "): // Mostrar la lista de reproducción del video $ string = ''; // Agregar el botón de Facebook $ string. = 'Facebook
'; // Añadir botón de Twitter $ cadena. = 'Pío
'; // Cerrar video string $ string. = ''; // Si no se proporciona una ID de lista de reproducción, de lo contrario: // Mostrar video $ cadena. = ''; // Añadir botón de Facebook $ cadena. = ' Facebook
'; // Añadir botón de Twitter $ cadena. = 'Pío
'; // Cerrar video string $ string. = ''; terminara si; // Retorno de salida return $ cadena;  // Añadir el shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Usando el código anterior también puede agregar una lista de reproducción con botones de 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 este:

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

Puede obtener sus ID de video y de lista de reproducción visitando la lista de reproducción en YouTube y copiando la ID de lista desde la URL, de esta manera:

Agregar WordPress Post Link en Share Overlay Button en YouTube Videos

Después de que publicamos este artículo, algunos de nuestros usuarios pidieron que les gustaría que los botones de compartir compartieran el enlace de su publicación de WordPress en lugar del enlace del video de YouTube. Para hacerlo, debe reemplazar la URL del video en los botones de compartir con el enlace permanente de la publicación de WordPress. Utilice este código en sus funciones.php o complemento específico del sitio:

 /// Función de botones de superposición de compartir de YouTube de WPBeginner wpb_yt_buttons ($ atts) // Obtener el ID de video del extracto de shortcode (shortcode_atts (array ('video' => ",, $ atts)); // Display video $ string = ' '; // Obtener publicación permalink y codificar URL $ permalink_encoded = urlencode (get_permalink ()); // Agregar el botón de compartir de Facebook $ cadena. =' Facebook
'; // Añadir botón de Tweet $ cadena. = 'Pío
'; // Cerrar video string $ string. = ''; // Retorno de salida return $ cadena;  // Añadir el 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 con el complemento FitVids jQuery. También puede desactivar los videos relacionados que aparecen al final del video. o incluso crear imágenes destacadas de miniaturas de videos de YouTube.

Esperamos que este artículo le haya ayudado a agregar botones compartidos personalizados como superposición en los videos de YouTube en WordPress. Háganos saber qué canales de redes sociales está planeando agregar en sus videos dejando un comentario a continuación..

« Cómo agregar preguntas de seguridad a la pantalla de inicio de sesión de WordPress Cómo agregar un elemento del menú de enlaces cortos en la barra de administración de WordPress »