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

¿Te ha pasado que quieres decir algo pero las palabras no son suficientes? A veces eso pasa cuando queremos comentar algo en algún blog, quizá un meme pueda resumir nuestra opinión, o un video pueda complementar nuestro comentario. Por desgracia el formulario de comentarios de Blogger no incluye la opción de subir fotos o incrustar vídeos, pero que Blogger no lo habilite no significa que no se pueda.

Lo que veremos en esta entrada es justamente eso, cómo insertar imágenes y vídeos en los comentarios del blog de una manera tan sencilla que sólo requiere de un paso.
El método que usaremos es similar a lo que hacemos cuando agregamos emoticons en los comentarios, de manera que lo que escribimos en el comentario se reemplaza por otro código, en este caso por el HTML necesario para mostrar las imágenes y los vídeos.

Puedes verlo funcionando en en este blog de pruebas.

Para insertar una imagen usa este código:

[img]URL de la imagen[/img]

Para insertar un video de YouTube o Vimeo usa este código:

[video]URL del video[/video]

Asombroso, ¿no? Y tal como lo prometí, la instalación es de un solo paso. Únicamente entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:

<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>
 

ebajo del script verás que también hemos colocado unos estilos, estos estilos son para darle un poco de personalización a las imágenes y a los vídeos que se mostrarán en los comentarios, como el borde, la sombra, y el tamaño. En color verde se especifica a qué corresponde cada una de esas áreas. Por supuesto puedes añadir más estilos si lo deseas.

Para que tus lectores sepan que pueden agregar imágenes y vídeos puedes poner un aviso de ello, esto puedes hacerlo desde Configuración | Entradas y comentarios | Mensaje del formulario de comentarios.

Cómo insertar imágenes y videos
En el caso de las imágenes, tú y los comentaristas deberán usar este código:

[img]URL de la imagen[/img]

Y en el caso de los vídeos, tanto de YouTube o Vimeo se usará este código:

[video]URL del video[/video]

En ambos casos deberás poner la URL de la imagen (o el video) donde corresponde.


Cómo obtener la URL de los videos

En YouTube puedes copiar la URL que aparece en la barra de direcciones del navegador cuando te encuentres viendo un video.
También puedes usar la URL que aparece en "Comparte este video".
O también puedes copiar la URL que aparece en el código de inserción dentro de "Insertar vínculo".
Todas estas URLs son válidas para usarse en los comentarios:

https://www.youtube.com/watch?v=GfxAEl15pDs

http://youtu.be/GfxAEl15pDs

https://www.youtube.com/embed/GfxAEl15pDs

Es decir, las que tienen el término watch, las que tienen el acortador youtu.be, y las que incluyen el términoembed. Cualquiera de ellas funcionará.

Consideraciones finales.

• Este método es únicamente para plantillas que tengan comentarios anidados, o sea, con opción de "Responder". Si tu blog no tiene la opción de "Responder" no funcionará.
• Es necesario que los comentarios se muestren debajo de la entrada, y no en ventana emergente, página completa, etc.
• Se admiten todos los formatos de imágenes convencionales (JPG, PNG, GIF).
• En el caso de los vídeos se aceptan vídeos de YouTube y Vimeo.
• Ten en cuenta que la inclusión de imágenes y vídeos en los comentarios pueden reducir la velocidad de carga del blog.

Este tipo de trucos puede resultar muy atractivo y útil en muchos blogs, pero siempre con moderación para no abusar con el número de imágenes y vídeos que podrían ralentizar la carga. Si se le da un buen uso, este tipo de opciones podría mejorar la experiencia del lector al momento de interactuar con el autor y con los demás comentaristas del blog.