Ver imágenes y vídeos en los comentarios de Blogger

Ya en el pasado habíamos publicado varios tutoriales en los que mostrábamos como visualizar imágenes y vídeos en los comentarios de Blogger pero en aquella ocasión (año 2012) el script publicado hacía uso de jQuery y era mucho más pesado pero gracias a Oloman hoy tenemos un script más ligero que ocupa poco espacio y reconoce de forma automática las URL de las imágenes y los vídeos de YouTube y Vimeo.

Ver imágenes y vídeos en los comentarios de Blogger

Los pasos a seguir son muy sencillos, solo debes ir a Plantilla, Editar HTML (pulsa Ctrl + F para que te aparezca el buscador) y busca la etiqueta </body> después agrega lo siguiente justo arriba del anterior 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>

Ahora solo guarda los cambios; con ello cada vez que un usuario de tu blog comente con la URL de una imagen o un vídeo se mostrará automáticamente la respectiva imagen o vídeo.

Un vídeo en un comentario de Blogger se ve de la siguiente manera:

vídeos en los comentarios de Blogger

El impacto en la carga del blog es mínima así que recomendamos instalar esta muy útil función en sus blogs 😉