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>
//<![CDATA[
// Insertar im?genes y videos en los comentarios (ciudadblogger.com)
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/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>

Debajo 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�rmino embed. 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.