JMiur [E]

A veces, tenemos la costumbre de eliminar cosas de la plantilla porque no sabemos que son, porque nos parece que "sobran" y el resultado final es impredecible. No hay problema, es parte del aprendizaje; puede hacerse siempre que probemos y luego, llegado el caso, sepamos como volver a poner todo en su lugar.

Uno de esos códigos "perturbadores" lo encontramos en el <head>, casi al inicio de la plantilla:
<b:include data='blog' name='all-head-content'/>
Muchas consultas respecto a la imposibilidad de acceder a los feeds de nuestro sitio terminan resolviéndose cuando se agrega esa línea que hemos borrado o que la plantilla que descargamos no tenía ya que lo que hace es incluir una serie de etiquetas extras.

Estas, especifican el tipo de codificación, un viejo atributo de Microsoft que no se utiliza y una "marca" que indica al creador de la página web o sea, ellos:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
Luego, un favicon por defecto que es el que causa problemas si el nuestro lo colocamos antes de esa instrucción; una serie de etiquetas link que asocian nuestro perfil, el atributo canonical, etc:
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
<link rel="me" href="http://www.blogger.com/profile/xxxxxxxxxx" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link href='xxxxxxxxxx' rel='canonical'/>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=xxxxxxxxxx" />
Y por últlimo, las etiquetas de los feeds:
<link rel="alternate" type="application/atom+xml" title="miTitulo - Atom" href="http://miblog.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="miTitulo - RSS" href="http://miblog.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="miTitulo - Atom" href="http://www.blogger.com/feeds/xxxxxxxxxx/posts/default" />
Todo eso va cambiando con el tiempo, es decir, Blogger va agregando o modificando algunas de esas etiquetas y si bien podemos colocarlas manualmente, lo mejor es dejar que ellos se encarguen de eso. Por ejemplo, recientemente, le han agregado una nueva etiqueta que podemos ver en las páginas individuales si es que en esa entrada hemos agregado alguna imagen:
<link rel="image_src" href="URL_imagen" />
Esta etiqueta es la que permite que, cuando alguien comparte un enlace de nuestro blog en Facebook, este, contenga la imagen en miniatura correpondiente a esa entrada:


Es que Facebook posee una serie de etiquetas específicas que podríamos utilizar aunque en Blogger es casi imposible. Algunas, tales como las title y description son las estándares pero otras no; por ejemplo, hay una serie de etiquetas que permitirían definir el tipo de medio, algo muy interesante para compartir audio o video:
<meta name="medium" content="tipo_de_dato" />
donde el tipo_de_dato puede ser audio, image,video, news, blog o mult
Por ejemplo, para compartir videos podríamos usar esto:
<link rel="video_src" href="URL_video"/>
<link rel="image_src" href="URL_imagen" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="video_height" content="valor" />
<meta name="video_width" content="valor" />
Si pudiéramos identificar los videos, incluso, sería posible solicitar que Facebok nos permitiera utilizar nuestro propio reproductor e incrustralo directamente tal como lo hacen sitios como YouTube.

Sueños al margen, el hecho que haya una etiqueta link que contiene la URL de la primera imagen de las entradas podría llegar a ser útil aunque no sé muy bien para qué y eso queda librado a la imaginación de quien quiera explorarlo.

Usando JavaScript es bastante sencillo leerla, por ejemplo, esta función devolverá la URL de la imagen o una cadena vacía.
function getImageSRC()
var laIMG = '';
var links = document.getElementsByTagName('link');
for ( var i = 0; i < links.length; i ++ ) {
if(links[i].rel=='image_src') { laIMG = links[i].href; }
}
return laIMG;
}

44 comentarios:

LeonardoN  

Gracias por responder.
Si no entendí mal, es sólo para Facebook.

Responder
Manuel de la Fuente  

Hola, JMiur. Yo quité esa etiqueta hace siglos y nunca he tenido problemas para enviar las entradas a Facebook; siempre salen con el resumen de la entrada y me da la opción de escoger cuál de las imágenes de la misma quiero que aparezca como miniatura.

La verdad es que nunca he tenido problemas de ningún tipo, o por lo menos no los he detectado. :S

Responder
MALINA  

Hola JMiur, vengo en busca de ayuda y consejo :)

Me gustaría incluir algún visualizador/cargador de imágenes que pueda funcionarme de forma genérica para las entradas de mi blog de gráficos.

Es decir, en vez de cargar una a una las imágenes de forma normal, que alarga muchisimo la entrada, que todas estén dentro de una ventanita con controles.
Supongo que hay multitud de modelos, y creo recordar haber visto muchas en tu sitio, pero ahora mismo no se donde las tienes ubicadas y por el indice no las he encontrado.

Me puedes facilitar donde tienes algunos ejemplos para implantar?
voy buscando que sean sencillas y prácticas, me recomiendas alguna?

Un abrazote!

MaLiNa

Responder
Manfenix  

Hola JMiur, he buscado la etiqueta <link rel="image_src" href="URL_imagen" /> en mi plantilla y no está.
La ausencia de ésta se corresponde por la ausencia de la imagen miniatura en Facebook.
Dónde exactamente debería colocar tal etiqueta?
Saludos

Responder
JMiur  

LeonardoN: Es un dato extra al que Blogegr nos da acceso. como tal, puede ser usado de diferentes formas

Manuel de la Fuente: No he dicho que si la etiqueta no está haya problemas. Eso, dependerá de la forma en que está armada la plantilla y de como, el API de Facebook, interpreta las imágenes que encuentra. Esas etiquetas son la forma de controlar con exactitud la forma de enviar esa información.

MALINA: Sí, hay muchisimos modelos, desde galerías hasta ventanas modales que sería, me parece, la forma de aliviar y simplificar eso. Yo uso LightWindow pero, una de las más livianas y sencillas es lytebox. Gem@ tiene varias entradas donde habla de esa librería y ahi puedes ver algunos ejemplos extras.

Manfenix: No, la etiqueta no está en la plantilla, es agregada de forma automátca por Blogger mismo mediante esta otra:
<b:include data='blog' name='all-head-content'/>
En tu blog está, si miras el código fuente de una entrada individual, la verás. Por ejemplo, dice esto:
<link rel="image_src" href="http://2.bp.blogspot.com/_1zWhg0gVkuI/S_Rni3mwZeI/AAAAAAAACSY/Vucx4ASy98M/s72-c/Lab+An%C3%A1lisis.jpg" />

Responder
Manfenix  

Ahora entiendo. Lo comprobé compartiendo una entrada con una imágen inicial.
Erróneamente suponía que también el contenedor del reproductor de YT, en el caso de entradas con videos múltiples, tendría su miniatura en facebook.
En ese caso no se muestra ninguna imagen.
Y en el caso de una imagen que sirve de enlace para lightwindow, se muestra una imagen miniatura aleatoria:
Imagen en Facebook
Gracias JMiur, :)

Responder
MALINA  

Gracias!
magnifica tu respuesta :)
es todo lo que necesitaba para investigar.

Abrazotes!

Responder
JMiur  

Manfenix: Exacto. Lo que hace, evidentemente, es tomar la primera imagen que encuentra en la etiqueta IMG, sea la que sea, Es algo automático.

Malina: Espero que sean útiles :D

Responder
k_nelita  

Hola JM, seguramente me debe faltar esa etiqueta porque en Facebook a veces me pone la imagen correcta y otras me da a elegir entre unas que nada tienen que ver con la entrada, imagenes de la sidebar por ejemplo, cualquier cosa... cual es la que debo poner y donde? No entendí bien :S

Y otra cosa ya que estoy, como le puedo sacar un borde raro que sale en la imagen de mi firma en las entradas de Te Propongo? En la otra plantilla no se veía ese margen alrededor de la firma dentro de las entradas, será por el fondo blanco?

Un saludo ;)

Responder
JMiur  

La etiqueta está, por ejemplo en una entrada se lee esto en el código fuente:
<link rel="image_src" href="http://1.bp.blogspot.com/_8UTObT16lLc/S_XiuU2P1lI/AAAAAAAACbY/kyzJQ6nVLSc/s72-c/perrito.jpg" />
Si compartis esa entrada (la del perrito) vasa ver la miniatura. En cambio si comparies otra (por ejemplo la anterior) que no tiene imágenes, te dará a elegir entre el resto que encuentre como los íconos superiores o la firma.

Todas las imágenes de los posts de esa plantilla tienen un borde:
.post img, table.tr-caption-container {
border:1px solid #CCC;
}
veo que en la firma colocas border='0' pero, eso no servirá para quitar el borde porque sólo se aplica a las imágenes que son enlaces; deberías cambair eso y poner:
style='border: none;'

Responder
k_nelita  

Gracias JM, es cierto si no hay imagen en la entrada me muestra cualquier imagen que encuentre aunque sea publicidad :) O la firma, y si hay video tampoco lo muestra.

Y con respecto al borde de mi firma, traté de sacarlo poniendo none en el código de la imagen pero nones ja ja :)
Tuve que cambiar la parte que decís del css de la plantilla, ahí si le puse border: none, y ahora no muestra borde en ninguna imagen incluida la firma :D
Chas tenkius ;)

Responder
JMiur  

Perfecto. Esa era una solucion drástica pero, vale :D

Responder
LuzdeLuna  

Hola JMiur! Cediendo a la tentación de compartir mi blog en facebook, me vi en la tortura de abrir una cuenta y tratar de ver en que consistía este nuevo juguete. Pero creo que nos tenemos una idéntica antipatía! :S
No me permite importar entradas de mi blog diciendo "importación fallida"(o algo asi) que no encuentra ni mi url ni mi feed. Luego de noche de insomnio y varias...:X al margen, le di al feed validator, que me regó con miles de problemas, pero al final consintió en darme un código que validaba mi feed. Inservible!!!!
Pués naaaa!, acá ando sin poder meter ni una de mis entraditas en este bendito facebook |O me sigue diciendo que no existo!
no sé si alegrarme o lamentarme!!
Alguna idea porqué pasa esto?
Un abrazo

Responder
JMiur  

¿Qué aplicación estás usando para eso? Yo sugeriría usar RSS Graffiti que es sencilla y funciona muy bien:
http://www.facebook.com/RSS.Graffiti

Ahí, una vez que autorizas (son dos autorizaciones), colocas la dirección ( ADD FEED ) que puede ser la URL de tu blog o la de los feeds ya que, automatícamente, detectará ambas:

http://comarcadelosespiritus.blogspot.com/
http://comarcadelosespiritus.blogspot.com/feeds/posts/default

No deberías tener problemas y deberías ver algo como muestra esta captura.

Responder
LuzdeLuna  

:P No sé porqué me sigo sorprendiendo si ya sé que sos un genio!!!!!Para todo tenés la respuesta y seguro la solución. Gracias GRACIAS!!!!mi primera entrada en el muro!ja! ya está!
Dos abrazotes, no uno, DOS!!!

Responder
LuzdeLuna  

Disculpame... pero me quedó otra cosa por decirte. Cómo? con la cantidad de preguntas y complicaciones que todos te llenamos diariamente, te das tiempo, para responder, probar y hasta para hacer capturas (y subirlas) con lo que estamos varados en nuestros blog??? y encima cada noche, truene o llueva, encontramos tus nuevas entradas!! es para admirar y nuevamente darte las gracias.

Responder
JMiur  

Gracias, Luz, no fue nada. Es un placer ayudarte :-)

Responder
¶ LuisMigueL ¶  

hola JMiur tengo un problema cuando en mi blog pongo compartir por facebook sale todo menos la descripcion de la entrada falta algun scryp?

Responder
JMiur  

¿En cuál de tus blogs?

Responder
¶ LuisMigueL ¶  

Hola JMiur perdon por la tardanza en este blog biblioteca medica espero tu ayuda gracias

Responder
JMiur  

Pués no, está todo bien. Lo que deberías ahacer es incluir tambien una etiqueta META con la descripción del blog. Fíjate en esta entrada. El resultado es el que verías en este mismo blog con ese tipo de botón de compartir.

Responder
¶ LuisMigueL ¶  

Hola JMiur soy de nuevo yo intente poniendo el codigo que me diste pero sigue sin mostrar la descripcion de mi post aca te dejo una imagen que saque te lo marque con un recuadro rojo http://img340.imageshack.us/img340/7611/dibujodgc.jpg gracias.

Responder
¶ LuisMigueL ¶  

me olvidaba la pagina es esta http://www.biblioteca-medica.com.ar/

Responder
JMiur  

Lo que veo ahora es que muestra la descripción que has colocado en la etiqueta META; es lo mismo que muestra en este blog si usas ese botón. La única diferencia es que en esa etiqueta META yo le he agregado el título tal como mostraba el post que te sugerí ver.

No veo que pueda hacerse nada más que eso.

Responder
¶ LuisMigueL ¶  

JMiur gracias.

Responder
JMiur  

Sé que hay algo llamado Open Graph Protocol que es un sistema de etiquetas especialmente pensadas para Facebook pero, confieso que aún no las he mirado; tal vez, por ese lado haya alguna clase de solución o sirvan para mejorar algo.

Responder
Diario Maracaibo  

porque cuando comparto un articulo de Blogger en facebook, la descripción no la da como un "sumario" sino que da la descripción del blog?? he visto que cuando comparto otras paginas, da una descripción de la nota, no la descripción de la pagina...

Responder
JMiur  

Es l oque ocurre con los blogs de Blogger; no veo que haya nada que pueda hacerse al respecto.

Responder
Sethorus (Universo Física)  

JMiur mi problema es que cuando comparto una entrada de mi blog en Facebook, no sale el resumen de la entrada, si no que salen los comentarios, te agradecería demasiado si me ayudas con el problema.

Responder
JMiur  

Los botones de compartir de Blogger no envian resúmenes de las entradas.

En tu caso, en las páginas individuales debe haber un error porque se envian direcciones nulas; en el código de losenlaces se lee algo de wibiya asi que supongo que se trata de la configuración de esa barra.

En el home pasa eso que dices. Desconozco el motivo.

Responder
JuegosBaratos  

Hola.
Recientemente he instalado en mi codigo un pack de botones para compartir las entradas en las redes sociales.
Ocurre que funciona, pero lo que comparte es el título y descripción de mi blog, no la entrada por si misma.

Este es el blog: http://www.juegos-baratos.com/

A ver si alguien me puede ayudar. Muchas gracias.

Responder
JMiur  

Tendrás que fijarte en el código que utiliza porque no estás enviando el título de cada post. Fíajete en al ayuda de addthis

Responder
JuegosBaratos  

Gracias por contestar JMiur; ya vi la ayuda de addthis, solo que no sé cómo pasar dinámicamente la url y el título del post concreto. El ejemplo que ponen en la ayuda es:
a class="addthis_button" addthis:url="http://example.com" addthis:title="An excellent website"

entiendo que en lugar de "http://example.com" tengo que poner alguna variable del estilo post.url o algo así, pero no doy exactamente con la solución :(

Responder
JMiur  

No sé cuál es el código que te sugieren pero, por lo que muestras, debería ser algo así:

<a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>

Responder
JuegosBaratos  

Gracias por la respuesta JM, lo he probado y me funciona en Twitter pero en Facebook me sigue saliendo la url del blog en lugar de la entrada.
Tiene alguna configuración especial?

Muchas gracias, me estás ayudando mucho.

Responder
JMiur  

Lo desconozco porque como te dije, no he usado nucna ese servicio.

Responder
HaCk CrAcK  

Me re sirvio esta entrada, ya que facebook me agrega cualquier imagen menos las del post, me fije si tenia esa meta en el codigo fuente de los post, pero no aparecian, por eso agarraba una imagen cualquiera de la plantilla. Entonces lo que hice fue agregar manualmente un meta y el link rel con la imagen que queria que se muestre, asi que problema solucionado. Mil gracias, me salvaste :D

Pd: Tendrias que poner un botoncito de donar dinero por paypal, para asi poder agradecer todo el esfuerzo que le haces para que este blog siga dia a dia, y ademas seria como una gratificacion para vos, valorando todo el gran trabajo que le haces.

Responder
Vietnamitas en Madrid  

Muchas gracias!!!
Vietnamitas en Madrid

Responder
Cinthya Nataly Condori Hinojosa  

Mj..necesito tu ayuda!! me canse de averiguar soy nueva en esto del blog www.edificacionpersonal.blogspot.com y mi problema es que puse a mis entradas unos botones para compartirlas en facebook..el problema es uqe al hacerlo...no sale la imagen que pongo en la entrada sino salee mi foto de perfil de blogger..no sé cómo arreglar esto TE AGRADECERIA UN MONTONNNN SI ME DIERAS UNA RESPUESTA!!!

Responder
JMiur  

Toma esa imagen ya que es la primera etiqueta IMG que hay en el blog ya que tienes una sidebar a la izquierda y las páginas se leen de arriba hacia abajo y de izquierda a derecha.

De todas maneras, en Blogger no hay ninguna forma de controlar cuál es la imagen a ser mostrada; carece de esa posibilidad.

Responder
Nito Garcia  

por favor me gustaria que le exaras un vistazo a mi blog referente a lo codigos meta ya que es una plantilla personalizada y creo que no esta bien misterios-ovni.blogspot.com mi correo es er_juanito_@hotmail.com gracias por tu ayuda

Responder
JMiur  

Allí no se ve nada extraño, la etiqueta a la que ahce referencia la entrada se ve que existe. No sé si notas algo mal.

Responder
Eddy Mogollon  

JM tengo este problema con mis feeds y tengo esa linea incluida la

sin embargo se me ve asi: http://www.pierdopeso.net/feeds/posts/default

que podria ser?

por otro saliendo dle tema cuando intento compartir un enlace de mi pagina por medio de facebook, sale la minuatura la cual pero no sale ningna descripcion, solo "DESCRIPTION HERE" yo pense que era las metatags, y las modifique pero nada ha pasado aun me gustaria mucho si me podes ayudar!

JMiur  

¿Qué es lo que notas de extraño en ese feed? No se ve nada raro, es normal; no sé con que navegador lo estás mirando pero, sea el que sea se ve correcto.

Los botones para compartir de Blogger no parecen estar funcionando, en cambio, el de AddThis lo hace bien.

No veo una etiqueta meta description en tu blog y tampoco ese texto DESCRIPTION HERE

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR