Imagen y Vídeo en los Comentarios de tu Blog

Aquí te explico cómo visualizar la imagen y vídeo en los comentarios de tu blog. Ya sea si usas Blogger o WordPress y sin plugin. Fácil y rápido de aplicar.

¡Hola! soy Gabriela de peengler.com. En esta entrada quiero que sepas que es posible mostrar imágenes y videos en los comentarios sin necesidad de usar un plugin ni de programar, solo necesitas ver mi vídeo tutorial para que sepas como aplicarlo correctamente.

Sin más que decir ¡Empecemos!

Imagen y vídeo en los comentarios en el blog

Clic en la imagen para ver el vídeo ↑ en YouTube

Código para visualizar imagen y vídeo en los comentarios en el blog

Copia y pega el siguiente código:


<script>//<![CDATA[
!function(){for(var a=/(\[img\])?((http:|https:)?\/\/\S*?\.(jpg|gif|png|bmp|jpeg]))(\[\/img\])?/gi,b=/(\[vid\])?http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?‌​[\w\?‌​=]*)?(\[\/vid\])?/gi,c=/(\[vid\])?(http:|https:)?\/\/(vimeo.com)\/([0-9]*)(\[\/vid\])?/gi,d=document.querySelectorAll(".comment-content"),e=0;e<d.length;e++){for(var f=d[e].getElementsByTagName("a"),g=0;g<f.length;g++)if(f[g].href.match(a)||f[g].href.match(b)||f[g].href.match(c)){var h=document.createElement("span");h.innerHTML=f[g].href;var i=f[g];i.parentNode.insertBefore(h,i),f[g].href="",f[g].innerHTML=""}var j=d[e].innerHTML;j=j.replace(a,'<img style="max-width: 100%; height: auto;display: blocK;margin: 10px auto;" src="$2"" alt=""/>'),j=j.replace(b,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe></div>'),j=j.replace(c,'<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;overflow:hidden;margin:20px auto;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="https://player.vimeo.com/video/$4" frameborder="0" allowfullscreen></iframe></div>'),d[e].innerHTML=j}}();
//]]></script>

Luego guardas los cambios.

Te en cuenta, que con este código solo se aceptan imágenes con formato:

  • Jpg.
  • Gif.
  • Png.
  • Bmp.
  • Jpeg.

Además, puedes publicar vídeos de las siguientes páginas: YouTube y Vimeo.

¿Cómo evitar los comentarios de SPAM en el blog?

Si permites mostrar estos archivos en tus comentarios, lo más seguro es que te lleguen comentarios spam (no deseados) en tu blog. Para evitarlo, te recomiendo que actives la Moderación de comentarios.

En Blogger te ubicas en: Configuración > Comentarios > Moderación de comentarios: seleccionas siempre.

En WordPress te vas a: Ajustes > Comentarios > Seleccionar: El comentario debe aprobarse manualmente.

Con esto mantienes un control del SPAM y recuerda ir a la sección de comentarios para aprobar o eliminarlo.

Si quieres saber más sobre los comentarios en Blogger: Clic Aquí

En conclusión

Vez que, si es posible mostrar imagen y vídeo en los comentarios 😀 y sin plugin, que es lo mejor.  La verdad es que se ven geniales, ya es cuestión de decidir si aplicarlo o no.

Personalmente no lo voy a colocar, porque no quiero que mi página se ralentice más, pero si tu sitio es educativo, personal o hobbies. Creo que te puede interesar.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Citu:

Gracias por le tutorial, pero dejo mis comentarios como están. Te mando un beso

Responder
JLO:

Esto te lo pedi yo una vez! jaja… Buenísimo y parece fácil. No soy de tocar la plantilla pero por vos y tu dedicación lo voy a hacer ja. Después te digo como me fue! Saludos.

Responder
JLO:

Lo probé y anda muy bien el gadget. En cuanto pueda lo lleno de cosas al blog en los comentarios jaja…. Gracias Gabriela!

Responder
    Gabriela Laya:

    Me alegro de que te funcione, tambien lo probé jajaja es genial la verdad

    Responder
Elrincondemonica05:

Hola guapa, muchas gracias por tu post, siempre aprendo cosas nuevas para mejorar mi blog. Feliz día. Besitossss

Responder
Maria Eugenia ARIAS LOZANO:

No sabía que se podía hacer eso en los comentarios, pero como bien dices, ralentiza. Buen día

Responder
Asunción Artal:

No conocía esta opción, muy interesante. Muchas gracias!!

Responder
Aimee:

No tenia ni idea como moderar comentarios, aunque es raro el que me llega de spam, pero es bueno saber el tip

Responder
Pasando Página Blog:

Hola, Gabriela. Muchas gracias por los tips. Yo rara vez coloco vídeos pero imágenes y gif casi siempre uso, no sé, es como poner mis reacciones a las lecturas en momentos determinados.

Responder
Joanna:

Muy interesante, no lo sabía. Gracias por compartir, guapa.

Besos

Responder
Miss Bridgerton:

Hola,
Como siempre una entrada muy instructiva, gracias por la información.
Besos desde Promesas de Amor, nos leemos.

Responder
Yomi MR:

Holaaa, aaahhh no sabía lo de las imágenes y vídeos en los comentarios, voy a guardarme el código para algún día jajaja, besos :3

Responder
Kinga:

Me gustó tu tutorial ❤

Responder