Por lo que a nosotros nos puede interesar, basta saber que son etiquetas META que es posible agregar en nuestros sitios aunque en Blogger, hay que comprender (y aceptar) que hay limitaciones impuestas por el mismo servicio y los datos a los que nosotros podemos acceder por lo tanto, esto no será una panacea.
Primero que nada, yo recomendaría agregar dos atributos a la etiqueta HTML que es la tercera línea de cualquier plantilla; una nos permitirá evitar problemas en Internet Explorer y la otra ayudará a que este nuevo tipo de etiquetas sean interpretadas correctamente. En una plantilla común, deberia decir esto:
<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/'>
<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:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
<meta property="og:title" content='nombre_del_sitio' /> <meta property='og:description' content='descripcion_del_sitio'/>
og:description es igual que la etiqueta <meta name='description' content='...'>
Entonces, ¿es necesario duplicarlas?
No, en absoluto, es indiferente salvo que quisieramos que en Facebook se viera algo distinto porque sólo hay que saber que Facebook da prioridad a esas etiquetas así que si hay dos, siempre usará la de Open Graph.
Preguntan mucho algo que por ahora no tiene respuesta; la descripción que se muestra no es un resumen de las entradas y eso, que yo sepa, no tiene solución posible ya que no hay nada que podamos agregar para evitarlo salvo que escribamos una etiqueta META description para cada entrada. Tampoco sirve usar JavaScript porque no será reconocido. Lo más que podemos hacer es condicionarlo igual que hacemos con el resto:
<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageTitle/></title> <meta property="og:title" expr:content='data:blog.pageTitle' /> <meta expr:content='data:blog.pageName + " texto texto texto texto texto texto texto texto texto "' name='description'/> <meta expr:content='data:blog.pageName + " texto texto texto texto texto texto texto texto texto "' property='og:description'/> <b:else/> <title><data:blog.title/></title> <meta property="og:title" expr:content='data:blog.pageTitle' /> <meta name='description' content=' texto texto texto texto texto texto texto texto texto ' /> <meta property='og:description' content=' texto texto texto texto texto texto texto texto texto ' /> </b:if>
<meta property='og:type' content='blog' />
<meta property='og:url' expr:content='data:blog.url' />
<meta property='og:site_name' content='mi_blog' />
<b:if cond='data:blog.pageType != "item"'>
<meta property='og:image' content='URL_de_la_imagen' />
</b:if>
Una buena forma de saber si hay algo que debemos corregir o agregar a nuestro blog, es utiizar un servicio de Facebook para Desarrolladores llamado URL Linter. Si entramos y colocamos una dirección, ya sea del home de nuestro sitio o de una entrada individual, veremos qué datos lee y de dónde son leidos.
Un ejemplo del home de este blog y un ejemplo de una entrada cualquiera.
67 comentarios:
Qué tal JMiur, te hago una pregunta:
(Lamento salirme del tema del post, pero no sé en dónde lo podría preguntar) Mi duda es la siguiente:
¿Cómo puedo quitar el horrible borde punteado que se genera alrededor de los links (en IE)?
En firefox es fácil: con a:focus {outline:0;} lo he logrado, pero como siempre el bendito "Internet Explorer" hace lo que quiere y no me deja quitarlo.
Ojalá tú me puedas ayudar pues me doy cuenta que en tu blog eso no sucede, al dar click en los títulos de los post -por ejemplo- no se ve ese borde ni en IE, seguro que tú sabes cómo solucionarlo.
De antemano gracias por la ayuda, recibe saludos cordiales desde México.
En todos los navegadores es igual:
a, a:visited, a:link {outline:none;}
Genial el dato! Gracias por compartirlo. Me fue muy útil lo de la imagen a mostrar.
:)
JMiur: ya he leído la entrada relacionada al respecto, he hecho lo que me dices pero sigue sin funcionar. En Firefox todo marcha bien, pero en Internet Explorer ¡NO!
Te dejo mi blog, ojalá puedas darle una checada, te darás cuenta que en IE no funciona. Te agradezco tu ayuda.
http://swamsy.blogspot.com/
Saludos.
Buenísimo, trataré de pensar un poco para relacionar los anteriores códigos de Facebook que inserté en alguno de mis proyectos. Además de que está excelente el código que ayuda a no tener problemas en IE, ya que ese navegador siempre tengo problemas con la vista del blog.
Saludos :)
No veo nada de eso ni en Internet Explorer 7 ni en 8.
JMiur, yo de nuevo.
Encontré la manera de solucionar el problema del outline en IE8, y quiero compartirla contigo y con los visitantes del blog, por si ocupan:
En la plantilla del blog deben sustituir lo siguiente:
meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'
por:
meta http-equiv="X-UA-Compatible" content="IE=8"
Eso es todo. Ahora la propiedad outline se puede modificar y -en mi caso- ocultarla.
Probablemente ya habías posteado algo relacionado a esa meta, pero por si no, ahí está el tip jeje.. saludos, gracias por todo.
Fíjate en esta entrada; debes deshabilitar el modo compatibilidad de IE.
JMiur hola, estoy editando una Facebook Page (de fans) y en el cuadro donde insertamos codigo html sugieren poner los estilos dentro de la etiqueta DIV, de la forma div style="xxxxx", hasta ahi todo bien, pero ahora quiero hacer en los links un efecto hover con un color especifico (no el q facebook da por defecto) y no se la forma correcta de ponerlo dentro del DIV. Lo hice aplicando el estilo entre etiquetas style al comenzar el codigo (lo q viene a ser el head), pero no hace caso, solo me queda ponerlo dentro del DIV pero no se como escribirlo, la idea es poner algo como a hover{color:#222;} ojala me hayas entendido, muchas gracias por la ayuda.
No sé si a lo que te refieres es a que no admite etiquetas style y por lo tanto, los estilos deben ser colocados con el atributo style (el que va dentro de una etiqueta); si es así, debería ser algo como esto:
<a href="#" style="color:white" onmouseover="this.style.color='red';" onmouseout="this.style.color='white';"> texto </a>
style="color:white" es el color por defecto
onmouseover="this.style.color='red';" es el color hover
onmouseout="this.style.color='white';" es el color por defecto
Gracias por responder tan pronto, lo puse tal cual, pero el texto solo se queda en blanco, aparece la underline al pasar el raton pero no cambia a rojo, q puede pasar? gracias.
Es probable que las páginas no acepen cualquier tipo de código y que haya algunos vedados. Lo que aceptan, es limitado ya que no son páginas webs.
Si eso es cierto, pero he visto en otras paginas el efecto hover, pero talvez lo consiguen con el FBML, aunque este lenguaje ya no seguira desde el 2011. Bueno, los codigos q me diste no los conocia, o mejor dicho no los sabia usar. Seguire buscando soluciones para las paginas de Facebook q es un buen mercado como negocio, te lo recomiendo, gracias JMiur.
Es posible que sea FBML y también es posible que FB impida el uso de JavaScript (onmouseover y onmouseout son eventos de JavaScript) cosa que es absolutamente lógica.
Estuve leyendo ayer un poco de info al respecto y si acepta JS, pero adaptados a su propio lenguaje, lo llaman FBJS, no puedo opinar al respecto ya q no domino el JS, solo lo aplico o cambio opciones, pero encontre q se pueden hacer cosas muy bonitas en Facebook Pages como esta por ejemplo:
http://www.facebook.com/520GridSystem#!/520GridSystem?v=app_10442206389
Esta muy interesante, talvez y... solo talvez...podrias animarte en comentar estas cosas aqui en Vagabundia a manera de ayuda para los q no manejamos muchos codigos pero nos dejamos llevar por la ola (lease facebook). Un abrazo.
Algo que no entendi prove, y me salio bien lo de la pagina pero las entradas me muestran el titulo y la descripcion igual que el home, y si puedes saliendome del tema tengo un error en mi plantilla con el titulo de la entrada pero no encuentro por que es que las entradas no me aparecen en el titulo solo el titulo de la pagina
turankeo.blogspot.com ese es mi blog.. y disculpa
Si el titulo y la descripción son el mismo en todas las págians es que no están condicionados para que sean diferentes. No es algo que se vea online. No sé si con lo del título te refieres a esto.
Al titulo me refiero un ejemplo al de esta enttrada EL Protocolo Open Graph en blogger: Vagabundia - Mozilla Firefox, en el mio aparece Turankeo - Mozilla en todas parte y nos e que pueda ser, y eso pasa tambien cuadno pruebo las URL en URL Linter no aparecen la descripcion de la entrada.. como en tu ejemplo solo la del home..
ya pude lograr eso de condicionarlas meta no creia que se pidia, hacer condicionar hay arriba, pero algunas entrada cuando la pruebos en URL linter me dice esto.
"No lograste dar una lista válida de administradores. Debes proveer los administradores usando una meta etiqueta fb:app_id o una meta etiqueta fb:admins para especificar una lista con comas de usuarios de Facebook."
y no me muestra el resumen de la entrada..
Como funciona esa herramienta de FB lo desconozco. Lo otro tiene que ver con las condiciones tal com ote dije arriba aunqiue las descripciones no tienen la misma facilidad para ser condicionadas como lo teiene el título.
que raro esta ahora me dice lo mismo cuando pulso el boton me gusta No lograste dar una lista válida de administradores.
Debes proveer los administradores usando una meta etiqueta fb:app_id o una meta etiqueta fb:admins para especificar una lista con comas de usuarios de Facebook.
ya resolvi lo del error de los administradores, tengo la ultima duda que tengo que hacer para que me salga el resument o la descripcion de los post tengo las dos etiquetas de descrition condicionadas si la sacao de la condicion me sale, la descricion de blog en las entradas..
En Blogger, creo que eso n oes posible.
mmm pero los post tuyo, cuando lo preubo en URL Finger salen con la descripcion.. y es blogger?
En las páginas individuales de tu sitio, no parece habr una etiqueta META DESCRIPTION.
como hago eso.. por que en tu plantilla solo veo que tiene dos metas description una con el og y otra normal..
Probablemente, tengas condicionadas las descripciones y por ese motivo n ose ven en las páginas individuales; no es algo que pueda ser observado online.
voy a provar sacando las dos condiciones.. aver..si me eh dado cuenta, de eso que no se puede ver las condiciones online.. ya me lo habias dicho jeje eh aprendido algo..
Las prove sacandolas y metiendola las dos y poniendo una y una y todo igual mira te dejo el link en un archivo txt aver si puedes chekiar las metas.. como las tengo http://plunder.com/2bb8962c0d
Por l oque se ve en ese texto, ocurre justamente l oque digo, mo hay etiqyetas de descripción en las páginas individuales:
<b:if cond='data:blog.pageType == "item"'>
............ esto es para páginas individuales
title .........
<b:else/>
............ esto es para el resto de las páginas
title .........
meta google-site-verification .........
title .........
meta og:title .........
meta description .........
meta og:description .........
</b:if>
En las páginas individuales no hay etiqyuetas META; ni siquiera el código de verificación de Google.
En el resto de las páginas, la etiqueta TITLE está duplicada.
Si ya borre las etiquetas title que tenia duplicadas lo de la imagen de las entradas me sale bien, lo unico que me sigue dando problemas en la descripcion. taba provando pero cuando pongo una descripcion en las pagina indiduales me coje la misma para todas las paginas indivuduales mira como lo tengo ahora http://plunder.com/80bec8a2ef aver que tendria que agregar para que cojiera sola la descripcion de las entradas.. como hacen las entradas de tu blog..
El método que uso es el que está en esta entrada. Las descripciones son las mismas con el solo agregado del título. En Blogger, no hay forma de poner descripciones individuales para cada entrada a menos que se haga una por una.
si bien yo tengo esas puesta lo que no entiendo, es que debo poner en la descripcion de las entrada para que detecte cada entrada diferente como en tu blog...
lo que en si no entiendo si pongo .el texto de la descripción. ESE TEXTO NO VA A KEDAR EN TODAS LAS ENTRADAS.. indivuduales?
Lo que ves en este blog es exactamente eso que indica ese post.
La descripciòn general es una y la de las páginas individuales es la misma con el agregado del título.
En Blogger no existe otra forma de hacerlo a menos que escribas esas descripciones de entradas una por una y las condiciones una por una.
Pero es que veo que las entradas de tu blog cuando las prubo en URL finger me salen con despcripciones diferente y no con la descripcion de tu blog.. ese es unico de talle que todavia no entiendo..y disculpa tanta molestia..
Perdon mi ignorancia ya cai en cuenta..
Hola JMiur,
Tengo un par de preguntas respecto a todos estos iframes y etiquetas meta.
La primera es referente a estas etiquetas que completan lo que Facebook publica en el muro de quién clicka. ¿La base sobre la que partimos es la que publicas en tu entrada http://vagabundia.blogspot.com/2010/04/agregar-un-boton-de-me-gusta-para.html?
¿Una vez insertado ese Iframe es cuando podremos comenzar a incluir las metaetiquetas del openGraph?
La segunda tanda de preguntas son referentes precisamente a la entrada que citada anteriormente. Hasta hoy, después de muchos días de intentarlo, no conseguí utilizar el código de esta entrada http://vagabundia.blogspot.com/2010/04/agregar-un-boton-de-me-gusta-para.html en mi blog. No obstante, no se ve igual que en el ejemplo expuesto allí: a mí me sale un casillero con el número de clicks en lugar del texto: A 'X' les gusta. Sé el primero de tus amigos'. ¿Cómo es posible?
Muchas gracias por compartir los conocimientos y ser paciente con ignorantes como un servidor.
Saludos!
Las metaetiquetas pueden ser agregadas en cualquier momento, no es necesario que usemos los botones de Me Gusta o ninguna otra cosa; ni siquiera es necesario tener una cuenta en Facebook. Se agregan para que cuando los usuarios enlazan nuestras páginas o sitios, los datos a enviar sean lso que nosotros queremos mostrar.
Las posibilidades del botón Me Gusta son las que da el mismo Facebook; los avatares pueden mostrarse o no; el resto de los textos mostrados, dependerá del mismo Facebook y de la actividad que haya tenido esa página o sitio.
Gracias, JMiur!
Por lo tanto, una vez agregadas las primeras líneas del OpenGraph, el resto de ordenes las podemos incorporar a continuación o requieren una localización concreta?
Se colocan en cualquier parte del head de la página.
No consigo que cambien los datos de lo que el Facebook publica. He introducido las dos líneas en la etiqueta HTML, tal y como comentas; y justo debajo hay una primera línea < head > tras la que he incorporado diferentes etiquetas, pero no me funciona ninguna.
Utiliza URL Linter para identificar las etiquetas que son leidas y qué cosas son leidas.
Me acabo de dar cuenta que cuando guardo la plantilla, cambia el orden del texto de las metaetiquetas.
< 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:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema/'>
< head >
< meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
< meta content='13 libras' property='og:title'/>
< meta content='blog' property='og:type'/>
< meta expr:content='data:blog.pageName' property='og:title'/>
< meta content='13 libras' property='og:site_name'/>
< meta content='http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs867.snc4/71157_135197643189901_8368042_n.jpg' property='og:image'/ >
El orden de las etiquetas META es indiferente. Si, sugiero cambiar:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
por:
<meta content='IE=8' http-equiv='X-UA-Compatible'/>
ya que IE 7 es un navegador que también es obsoleto.
La verdad si me sirvió. No puedo poner los resúmenes del post, pero igual son herramientas validas.
JMiur tengo un problema con el de la imagen cuando lo pongo sigue sin aparecer, es decir, sigue poniendo la que le da la gana, no se que estará mal???
En el blog donde lo veo colocado, lo que dice el código en todas las páginas es esto:
<meta content='http://i.min.us/ilyQCG.jpg' property='og:image'/>
que, imagino que es el logo que usas; fíjate si lo estás condicionando de alguna manera y ahí puede estar el error. Esa parte del código sólo se ve en la plantilla misma.
Así es como lo tengo
<b:if cond='data:blog.pageType != "item"'>
<meta content='http://i.min.us/ilyQCG.jpg' property='og:image'/>
</b:if>
pero si pongo este aparecen pero en todas las entradas ignorando las imágenes que hayan en el post
<b:if cond='data:blog.pageType == "item"'>
<meta content='http://i.min.us/ilyQCG.jpg' property='og:image'/>
</b:if>
Lo que veo en ese blog es que la etiqueta META se ve en todas las páginas, en las individuales también.
Y como hago, para que respete la condicional???
Si tienes esto:
<b:if cond='data:blog.pageType != "item"''>
<meta content='http://i.min.us/ilyQCG.jpg' property='og:image'/>
</b:if>
la condición es correcta.
Lo más más probable es, que si además se muestra esto en las páginas individuales:
<meta content='http://i.min.us/ilyQCG.jpg' property='og:image'/>
es que tienes esa etiqueta META repetida en alguna otra parte.
Pues con la condicionada, siguen en las entradas sin imagen, pone cualquier otra, en vez de poner la que le digo que ponga, no se como más cambiarlo para que funcione
En este momento, el condicional funciona correctamente. Esa imagen por defecto no se muestra en las páginas individuales y en estas, la que se meustra es la que agrega Blogger y toma de tus entradas; por ejemplo en:
http://grupodinamo.blogspot.com/2011/03/milktub-getsuyo-wa-kirai-single.html
laimagen es esta:
http://2.bp.blogspot.com/-cNBMGQ6EfIA/TXajE-JaKqI/AAAAAAAADIs/uLT9pB75UYw/s72-c/202.jpg
y al comaprtilo en Facebook, por ejemplo, se ve lo que muestra esta captura
Eso es todo l oque puedes hacer en Blogger.
¿Alguien me puede auyudar? no soy programador y no tengo mucho conocimiento sobre ésto, pero me sale este mensaje:
No lograste dar una lista válida de administradores. Debes proveer los administradores usando una meta etiqueta fb:app_id o una meta etiqueta fb:admins para especificar una lista con comas de usuarios de Facebook.
El problema es que al compartir no me sale la imagen del post... probe instalar éste plugin http://wordpress.org/extend/plugins/facebook-open-graph-meta-in-wordpress/ y me dio error, porque duplico el nombre de una función, lugo instalé el open-graph y fue cuando me dió el error que mencioné primero, no se que hacer.
Gracais de antemano
El plugin del que hablas agrega un dato:
<meta property='fb:admins' content=user_id' />
y ese es el dato que aparentemete dice no existe pero no sé si posees una aplicación o no, seguramente, es parte de alguna de las opciones del mismo plugin.
No es un dato obligatorio así que, si no posees ese dato, simplemente debes eliminar esa etiqueta.
Con respecto a la imagen, no sé de qué plataforma hablas, si es de Blogegr o es de Wordpress.
Hola JMiur tengo otra duda, la condicional funciona bien para las paginas individuales, pero resulta que tengo unas entradas sin imágenes, y en esas muestra una imagen cualquiera, hay una forma de hacer lo mismo pero en entradas sin imágenes???
No hay forma de identificar esas entradas a menos que se use JavaScript y haciendo esto, la etiqueta META no sería leida. Si la entrada no tiene imágenes, facebook tomará cualqueira de las que encuentre o ninguna.
Ummmm que lastima... y hay alguna forma de ordenarle que la imagen cualquiera que escoja sea una que uno decida???
No que yo conozca.
hola,con esto con que instruccion puedo llamar al boton me gusta?? en una pagina html (no blogger)
gracias de antemano
Para eso debes usar el plugin social de Facebook; tanto las etiquetas META como ese botón, se usan en cualquier página o sitio web.
hola jmiur he encontrado en la web algo similar a tu post, sobre open graph; queria saber si es compatible el codigo que se encuentra en el post siguiente:
http://epoint.es/blog/2012/04/facebook-open-graph-blogger/#comment-76
si me sirve a la hora de hacer lo que vos estas explicando en tu post.
Osea, con el post que te he mencionado, puedo hacer lo mismo que estas explicando en este post?
o hay una gran diferencia?
Cual codigo es mejor? el que te mencionè o el que pones en este post?
me podes ayudar con esto?
cual es la diferencia entre ambos codigos?
espero tu respuesta
saludos
¿Y cuál es la diferencia? En realidad, el orden o el formato carece de importancia, lo único que importa es que en determinado tipo de páginas se vean determinadas etiquetas meta.
entonces jmiur porque cuando entro al debug de tu home en la propiedad: "og:type: article"
porque sale "article" si es el home, deberia decir "blog" no?
No tengo idea ya que en el código fuente o sea, en la plantilla dice:
<meta content='blog' property='og:type'/>
si mal n orecuerdo, dice eso porque al poner article, se marcaba un error. De todas maneras por lo que se ve, ese en particular, es un dato que carece de importancia.
¿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 ...