JMiur [E]

Insertar las etiquetas META correctas para que las cosas que se comparten de nuestro blog en Facebook se vean de modo más o menos aceptable no es tan difícil, basta agregarlas y aceptar que en Blogger existen algunas limitaciones que nos impiden personalizar esa parte y obtener el máximo beneficio.

Todas esas etiquetas extras son optativas y se basan en el protocolo Open Graph.

Lo primero que debemos hacer es verificar que la etiqueta HTML de nuestra plantilla, tenga agregado lo siguiente; en las plantillas comunes:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
y en las nuevas plantillas:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://opengraphprotocol.org/schema/'>
Luego, en el head, antes de <b:include data='blog' name='all-head-content'/>, agregamis los datos generales:
<meta content='EL NOMBRE DEL SITIO' property='og:site_name'/>
<meta content='EL NOMBRE DEL AUTOR' property='og:author'/>
Otros dos datos extras si es que usamos plugins sociales asociados con alguna aplicacion que hayamos creado:
<meta content='ID_CUENTA_FACEBOOK' property='fb:admins'/>
<meta content='ID_APLICACION' property='fb:app_id'/>
La URL de la página la colocamos con los datos de Blogger:
<meta expr:content='data:blog.url' property='og:url'/>
Por último, condicionamos los datos que restan para que difieran entre las entradas individuales y el resto de las páginas. Justamente es acá donde las posibilidades que da Blogger nos impiden optimizar las cosas al máximo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- las entradas individuales -->
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta property="og:type" content="article"/>
  <!-- 
    lamentablemente, no podemos acceder a un resumen de las entradas
    así podemos poner una descripción cualquiera o repetir el título de la entrada o mezclar ambas cosas
   -->
  <meta expr:content='data:blog.pageName + &quot;. una breve descripción del sitio&quot;' property='og:description'/>
  <!-- 
    acá debería ir la imagen que nosotros decidimos mostrar para acompañar la entrada
    pero, ese es otro dato al que no podemos acceder
   -->
<b:else/>
  <!-- cualquier otra página -->
  <meta expr:content='data:blog.title' property='og:title'/>
  <meta content='blog' property='og:type'/>
  <meta content='acá ponemos una breve descipcion de nuestro sitio' property='og:description'/>
  <meta content='URL_IMAGENxDEFECTO' property='og:image'/>
</b:if>
Eso es todo. El resultado puede ser verificado usando la herramienta URL Linter que provee el mismo Facebook. Allí, colocamos la dirección a verificar y nos mostrará si hay errores, si faltan datos o cuales son las correcciones que debemos hacer.

89 comentarios:

Matías Aravena  

Espectacular!!!

Saludos!

Responder
Leo Cesarini  

Buenisimo! resolví muchas cositas. Gracias!

Responder
MyM  

Siempre es muy interesante visitarte, JM. Tengo tantas preguntas que me gustaría hacer...voy a ir de a poco !tengo que aprender tanto).
Por ahora, te dejo un saludo y reitero mi admiración.

Responder
ARQTEKTON  

Justo iba comentar en la entrada de nuevo comment box de facebook, que esto faltaba para que no saliera el mensaje: Advertencia: no se puede acceder a http://www.arqtekton.com/2011/07/artlantis-studio-306-en-espanol.html.

Responder
Arturo  

bueno solo necesito ayuda del aqui, seria posible que hicieras un tutorial de un efecto que me interesa qes de JQUERY pero salio un script para videos, pero no le entiendo como se instala si no es mucho pedir que aqui chece el autor de vagabundia este efecto y nos de como funciona el script yo tengo blogger y bueno ps es este el dato

http://www.ajaxshake.com/plugin/ES/795/fef1055a/lightbox-jquery-para-mostrar-videos-jqvideobox.html

y el resultado es este :

http://www.emposha.com/demo/jqvideobox/

tengo horas tratando de ver como lo puedo a implantar en mi blog pero no mas no puedo, ayuda se les agradecere ,uchooo :)

Responder
JMiur  

No sé si sea posible, ya que no uso jQuery. Lo veré.

En todo caso, el script que mé parece más versatil para jQuery es shadowbox.

Responder
GoodOldLeon  

Jmiur, y si quisieramos decirle a Facebook que al momento de compartir una entrada que no tiene imagen use una predeterminada para que luego en la vista previa cuando se comparte no aparezca cualquier cosa, que deberíamos hacer? desde ya gracias como siempre :)

Responder
JMiur  

No hay forma de hacerlo porque desconocemos ese dato; no hay nada en Blogger que te permita saber si un post tiene o no tiene una imagen sí que no hay manera de condicionarlo.

Responder
VacilandoUnRap  

sabes que sinceramente nose que tengo que hacer con el ultimo codigo que muestras, tengo que pegarlo en algun lado buscarlo en mi plantilla o que tengo que hacer exactamente si esque me puedes explicar porque no me quedo nada de claro que tengo que hacer.... saludos espero que me comprendas

Responder
JMiur  

Obviamente hay que ponerlo en la plantilla y la entrada dice quñe mirar, y donde colocarlo:

Lo primero que debemos hacer es verificar que la etiqueta HTML de nuestra plantilla, tenga agregado lo siguiente ...
.......
Luego, en el head ...
.......
Por último ...
.......

Responder
MyM  

Hola JM, otra vez por aquí, es que no me gusta como se comparte mi contenido en Face ( ni las imagenes, ni el resumen ya que normalmente como resumen muestran comentarios). Mi plantilla no tiene en su etiqueta HTML ninguna de las dos condiciones que debería ( ni por antigua ni por nueva); consideré que era antigua y le agregué el código final de face xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
pero no me acepta nada ¿ Podrías decirme qué me recomendás?

Desde ya , muchas gracias

Responder
JMiur  

Si se trata del blog Letras que nacen del alma, la plantilla es de nuevo estilo; dice:

<html b:version='2' class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Así que puedes agregar eso así:

<html b:version='2' class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://opengraphprotocol.org/schema/'>

Eso, sólo ayudará a que ciertos plugins funcionen en IE pero nada más.

Lo que se ve es que tiene una etiqueta META description que sólo funciona en el home pero, deber estar condicionada para que no se vea en las paginas individuales.

Blogger no envía resúmenes de las entradas y por lo tanto, lo que detecta el plugin de Facebok o cualquier otro, es el contenido de la primera etiqueta P que tenga suficientes palabras. Por lo general es eso que ves, un comentario. Eso es lo que se explica en esta entrada

No tiene solución:

1. si no se agrega una etiqueta META description, se deberían hacer posts que comiencen siempre con la etiqueta P y verificar que sea la primera de la página y que ese texto sea lo suficientemente largo.

2. si se agrega una etiqueta META description, será el contenido de esta la que se muestre y no será un resumen de la entrada; será siempre la misma o se la puede hacer variar usando el título de la entrada pero, nada más.

Responder
MyM  

Si, JM es del Blog Letras que Nacen en el Alma ( no el de la Comunidad)Gracias por el tiempo que te has tomado y tu respuesta. Espero poder llevar algo a la práctica tus conocimientos ya que siempre cometo algún error , los de las META me tiene un poco mareada ( pero algún día lo lograré):)

Un cordial saludo.

Responder
JMiur  

Suerte, Mariela; no es tan complicado. A veces, engorroso pero es algo simple; no vas a tener problemas.

Responder
Adrián J. Messina  

Acabo de resolver un problema que se me estaba haciendo engorroso, gracias por esta entrada. Me sirvió muchísimo.
Un abrazo.

Responder
Calidad Andaluza  

Hola, tengo un problemilla con un blog. Resulta que al compartir en facebook, si es una página estática, no sale el título de la misma ni el enlace a esta al compartir. Es decir, si comparto un página estática en facebook es como si compartiera el blog.

Los artículos y en general todo Ok, menos al compartir la página.

He visto que puede ser por los condicionales, pero no doy con la tecla.
Así lo tengo:

















He probado añadir esto:







Pero no va. Por favor ¿Me puedes ayudar?

Gracias

PD: NO ADMITE ETIQUETA = meta

Responder
JMiur  

Los códigos que has tratado de agregar al comentario no se ven.

Responder
Calidad Andaluza  

Disculpa.

Así lo tengo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta content='NOMBRE BLOG' property='og:site_name'/>
<meta content='DESCRIPCION BLOG' property='og:description'/>
<meta content='IMAGEN BLOG' property='og:image'/>
<meta content='ID APP FACEBOOK' property='fb:app_id'/>
<meta content='ID ADMINISTRADOR' property='fb:admins'/>
<meta content='Blog' property='og:type'/>

He probado añadir esto:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='blog' property='og:type'/>
</b:if>

Pero no va. Por favor ¿Me puedes ayudar?

Gracias

Responder
JMiur  

Para empezar, deberías modificar lso condicionales porque puestos de ese modo, el título será el que se lea desde el primer <b:else/> ya que las páginas estáticas no son páginas individuales; debería ser algo así:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
... metas para páginas individuales .......
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
... metas para páginas estáticas .......
<b:else/>
... metas para el resto de las páginas .......
</b:if>
</b:if>

Responder
Calidad Andaluza  

Correcto! :-)
Ahora voy a intentar personalizar determinadas páginas.
Cuando lo tenga, lo pongo para todos.

Muchas gracias!

Responder
Adrián J. Messina  

Me toma bien el resumen.
Bah adelante de la primera palabra del resumen aparece el nombre de mi blog y como imagen siempre me aparece un ícono RSS.
Es posible que me tome la primera imagen de la entrada y poder quitar ese título que aparece adelante del resumen.
Hasta ahora probé con estas metas condicionadas y quedó así.
El blog es www.p-d-o.com.ar .

Gracias.

Responder
JMiur  

Al compartir una entrda veo cosas como esta captura

Se muestra la imagen de la entrada si es que Blogger tomó una (eso no puede ser controlado) y el texto es el indicado en og:description; no veo que ocurra eso que cuentas.

Responder
Adrián J. Messina  

Sí es cierto, ahora los muestra bien.
Ahora la consulta es: ¿Porqué en Google+ se muestra así?
No hay forma de modificar como se ve?
Gracias, abrazo.

Responder
Adrián J. Messina  

Perdón, la captura.
http://1.bp.blogspot.com/-yOHz8OT1Nzk/Ty6vrRBzRvI/AAAAAAAAD44/yO-RFc9BmOI/s1600/Google%2B%252B1.png

Responder
JMiur  

En Google+ no tengo la menor idea; sobre eso no he visto información.

Responder
Adrián J. Messina  

Gracias igual!

Responder
Dj Nono Molina  

Una ayuda por favor JMiur, antes compartía muchos enlaces de post de mis blogs, sin problema y me traía la imagen del mismo con opción a elegir si tenía más de una, ahora solo trae la dirección URL, sin imagen, cambió algo en Facebook o Blogger?

JMiur  

No sabría decirte si ha habido cambios. No he leido nada.

Responder
María José Moya  

JMiur, a mí me está pasando exactamente igual de lo que ha comentado Oscar Molina. En mi caso, desde hace dos o tres semanas, más o menos.

TRAS TU ENTRADA, gracias a ella conseguí poder difundir los enlaces de mi blog, con su título y una imagen (a elegir si había varias, incluso de entre la del video particular en Youtube que apareciera en el post, si lo tenía) en mi página de Facebook y otros sitios de esa red, así como en Google+, etc. (en cuanto a la descripción, aparecía una genérica, pero que no me disgustaba especialmente porque con el título del post la gente podía ya saber de qué iba la entrada).

ANTES de seguir tus recomendaciones, me desesperaba porque sólo aparecía el título y la descripción genéricos del blog, y de imagen sólo el logo del blog que tengo en la página del blog en Facebook.

Sin embargo, TRAS estos meses "felices" con el tema:

1) EN GOOGLE+ (DESDE JUSTO PRINCIPIOS DE FEBRERO):
Antes, gracias a tu entrada podía añadir mi post con su título e imagen (a elegir, si había varias en el post), y ahora, aunque sigue respetando el título del post y la descripción genérica que te comento, en cuanto a imagen sólo me da a elegir entre las imágenes que tengo en la columna de la izquierda del blog, incluidas las de RSS y marcadores sociales, a pesar de ser más pequeñas y estar más alejadas del comienzo del blog que la imágen o imágenes propias del post.

2) EN FACEBOOK (DESDE MEDIADOS DE FEBRERO, O SEA, UN PAR DE SEMANAS):
El problema es aún mucho peor y desastroso que en Google+, y es lo que más desesperada me tiene, tras el trabajo que me tomó poder entender (no por ti) y llevar a buen término tus indicaciones.

Resulta que cuando quiero añadir un enlace de mi blog en Facebook, da igual con qué navegador lo haga que siempre se queda como "cargando indefinidamente". Tras varios intentos, al final a veces con "suerte" lo único que he conseguido es que Facebook me deje añadir el enlace, pero sin imagen, título, ni descripción (ni los genéricos del blog, ni los de propiamente la entrada que quiero divulgar).

Como pasa tanta cosa en Internet y estamos por ello acostumbrados a que cada X semanas IE, Google o Facebook nos estén tocando las narices a todos, de ahí que haya estado "esperando" con paciencia a que ellos o "la ley de no tocar nada" lo arreglara sólo, pero veo que no es así (excepto un enlace que sí conseguí publicar como antaño, y que me da que fue en el período en qeu quizás Google estuvo "haciendo cambios").

Incluso parece ir a peor, porque estos días he mirando de intentar añadir un enlace mio desde el botón de marcadores del ex-Wikio, y ahí ya es el colmo: sólo deja difundir la URL sin más (ni imagen, ni descripción, ni título, de ninguna clase...).

Entre medias de todo este lio, eso sí, Blogger me ha cambiado (por narices) hace una semana (más o menos) la forma de visualización de mis COMENTARIOS, que aunque no los había personalizado, me gustaba ver abrirse su ventana con los colores anaranjados, etc. de Blogguer originales. Ahora, se abre una ventana tremenda de grande, sin ninguna estética, y todo blanco-hospital. O sea, un asco, y mejor no decir más, porque me embalo y acabaré soltando algún exabrupto, seguro.

¿Sería posible alguna posible solución o ampliación de código de esta entrada tuya para solventar el nuevo "reto-problema" que nos pone Google, o Facebook (que también está de cambios en sus paginas)?. Sobretodo, para Facebook, donde los enlaces de mi blog, o no cargan, o cuando lo hacen tras varias tentativas sólo lo hace con la URL... Al final acabo teniendo que hacer una nota para cada entrada para meter ahí la URL (¡pero es que la aplicación de notas en Faecebook también da problemas!).

Un saludo y perdona por la extensión, pero al ver que a Òscar Molina parece ser que le está pasando lo mismo que a mí, he preferido explicar el problema, tal y como ami me está pasando, por si con una descripción de ello ayuda en algo...

JMiur  

Como le decía a Oscar, no he leído nada al respecto pero, es muy probable que sea así, que los sistemas estén cambiando y que esos cambios afecten a los sitios de modo diferente.

Blogger no dispone de nada para permitir que se compartan entradas en las redes sociales. Todo es automático y escaso.

En todo caso, para Facebook, lo mejorcito que vi es lo explicado en esta entrada que es lo que estoy usando en este blog.

María José Moya  

Gracias JMiur por tu pronta y amable respuesta!!. Lo cierto es que tras escribirte se me ocurrió ver si con tus enlaces pasaba igual y pasé a tu página de Facebook, pero como ahí no vi enlaces tuyos desde la fecha (febrero) en que empezaron los problemas, lo que hice es intentar poner un enlace tuyo, de una entrada tuya con imagen, en uno de mis espacios, ¡y pasa lo mismo!, o sea, que sólo publica la URL. Ni título, ni descripción, ni imagen alguna...

Así que imagino que si imagino que no tiene sentido que estudie cómo implementar en mi blog, la información del post que me indicas, ¿no? (es que no sé si se me escapa algo, pero como dices que es el que estás usando para Vagabundia, y también veo que reproduce el mismo problema que mi blog...).

Un gran abrazo, y mil gracias por tu (como siempre) valiosísima ayuda!!,

JMiur  

A ver. Son dos cosas distintas. Una es el botón de compartir que es el que te mostraba en esa entrada. Usando ese botón, todo funciona OK; aca un ejemplo:

esto muestra la ventana
y esto es l oque se publica

Es distinto cuando se pega la URL directamente en Facebook, con ese método no se ve nada de nada; antes se veía poco y ahora menos. Imagino que se debe a cambios en Blogger, Facebook o ambos a la vez. Sobre eso, nada puede hacerse y por eso, si se quiere comaprtir algo, lo mejor es usar el botón que te indiqué.

María José Moya  

Ah, ahora entiendo lo que me dices, perdona :) OK, pues a ver si en estos días consigo hacerme con el máximo de concentración mental por mi parte, y me pongo a ver si consigo implementar la información de tu entrada, porque la verdad es que veo que el resultado merece muchísimo la pena, así que espero conseguirlo :)

¡Un montón de gracias!,

JMiur  

Creo que, que vale lapena y no veo que haya otra solución; por lo menos, por ahora.

Responder
María José Moya  

Hola de nuevo JMiur, como sabes ando de cabeza esos días con el tema de pluggins de Facebook y con mis problemas de memoria voy perdiendo el hilo de lo que hago o busco, según voy pasando a una cosa u otra.

Estoy observando errores en: http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmi-estrella-de-mar.blogspot.com%2F

Gracias a esta entrada (que es como configué el tema en su día) no daba error alguno, pero ahora al entrar para verificar el tema sí los da, como puedes ver en el enlace.

¿Cómo podría solucionar el problema?. Lo he estado intentando por no molestarte de nuevo, incluso mirando tu enlace de ejemplo de verificación de errores de tu entrada porque me ha parecido que estaba algo diferente al mio (en cuanto que no pones author, y en vez de 'fb:page_id' tienes "fb:app_id" --aparte de doble comillas--), pero no hay manera, e incluso ha sido peor: antes de intentar "arreglarlo" sólo aparecía dos "Inferred Property", pero ahora además aparece un "Critical Error". Así que mejor que me esté quieta hasta que me digas algo, ¿verdad?.

Un saludo preocupado,

JMiur  

Lo que parece causar error es fb:app_id; como si fuera errónea ¿Has verificado que sea correcta y que la aplicación apunte a ese dominio?

Por ahi también dice que está mal og:type, dice que dice article pero no veo eso en el blog, por las dudas, si ves tal cosa, elimínala; sólo debe ponerse

<meta content='blog' property='og:type'/>

Si te fijas en la parte inferior, donde dice Object Properties, allí parecen listarse correctamente la mayoría de las definiciones.

Responder
María José Moya  

Gracias de nuevo por tus respuestas. Te cuento: al ver tu mensaje quise comprobar lo que me decías yendo de nuevo al comprobador de FB y no sé por qué, para mi horror me encontré que de todas las propiedades que aparecían bien, no quedaban más que dos, sin haber tocado nada. Así que volvi a analizar todas las secuencias, y con cada "arreglo", peor. Al final, como había tomado la precaución de copiar aparte el trozo de secuencia que iba a tocar hoy con este tema... volvi a ponerla tal cual, y ahora incluso ya NO hay un error crítico como antes... pero tampoco está bien del todo (el tema de 'og:type' ahora dice que sí funciona).

Sobre lo que me preguntas de si la ID de la página de mi blog en Facebook es correcta, sí. De hecho, es que hasta que empecé a tener problemas con FB hace un mes, estas metatags funcionaban estupendamente...

Mira, por si ayuda, te pongo todo lo relacionado con el tema que quizás pueda ayudar (yo llevo parte de la noche mirando y mirando, y realmente es que entre lo que se me olvida según voy analizando, y lo que no le veo un camino por el que tirar, ya no sé qué hacer. He mirado puntos, comas, comillas simples y dobles (en mi blog: simples, por lo que parece)...

INFO:
[1].-Página en Facebook: http://www.facebook.com/miestrella.sqm

[2].-Perfil en Facebook: http://www.facebook.com/mariajomoya (el ID que tengo de mi blog de mi perfil en Facebook es porque es el que tenía originalmente antes de cambiar por mi nombre y apellido, una opción que FB da y que realicé hará unos dos años y que no me dio problemas cuando puse los meta de FB. Por si acaso, he intentado poner en el meta "mariajomoya" pero aunque no daba error en el blog, en la página de verificación de errores de FB no me daba ni tan siquiera un resultado de la página.

[3] Captura de imagen de ID de mi página en FB

[4] Captura de imagen del comprobador de errores de FB. En el comprobador, lo que ahora dice que da error es lo siguiente:

Extraneous Property: Objects of this type do not allow properties named 'og:author'.

Extraneous Property: Objects of this type do not allow properties named 'fb:page_id'.

Como verás, ahora no aparece un "Critical Error". Y los dos "Inferred Property" ahora han pasado a ser "Extraneous Property".

Como verás, le estoy poniendo voluntad, pero no sé ya por dónde tirar, aunque tras me tranquiliza que tras restituir los meta a como estaban antes de querer "arreglar los problemas vistos al inicio" (que son los mismos de ahora), al menos ni hay un problema crítico, ni  og:type dice tener problemas. ahora es og:author y fb:page_id (pero como habrás visto en la captura de pantalla, la ID, es la correcta, de hecho hasta febrero funcionaba...).

Perdona el rollo Miur, es que llevo con ello todo el día y con mi poca retentiva a veces me doy cuenta que debo estar nadando en círculos...

Responder
María José Moya  

Por cierto, en el tema de 'og:type' , aunque no dé error ahora, la variación con la que se visualiza en mi blog, no es que la haya hecho yo, es que yo la puse como tú la tienes, pero Firefox la modifica cuando le doy a guardar a la plantilla

( VAGABUNDIA: meta property="og:type" content="article"/ // MI ESTRELLA DE MAR: meta content='article' property='og:type'/ )

JMiur  

Si, veo que la ID es correcta aunque Facebook parece decir que no ya que es uno de los dos errores que muestra.

Algo cambió en los últimos tiempos así que por eso te decia que si existe, cambies
<meta content='article' property='og:type'/>
por
<meta content='blog' property='og:type'/>

y elimines la etiqueta META con property='og:author'

Responder
Anónimo  

Hay una manera de incluir la primera imagen del post y un trozo del post en si sin codigo html como la descripción, tengo en mi blog en la portada un script que que me reduce el tamaño de los posts, les quita el codigo html y añade la primera imagen del post a la izquierda y un botón de leer más, utilizando este mismo proceso, podremos incluir imagen del post y desc del post en el graph... Ya os volveré a comentar cuando lo tenga hecho y funcionando. Mi blog es http://www.novedadeseninternet.es

JMiur  

No. No puede hacerse con JavaScript. Debe ser HTML puro. Los motores sólo leer textos planos.

Responder
Anónimo  

Ya me he dado cuenta después de haberlo hecho a la perfección :(. Pero he encontrado otra manera con las etiquetas:

expr:content='data:blog.postImageThumbnailUrl' para la imagen.

Y

expr:content='data:blog.metaDescription' para la descripción.

Funciona perfectamente cuando está bien configurado, acabo de redactar un tutorial completo aqui:

http://www.novedadeseninternet.es/2012/04/anadir-etiquetas-meta-para-protocolo.html

Espero que os sirva.

JMiur  

Lo de data:blog.metaDescription es algo que puedes ver acá y es una de las nuevas caracterísitcas de Blogger aunque, tiene sus inconvenientes tal como se muestra en esa entrada.

data:blog.postImageThumbnailUrl no la conocía así que será bueno agregarla

Responder
teste  

Hola, es la primera vez que he utilizado este método en blogger. Hecho de acuerdo a sus explicaciones y funcionó. Pero en el momento que "curtir" un artículo en mi blog, con el tiempo la creación de una una página de artículo en Facebook. ¿Me sabe explicar lo que está sucediendo?
Gracias de antemano

JMiur  

Explicate un poco más porque no entiendo la pregunta.

teste  

Cuando hice clic en el botón "me gusto" un artículo de mi blog, después de un tiempo apareció una página de artículo en Facebook debajo de la página oficial de mi blog en Facebook.

JMiur  

Pues la forma en que Facebook maneja esas cosas nada tiene que ver con la forma en que uno coloca este tipo de etiquetas o plugins sociales. Es algo sobre lo que no tienes control.

Responder
Rene Perez  

Hola JMiur! Felicidades por tan buen blog. Te dejo mi consulta, espero que esta sea la entrada adecuada.

En mi página http://www.frasesdecanciones.net/ tengo el botón de ME GUSTA en cada entrada individual, pero cuando la gente da ME GUSTA lo que les sale en el perfil es el título de la entrada pero con

Frases de Canciones: Titulo número 32565

Me gustaría que apareciera sin el frases de canciones (que es el título del blog). Gracias, espero ser claro y si no avísame.

Pensé que tal vez era posible mostrar el título del blog(el que está al lado del favicon sólo en la portada) Ya que el texto al lado del favicon es el que se publica en facebook pero no puedo :( Quizás tu sepas alguna manera de hacerlo, gracias!!!

JMiur  

En Blogger no puedes controlar nada de eso. A mi entender, la mejor forma de compartir entradas en Facebook es la explicada en esta entrada.

Responder
Mega  

AMIGOP UNA PREGUNTA NO TENGO ESTO data='blog' name='all-head-cont lo que sigue para

JMiur  

Es indiferente, las etiquetas META pueden tener cualquier orden.

Responder
Mega  

ok sabes por que google me detecto entradas duplicadaS? con la minim descripcion que salia en facebook tambien salio en google

JMiur  

Tendrías que explicar a qué te refieres.

Responder
Mega  

si osea la parte del codigo una breve descripción del sitio tambien salio en google como descripcion de las entradas

JMiur  

Si te refieres a que lo que se ve es el contenido de la etiqueta META description; en Blogger, eso es lo normal.

Responder
poeta_libertario  

eres un fenómeno!!
cuando compartía en facebook no se veían ni mi descripción ni la foto (thumbnail).
Llevaba una semana de loco mirando por todos los foros tratando de solucionarlo...y por fin funciona!!
para todos los que tengan el mismo problema, a mi lo que mejor me ha venido (después de hacer lo que comenta JMiur) es utilizar la herramienta de facebook (http://developers.facebook.com/tools/debug)
resuelves uno por uno todos los errores y warnings y ...voilá!!

Muchas gracias !!!

Responder
poeta_libertario  

aaargh!!! pero al buscar en Google sigue poniendo en la descripción lo que le da la gana!!!
he buscado y en todos sitios pone que debería reconocer lo que escribes es settings --> search preferences --> Meta tags --> description
pero yo lo tengo puesto (es lo que pone en facebook) y nada!!!
alguna idea??
muchas gracias!!!
P.D: esta es mi web: www.mrchallengefilms.com

JMiur  

Que es l oque ves en el buscador o que es lo que quieres ver es lo que desconozco; se muestran resultados como:

Mr. Challenge Films: QUANIMPA
In the Peruvian Northern municipalities "Frias" and "Lalaquiz", women find in the art of weaving their main social and labor activity. A technique that has been ...

Mr. Challenge Films: PREJUDICES
During my 10 months stay in Split (Croatia), I made several videos for "HELP", the NGO I was working for. They were used in workshops for the youth and local ...

cosa que me parece correcta pero, dependerá de qué palabras estás buscando.

En cuanto a la etiqueta META description, parece decir esto:
Mr. Challenge Films, a team of video artists leaded by Miguel Angel Cano, independent filmmaker from Spain. See impossible, we say Challenge accepted.

aunque me da la impresión, que debe haber un error de sintaxis ya que el código fuente muestra esto:
<meta name='description="content="Mr. Challenge Films, .....
comillas simples y dobles, un signo igual, algo esta mal; es un pequeño error en alguna parte de la plantilla.

De todos modos, Facebook lee el dato correcto y lo muestra.

En Blogger, sólo es posible colocar UNA descripción genérica y ese es el problema básico de todo.

Si bien, hace un par de meses, agregaron al posibilidad de modificar eso y colocar descripciones en cada entrada usando la nueva interfaz, eso, ahora y hace ya tiempo, no está funcionando.

Responder
Danielto  

buenas,tengo una duda, tengo una web de ofertas y recibe parametros por URL, por ejemplo un id, y cada dia se cambia de oferta, cuando le doy me gusta a la pagina solo me deja hacerlo por unica vez,cuando vuelvo a ingresar a la web y ya se muestra otra oferta esta marcada como si ya le hubiera dado me gusta y en realidad fue al que estaba anteriormente. Como se pueden hacer me gusta a varios productos que estan en una misma pagina??

JMiur  

En ese caso, el botón de Me Gusta, debería tener las direcciones url de cada página, incluyendo el ID; es probable que en tu caso, sólo tengan la dirección del home por lo que la página siempre es la misma, sin importar su contenido.

Responder
Unknown  

excelente tu pagina amigo!!
Eres grande como dicen mas arriba.

un saludo.

Responder
Anónimo  

Hola JMiur, antes que nada, excelente sitio, te sigo desde hace tiempo y siempre me ha resultado bien tus posts. En esta ocasión te escribo porque me metí en un gran revoltijo :S te planteo mi duda: Puse en mi sitio aquello de la caja de comentarios de fb en cada post, así como lo tienes en otro post, y ahí me decía que pusiese mi ID de fb para que me llegaran las notificaciones cada vez que alguien comentara en la caja, había otra cosa sobre una ID de APP, pero omití ese punto, ya que nunca me funcionó; pero bueno, entonces metí lo de mi ID de FB con las etiquetas META, y nunca recibí ninguna notificación, aunque ya han habido comentarios :( entonces supuse que era porque no había obedecido lo que dices en este post, y lo hice al pie de la letra, la cuestión es que aún siguen sin llegarme las notificaciones cada vez que alguien comenta en la caja, y otra cosa, cada vez que introduzco la URL de un post X en la URL Linter que pusiste, me sale un problema con la etiqueta og:'image', y pues ya estoy muy confundido :S

El sitio en el que he hecho todo eso es www.atasque.com
Confío en que me podrás ayudar con ésto, ojalá que puedas. Saludos.

JMiur  

Hasta donde yo sé, para recibir notificaciones, debe crearse una aplicación y colocar el ID de esa aplicación. No es mucho más lo que puedo decirte al respecto ya que esa es toda la información que ellos proveen.

Anónimo  

Gracias por tu pronta respuesta JMiur, la cosa es que también he hecho lo de la APPS, y tampoco me ha servido :/ entro al panel de administración de la APP que destiné a ello y me aparece en 0 comentarios :(

JMiur  

Pues lo único que se me ocurre, Arturo, es usar la página específica de la aplicación que uno creo:
http://developers.facebook.com/tools/comments?id=XXXXXXXXXX
como ve, muchos preguntan por lo mismo pero, a esta altura; ya ni siquiera estoy seguro si existe la posibilidad de notificaciones porque en la página del plugin, no dice nada al respecto y, por el contrario, dice esto:

How do I know when someone comments on my site?
You can subscribe to the 'comment.create' and 'comment.remove' events through FB.Event.subscribe.

¿Cómo sé si alguien comenta en mi sitio?
Puedes suscribirte usando los eventos comment.create y comment.remove de FB.Event.subscribe


Pero, no tengo idea de cómo se debería implementar eso ya que las paginas explicatorias de Facebook son de terror.

Anónimo  

Hahaha, Bueno, no me quedará más que comentar en cada uno de los posts xD

Agradezco su ayuda y atención señor!! Buenas noches :)

Responder
José L. Bravo  

¿Cómo hago para que cuando alguien le de Me Gusta a mi blog aparezca el logo de éste? Cuál sería el código.

Saludos.

JMiur  

No hay códigos especiales. El botón Me Gusta tiene las opciones que ellos provee y que defines en la página del plugin.

Responder
Unknown  

Hola!
Pasando a saludar y con inquietudes.

La cuestión es que al darle me gusta en mis entradas y publicar estas en el facebook, la imagen sale perfecta, el titulo y enlace se redirecciona como se debe. Sin embargo, en donde debería de ir la descripción del post o la del blog, sale es: No hay ninguna descripción disponible para esta frase.

A que se debería esto?
Gracias.

JMiur  

Habría que ver cuál es tu blog. Habilita la descripción en la Configuración de Blogger y usa descripciones en cada entrada mediante la opción de la derecha: Descripcion de búsqueda.

Responder
Anonimo  

Me sirvió mucho este post, solo tengo un problema, no sale el nombre de mi blog, ejemplo: " Entornoz - Ku Klux Klan ", solamente sale el nombre de la entrada, la foto y la descripción general, esto es bueno ya que antes no me salia nada, solo la descripción y la URL completa de la entrada sin imagen, tendrá algo que ver que mi plantilla no tenga lo que viene al inicio? "<html xmlns='http://www...." mi plantilla trae algo totalmente distinto, saludos.

JMiur  

Revisa lo que dice url linter al analizar una entrada de tu blog. Si no hay errores, no hay mucho mas que puedas hacer.

Responder
Redacción  

Hola, JMiur. Disculpa la molestia. Desde hace tiempo he intentado solucionar un problema que tengo al compartir las entradas, pero no he tenido mucho éxito. El detalle está en que al compartir, se muestra el título del blog en vez del título de las entradas.

He intentado arreglar el problema con las meta tags, pero no ha funcionado. Honestamente no sé a qué se debe el problema. ¿Tiene alguna idea de por qué ocurre esto?

Agrego una captura de pantalla para que veas el problema. El blog es éste.

Muchas gracias. Saludos.

JMiur  

No veo que ocurra eso. Te dejo una captura de una entrada cualquiera:

http://img90.xooimage.com/files/4/8/c/image1-3d30042.png

Redacción  

Oh, pero tienes toda la razón. Creo que era cosa de esperar, porque hace rato que te escribí no funcionaba. Muchas gracias por tu ayuda. Que pases buen día. Saludos.

Responder
Unknown  

Hola Jmiur Megustaria saber si con esto puedo resolver mi inquietud en mi entrada de blogger hacia facebook; ahora bien, como le hago para que cada vez que comparta una entrada en facebook salga la imagen de la entrada y no la de cabecera, ayudame por favor.

JMiur  

Sí, esto es lo máximo que puedes hacer. La imagen, dependerá de si Blogger la registra o no.

Responder
Connie  

Hola JMiur.

Me puedes ayudar, por favor, el depurador de facebook me muestra el siguiente aviso y no sé qué hacer:

Mismatch og:url and canonical url: og:url tag in the header is not the same URL as rel='canonical' link in the html.

Gracias de antemano,

Connie

JMiur  

Es ocurre por las redirecciones que hace Blogger según el país, agregando el prefijo a la dirección.

En lugar de esto:

<meta expr:content='data:blog.url' property='og:url'/>

colcoa esto:

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

Connie  

Problema solucionado, JMiur. ¡¡Mil gracias!!

Un saludo,

Connie.

Responder
Connie  

Ahora me pasa algo curioso, bueno, me pasaba ya pero no le había dado importancia pues estaba centrada en el error que te comenté y que ya solucioné gracias a ti.

El depurador me muestra el siguiente aviso: og:image should be larger: Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://4.bp.blogspot.com/-5MQAexnCkr8/TbGVQ9K54wI/AAAAAAAABOQ/A8-WxS_NwEM/s400/IMGP0779.jpg' will be used instead.

Por lo que entiendo, dice que la imagen a la que hace referencia debe ser más grande. Pues bien, ya la cambié por otra pero el depurador sigue mostrando el mismo aviso. No lo entiendo, si esa imagen ya no existe dentro del blog.

Igual es sólo un warning y creo que no supone un problema, pero me gustaría saber porque lo muestra y dejar todo perfecto.

Como siempre, gracias de antemano.

Un saludo,

Connie

JMiur  

Eso ya depende de Facebook; ellos cachean las páginas y muchas veces, no muestran cambio alguno aunque se supone que el depurador es para eso.

Connie  

Gracias por toda tu ayuda., JMiur.

Un saludo enorme,

Connie.

Responder
Levio  

Hola JMiur.
Te escribo, porque me surge un problema.
Cuando intento compartir un enlace en facebook no detecta el enlace.
Por Ejemplo: http://www.midominio.com/2013/08/cal...a-edicion.html

El boton like tampoco funciona, de un rato para otro dejó de funcionar.
La verdad, es extraño.

Me dirigí al Depurador de objetos de facebook: https://developers.facebook.com/tools/debug

y me dice lo siguiente: "Errors That Must Be Fixed"

Estoy atento a una ayuda!! Saludos.

JMiur  

Lo que dice es que hay errores que deben arreglarse pero no dices qué errores ni cuál es el blog del que estás hablando.

Levio  

ok.
Este es el enlace: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.matematicaexercice.com%2F

Mi blog es: www.matematicaexercice.com

Ojala puedas ayudarme.
saludos.-

JMiur  

Lo que veo allí es que dice que no hay ninguna etiqueta de Open Graph, cosa que es cierta.

Esta es una captura de lo que se ve cuando se comparte, colocando el enlace en Facebook.

Levio  

Curiosamente despues de 5 días ha vuelto funcionar hoy. En serio, no lo puedo creer.
Agradezco mucho tu tiempo.


JMiur  

Son cosas que suelen pasar :D

Responder

¿Quiere dejar un comentario?

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

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