Imágenes y Videos en Comentarios de BLOGGER

Muchas veces queremos decir algo y las palabras no nos son suficientes, hay sentimientos o sensaciones que se expresan mucho mejor con una imagen o un video. Por este motivo en este post te enseñaré a habilitar la función de poner imagenes y videos en los comentarios de tu blog!

Este truco es bastante bueno, saque la idea de un sitio de anuncios clasificados e investigando logré llegar a ver que podía funcionar correctamente en blogger.

Lo primero que tienes que hacer es agregar este código antes del cierre de la etiqueta body de tu plantilla:
<script> //<\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>"); sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>"); sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>"); sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>"); sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>"); document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder'); //]]> </script> <style> <!-- #comment-holder .img-comentarios, #comment-holder i[rel="image"] { max-width: 450px; /* Ancho máximo de las imágenes */ width: auto; height: auto; display: block; border: 5px solid #FFF; /* Borde de las imágenes */ margin: 0 auto; padding: 0; box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */ } #comment-holder .vid-comentarios { width: 450px; /* Ancho del video */ height: 253px; /* Alto dle video */ display: block; margin: 0 auto; padding: 0; border: 5px solid #FFF; /* Borde del video */ box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */ } --> </style>

Con el simple hecho de agregar este código ya habrás habilitado la función de comentarios con imágenes y videos

Ahora para agregar una imágen o video en un comentario sólo debes hacer lo siguiente:

Imágenes:
[img]aqui-va-la-url-de-la-imagen[/img]

Videos:
[video]aqui-va-la-url-del-video-youtube-o-vimeo[/video]

Como vez, sólo debes de colocar la url del video o imagen entre las etiquetas y listo!


Una imagen del truco probado en este mismo blog:

A tener en cuenta:

* Este truco te funcionará solo si tu plantilla tiene habilitada la opción de comentarios anidados, o sea si luego de cada comentario te aparece la opción de responder. (Para habilitar esto ir a configuración >> otros >> Establecer feed "completo"
* Los comentarios se deben mostrar en la propia página, no en una ventana emergente para que este truco funcione.
* El agregar muchos videos o imágenes en los comentarios puede enlentecer un poco la carga de la página, pero vale la penta pues el resultado es genial.
* En cuanto a las imágenes puedes estar subida a cualquier sitio, pero los comentarios sólo pueden estar o en youtube o en viemeo para que se vean.