Configuración del botón Me Gusta de Facebook con Open Graph

Hola!

Tengo colocado el botón de Me Gusta de Facebook en los posts y en las páginas de categorías para páginas individuales.

Os voy a contar la PRIMERA PARTE para que sirva de tutorial, y en la segunda me tendréis que ayudar:

- Para generar el botón de Me Gusta debemos acceder aquí: Like Button - Facebook Developers
- En el lugar de la URL vamos a poner XXX. Es por poner algo, ya que cuando se haya generado el código dándole a "Get Code" con nuestra configuración deseada, lo sustituiremos por el siguiente código:
- Después si queremos podemos dejar un idioma predeterminado, de modo que todas las personas lo vean tal y como deseamos y no en el idioma que tienen configurado el facebook (por cuestiones de tamaño). En donde pone:
Nosotros vamos a añadir:
Quedando así:
Pudiendo usar en su lugar "en_US", "es_LA", etc.
- Después insertaremos el código en el fichero single.php si queremos insertarlo manualmente. Yo lo puse justo después de:
- Y para que quede con texto flotante a su alrededor lo puse dentro de:

Y ya funciona!

SEGUNDA PARTE

Ahora vamos a por el Open Graph. Se puede generar desde la misma página donde generamos el botón de Me Gusta (algo más abajo), y nos permite varias cosas:
- Que se vincule correctamente la imagen del post con la que aparece después en el muro del Facebook (eso es lo que yo busco porqué en mi blog no funciona, podéis hacer la prueba).
- Que se genere una página "virtual" del post en Facebook con información para que luego salga en los resultados de búsqueda de Facebook. Es interesante saber que a más posts, más información estamos añadiendo a Facebook y más visitas nos puede llegar desde allí.

Hace falta resaltar también que Open Graph tiene 6 requisitos que son indispensables para que funcione correctamente. Lo que yo no sé donde poner el código generado: si en el single.php o en el header.php.

Y no tengo muy claro tampoco qué "imagen" (y formato), qué "título" y qué "url" poner en las casillas para generar el código.

Muchas gracias de antemano!


EDITO (1 DÍA DESPUÉS): Debo añadir que para tener correctamente configurado Open Graph hay varios plugins, y que el que mejor me funciona es "Facebook Open Graph Meta in WordPress", pues es automático.

En posts antiguos se me vincula bien la imagen que aparece en el muro del facebook con la del post, pero en los posts nuevos no. Sin embargo, cuando le doy a "ver código" de la página aparecen los 6 metatags de Open Graph bien definidos y, sobretodo, el de la imagen lleva la URL correcta. Luego en Facebook aparece otra. Si alguien sabe a qué puede ser debido se lo agradecería mucho.

Espero que alguien pueda ayudarme. Gracias!

EDITO (otro día después): Ya lo tengo solucionado. Con Open Graph funciona de maravilla. El problema es que algunas páginas quedan almacenadas en una cache virtual de Facebook. No sé si se puede hacer nada o qué para limpiarla, pero da igual. Tampoco son muchas páginas.

Por cierto, con el Open Graph bien configurado aparece siempre la imagen en todos los sitios: Digg, share de Facebook, stumbleupon... sin necesidad de seleccionar cual es la imagen. Aparece por defecto, con el título indicado, el excerpt, todo bien!

Tambien puedes usar este plugin: Enlace eliminado
Es muy bueno, tiene mucha configuracion. Para actualizar el cache de facebook, solo tienes que ponerle:
<meta property="og:image" content="http://www.bajona.com/wp-content/uploads/water-content-in-the-lunar-magmas-300x199.jpg?t=<?=time();?>"/>

Saludos

Interesante aporte, gracias!

algun demo de como quedaria?

Tengo nuevos aportes que hacer!

1. He encontrado un método para limpiar la caché virtual de Facebook. Suele ser útil porqué a veces, alguien le da al "I like" antes que nosotros, quedando la publicación en el muro de un modo que no nos gusta. Pues bien, Facebook tiene una aplicación que permite limpiar dicha caché: https://developers.facebook.com/tools/lint/

2. Cuando dije que Open Graph funciona en todos los sitios no tenía toda la razón. StumbelUpon usa un sistema diferente, de modo que si la imagen es muy pequeña o está muy al final del post no la detecta i lo que hace es una captura de pantalla de nuestro sitio. (Eso nos quita visualizaciones de página y la verdad, jode mucho. En StumbleUpon he llegado a tener más 1000 visitas por artículo en pocas horas, llegando a un pico de casi 400 en el mismo instante). ¿Solución? Hay un plugin llamado: WordPress › Stumbleupon & Digg Thumbnail Maker « WordPress Plugins Aunque para Digg no hay problema porqué ese sí que usa Open Graph.

Lo que hace este plugin es añadir un código al principio de la página con la URL de la imagen para StumbleUpon. Nosotros le definimos esta URL al momento de crear el post, pues justo entre la caja de contenido del post y la caja del contenido del excerpt aparece una cajita donde podemos poner esta URL.

Saludos[/QUOTE]
Ciclow, si añado este código imagino que debería hacerlo en el fichero del plugin para que salga en todos los posts. Entonces me pregunto: ¿Cada vez que alguien le de al "I like" se estaría limpiando la caché virtual del Facebook?
Yo lo que hago es limpiarla con Linter, post a post, para que todos queden actualizados. Así quedarán actualizados de por vida (en teoría).

Gracias!

Gracias me servirá mucho en mi nuevo blog que usara muchas imágenes 😀