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

14 de julio de 2014 58 comentarios ,
¿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.




Cambiar el enlace de la cabecera del blog

10 de julio de 2014 9 comentarios ,
Hay quienes crean varios blogs que son parte de un blog principal y desean que al dar click a la cabecera no los dirija a la portada, sino que los lleve a otro blog. Lo que aprenderemos en esta entrada será a cambiar el enlace de la cabecera para que abra otra página, ya sea otro blog, una página estática, o cualquier otra dirección.

Por ejemplo, en este blog de pruebas, si das click en el título del blog abrirá u̶n̶ ̶m̶a̶g̶n̶í̶f̶i̶c̶o̶ ̶y̶ ̶e̶s̶t̶u̶p̶e̶n̶d̶o̶ otro blog.

Para conseguir lo antes mencionado debemos ir a Plantilla | Edición de HTML.
Si el título de tu blog es una imagen busca este código:
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
Cambia todo lo que está en color rojo por esto:
href='URL del enlace'

Ahí deberás agregar el link del blog o la página que quieras enlazar.

Si no tuvieras una imagen en la cabecera, o sea, que el título del tu blog sea sólo texto, entonces busca este código:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
De igual manera cambia lo que está en color rojo por esto:
href='URL del enlace'

En el caso de quienes en el título sólo tienen texto, sabrán que cuando se está en la portada el título no tiene enlace, únicamente cuando se entra a un post. Si quisieras que el título de tu blog tenga enlace aun estando en la portada entonces cambia el código anterior por esto:
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a href='URL del enlace'><data:title/></a>
<b:else/>
<a href='URL del enlace'><data:title/></a>
</b:if>
</b:includable>


Así de simple podrás cambiar el enlace de la cabecera y hacer que al dar click no muestre la portada del blog, sino que abra otro blog.
 
Ir Arriba Ir Abajo
I Ciudad Blogger