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

Comparteme :

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

Demostración

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 (bloguero-tutorial.blogspot.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>

</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 celeste 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.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

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

Comparte