En artículos anteriores relacionados con Facebook hemos visto cómo crear una pestaña con iFrames en tu página de fans de Facebook y cómo incluir social plugins y otros elementos sociales en una página de fans de Facebook. Ahora vamos a viajar desde Facebook hasta nuestra propia web, ya que lo que queremos es traer las funcionalidades sociales de Facebook a WordPress, principalmente los Social Plugins como los botones “Me gusta” y “Enviar” o las “Recomendaciones” o los “Comentarios”. Y sin usar ningún plugin de WordPress.
Si habéis hecho hasta ahora como yo (añadir sin más los botones “Me gusta” o “Enviar” de Facebook a nuestro blog de WordPress) os habréis dado cuenta de que no podemos elegir la información que se va a publicar en el muro del usuario que ha hecho click en el botón correspondiente. Lo peor de todo es que Facebook selecciona una imagen cualquiera del artículo sin que nosotros tengamos control ninguno de cual es. Por ejemplo, en vez de:
donde como veis el usuario va a compartir un artículo para el cual Facebook ha tomado mi foto (Toma ya! Tardé en darme cuenta de dónde la había sacado: de los avatares de los comentarios), ¿no queda mejor esto?:
Pues para conseguir esto tenemos que incluir los Meta Tags del Open Graph de Facebook. Vamos a ver como.
Protocolo OpenGraph de Facebook
Si seguimos los pasos que nos indica Facebook en su página sobre el Open Graph Protocol vemos que este nos permite integrar nuestra página web en el “social graph” de Facebook, es decir, que Facebook reconozca nuestra web y podamos intercambiar información y aplicaciones sociales con Facebook usando el código que esta red social nos ofrece para tal fin.
Para incluir el Open Graph Protocol hay que incluir los “Open Graph tags” en nuestra web, lo que la va a hacer equivalente a una página de Facebook. Cuando un usuario hace click en el botón “Me gusta” de tu página se produce una conexión entre tu página y el usuario. Tu página aparecerá en la sección “Actividades e Intereses” de su perfil y tendrás la posibilidad de publicar actualizaciones para ese usuario. Tu página aparecerá en también en los resultados de búsqueda con los enlaces correspondientes.
Añadiendo los Open Graph tags
Tal y como hemos visto, necesitamos incluir los Open Graph protocol meta tags y el botón “Me gusta”. Los “Tags” son los que van a dar información a Facebook sobre nuestra web o sobre cada página de nuestra web.
Veamos el ejemplo que nos da Facebook:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock"/> <meta property="og:type" content="movie"/> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/> <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/> <meta property="og:site_name" content="IMDb"/> <meta property="fb:admins" content="USER_ID"/> <meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/> ... </head> ... </html> |
Vemos que toda la información va dentro de la etiqueta “head” de nuestra web. Vamos a ver cada una de las líneas:
- Líneas 1 a 3, tenemos que incluir los xlmns que nos indica aquí Facebook dentro de la etiqueta html.
- og:title (requerido): El título, en este caso “The Rock”. En el caso de un artículo de un blog será el título del artículo.
- og:type (requerido): El tipo de objeto, en este caso movie (película). Podéis ver todos los tipos disponibles en este enlace. Para un artículo de un blog sería “article”.
- og:url (requerido): El URL permanente del objeto, por ejemplo el URL del artículo de un blog.
- og:image (requerido): Una imagen que representará al objeto para Facebook. La imagen debe tener al menos 50px por 50px y un ratio máximo de 3:1. Formatos soportados: PNG, JPEG y GIF. Se pueden incluir múltiples tags og:image para asociar múltiples imágenes de tu página.
- og:site_name (requerido): El nombre de tu sitio web.
- fb:admins o fb:app_id (requerido) – Lista de los ID de usuario de los administradores de tu página de Facebook o un ID de la plataforma de aplicaciones de Facebook. Se pueden incluir los dos. Ahora veremos como obtenerlos.
- og:description: Se recomienda incluir una descripción así como otras meta tags extra que aporten según el caso más información (localización, información de contacto…)
Todos estos datos es facil obtenerlos del contenido de nuestra web, excepto los ID de usuario o de Aplicación, que nos los da Facebook. Vamos a obtenerlos antes de nada.
Obteniendo el ID de usuario
El el número que hay que incluir en el meta tag fb:admins. Para obtenerlo id a vuestro perfil personal. Si hacéis click sobre la imagen de vuestro perfil el URL que saldrá abajo tendrá un “id=” y a continuación un número. Este es vuestro ID. En el caso de que tengáis una URL amigable, el URL que saldrá será del tipo:
|
1 |
http://www.facebook.com/media/set/fbx/?set=a.1449807999970.2061416.1076322697&l=3dbda270f3 |
El tercer número (en este caso 1076322697) es vuestro ID.
Lo han hecho un poco rebuscado…..
Obteniendo el ID de la Aplicación
Es el número que hay que incluir en fb:app_id. Para obtenerlo hemos de registrar nuestra web en Facebook. Para ello haced click en http://developers.facebook.com/setup/. Os pedirá el nombre del sitio web, su URL y su ubicación:
Una vez hayáis incluido vuestros datos ya tendrás tu web registrada. Apunta el “App ID” ya que este será el número que vas a tener que poner en el meta tag fb:app_id y a la hora de añadir el Facebook Javascript SDK.
Creando los meta tag de Facebook en nuestro tema de WordPress
Vamos a incluir los meta tags de Facebook en nuestro blog de WordPress. Eso implica que los meta tags se van a generar de manera dinámica, ya que el título, la imagen, la URL, etc.. serán distintos para cada artículo.
Lo que sí es estable es lo que hay que añadir en la etiqueta html. Por ejemplo, en el caso de esta web de Emenia:
|
1 2 3 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" dir="ltr" lang="es-ES"> |
La parte dinámica, los meta tags. Abrimos el archivo functions.php de nuestro tema y escribimos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function add_facebook_open_graph_tags() { if (is_single()) { global $post; $image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 50,50 ), false, '' ); if (!$image) $image = 'URL A IMAGEN POR DEFECTO SI FALTA IMAGEN'; ?> <meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:type" content="article" /> <meta property="og:image" content="<?php echo $image[0]; ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" /> <meta property="fb:admins" content="ID DE USUARIO"/> <meta property="fb:app_id" content="ID DE LA APLICACION" /> <?php } } add_action('wp_head', 'add_facebook_open_graph_tags',99); |
Hemos creado una función que tiene como “hook” el wp_head()
Comprobad que vuestro tema tiene dentro de la etiqueta head, normalmente en el archivo header.php y al final de la misma:
|
1 |
wp_head(); |
Ahí es donde WordPress situará de manera automática el código HTML con los meta tags.
Como véis, he puesto como condición que sólo se carguen si estamos en single(), es decir, en un artículo completo que es donde normalmente pondremos el botón “Me gusta”. Esto lo podéis cambiar a vuestro antojo.
- En la línea 4 obtenemos la imagen que usamos como imagen destacada del artículo. Si queréis usar otra imagen distinta tendríais que poner aquí su URL.
- En las líneas 5 a 7 ofrecemos una imagen por defecto para el caso en que el artículo no tenga imagen destacada. Poned aquí la ruta a dicha imagen.
- En la línea 8 ponemos como título el título del artículo.
- En la línea 9 ponemos la tipología. Tal y como veríais en el enlace que os dí más arriba con los tipos disponibles, para un artículo de un blog hay que poner “article”.
- En la línea 10 ponemos la imagen. Sería la primera del array que creamos en la línea 4.
- En la línea 11 irá la URL del artículo.
- En la línea 12 va el nombre de la web. En este caso he incluido la función de WordPress que ofrece lo que hayamos puesto en el administrador, pero lo podemos escribir directamente.
- En la línea 13 va el ID de usuario del administrador de la página. Antes vimos cómo obtenerlo.
- En la línea 14 va el ID de la Aplicación, que también hemos obtenido antes.
Por ejemplo, en el artículo anterior del blog de Emenia los meta-tags generados fueron:
|
1 2 3 4 5 6 7 8 |
<meta property="og:title" content="5 consejos sobre cómo usar Twitter (Parte I)" /> <meta property="og:type" content="article" /> <meta property="og:image" content="http://www.emenia.es/wp-content/uploads/2011/01/twitter.jpg" /> <meta property="og:url" content="http://www.emenia.es/cinco-consejos-como-usar-twitter-parte-uno/" /> <meta property="og:site_name" content="emenia.es" /> <meta property="fb:admins" content="1076322697"/> <meta property="fb:app_id" content="211495545542141" /> |
Como veis no uso la meta-tag og:description porque dejo que Facebook use la descripción que he puesto para la meta-etiqueta “description” usando el plugin All-in-one-SEO. Pero se podría poner que en la descripción use the_excerpt() por ejemplo:
|
1 |
<meta property="og:description" content="<?php the_excerpt(); ?>" /> |
Para comprobar que está todo correcto puedes introducir el UR de un artículo de tu blog en el Facebook URL Linter. Ahí te dirán si hay algún error y de cual se trata. Es curioso porque a veces, para artículos que ya están publicados, Facebook no refrescará su información sobre los mismos hasta que no introduzcas su URL en Facebook URL Linter, por lo que seguirá tomando los datos antiguos hasta que no lo hagas.
Añadiendo el Facebook Javascript SDK a tu web
Para hacer funcionar correctamente los Plugins Sociales de Facebook en nuestra web vamos a necesitar el Facebook Javascript SDK. La forma más eficiente de cargar el SDK en tu web es hacerlo de forma asincrónica de tal manera que no bloquee la carga de otros elementos de tu web. Siguiendo las instrucciones de Facebook y si sólo queremos que se cargue para los artículos de nuestro blog (tal y como hicimos con las meta tags), abrimos el archivo header.php y justo debajo de la apertura de la etiqueta body escribimos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php if (is_single()) { ?> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'ID DE LA APLICACION', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/es_ES/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script> <?php } ?> |
Sólo tendréis que cambiar el ID de la Aplicación y poner el que obtuvimos antes.
Añadiendo el botón “Me gusta” y el nuevo botón “Enviar” de Facebook
A estas alturas tenemos ya los meta tags y cargado el Facebook Javascript SDK. Ya estamos en condiciones de incluir los Plugins sociales de Facebook. Vamos a empezar por los botones “Me gusta” y “Enviar”.
Para incluirlos simplemente tendremos que escribir donde queremos que salga el botón:
|
1 |
<fb:like></fb:like> |
Pero esta es la versión más básica, donde dejamos que todo salga por defecto. Los atributos que podemos usar (ver la web de Facebook sobre el botón “Me Gusta”):
- href – la URL, Por defecto será la URL donde se encuentre el botón.
- send – especifica si se incluye el botón “Enviar” con el botón “Me gusta”. Para ello hay que poner send=”true”.
- layout – hay tres opciones:
a) standard – muestra el texto social a la derecha del botón y las fotos de los amigos abajo. Ancho mínimo: 225 pixels. Ancho por defecto: 450 pixels. Altura 35 pixels (sin fotos) o 80 pixels (con fotos).
b) button_count – muestra elnúmero total de “Me gusta” a la derecha del botón. Anchura mínima: 90 pixels. Ancho por defecto: 90 pixels. Altura 20 pixels.
c) box_count – muestra el número total de “Me gusta” sobre el botón. Ancho mínimo: 55pixels. Ancho por defecto: 55 pixels. Altura 65 pixels. - show_faces – especifica si se muestran las fotos de perfil debajo del botón (sólo para stardard layout). Puede ser true o false.
- width – Anchura del botón “Me gusta”.
- action – La palabra que se muestra sobre el botón. Puede ser “like” o “recommend”.
- font – La fuente que tendrá el texto sobre el botón. Opciones:t ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’.
- colorscheme – el esquema de color del botón. Opciones: ‘light’, ‘dark’.
- ref – Una etiqueta para analíticas del botón. Por ejemplo si hay dos en la misma página, podemos darle a uno una etiqueta y a otro otra diferente.
Por ejemplo, en la web de Emenia es:
|
1 |
<div class="fb-like"><fb:like show_faces="false" width="450" send="true"></fb:like></div> |
Añadiendo otros social plugins
Pero podéis no quedaros aquí. Ahora tenéis vuestra web lista para interactuar más con Facebook incluyendo otros Plugins Sociales. Podéis incluir Comentarios, Recomendaciones, etc…
Por ejemplo, en el blog de Emenia incluyo las recomendaciones de Facebook en un widget de texto del sidebar escribiendo:
|
1 |
<fb:recommendations site="http://www.emenia.es/" width="230" height="500" header="true" font="" border_color="#F0EEE5"></fb:recommendations> |
Hola una gran saludo, excelente explicación, apenas tenga tiempo voy a ponerla en practica… he tenido ese inconveniente en mi pagina de BlackRatCustom, no puedo controlar que imagen se va a mostrar cuando alguien hace click en “Me Gusta” Muchas gracias por este articulo! luego les cuento como me fue….
Hola, he aplicado lo que explicas aquí y me ha funcionado, pero tengo problemas con otro plugin (social counters) de wordpress que antes de hacer este cambio funcionaba bien el botón de compartir y mostraba la imagen del post y daba la opción de elegir otra foto o compartirlo sin imagen. Luego de poner la foto fija en el header.php con las explicaciones que hay en éste post, el botón compartir de facebook ya no me da la opción de seleccionar una foto para mostrar, directamente me muestra el texto del post , sin mas opciones. ¿Qué puede estar ocurriendo? Me urge solucionarlo. Desde ya muchas gracias por tu pronta respuesta. Slds.
Hola Silvia,
No conozco el plugin que me comentas. ¿No te pone la imagen del post unido al texto cuando le das a compartir? Puedes seleccionar tu qué es lo que quieres que se una al texto que se va a compartir.
Hola Juan.
No, solo me pone el texto y la imagen no la pone. Quisiera que aparezca el texto y la imagen correspondiente al post que estoy compartiendo. Gracias de antemano por la ayuda que puedas darme
Hola Silvia,
Lo único que se me ocurre es que quizás no esté bien definida la imagen que incorporas a Facebook? En el ejemplo que puse en el artículo es la imagen destacada que se añade dentro del artículo, en la columna de la derecha. ¿Tienes ahí alguna imagen? Si quieres otra imagen dentro del artículo tendrás que ponerla.
Hola Juan, he comenzado de cero todo otra vez y me he encontrado con que no había hecho el paso de buscar la id de la aplicación. Cuando intento obtener la id de la aplicación, al entrar en facebook developers, me pide confirmar mi identidad con un movil, pero nunca me llega el mensaje al movil con el código, con lo cual allí me quedo, no puedo obtener la id de la aplicación. ¿Sabes si hay alguna otra forma de obtener la id de la aplicación? Gracias por todo. Un saludo.
Hola Juan, luego de trastear un poco, he insertado nuevos posts y esos tienen la imagen asociada, pero algunos de los posts anteriores no. He optado por dejarlo así y ver que ocurre. Si en algún nuevo post no me vuelve a tomar la imagen, volveré a preguntarte. Muchas gracias por tu ayuda
Un saludo
Hola Silvia,
Con los antiguos quizás no te aparezcan porque los tiene ya Facebook en su caché. Prueba con la solución que pongo en el artículo escribiendo la url del artículo en http://developers.facebook.com/tools/lint
Gran post. Pero cuando ingreso el codigo en functions.php me sale error. ¿En qué parte exactamente del functions hay que colocar ese codigo?
Hola Angel,
Qué error te da? No tiene por qué estar en una ubicación determinada de functions.php
Saludos Juan, muy buen post… felicidades por el sitio…
creo que estoy un poco confundido.. estoy en la parte de obtener el id de la aplicación, cuando quiero registrar mi pagina web y pongo la direcion url, me da error y me pide una web dinamica, es decir que la url termine en “/” o “?”,
para esto tengo una cuenta de suario y una fanpage en facebook y estoy haciendo la gestión logeado con mi cuenta d usuario, popdrias decirme donde esta el error….?
Hola Juan, excelente explicación pero yo tengo puesto el Me gusta con un simple que es el que te proporciona facebook developper y no encuentro el parámetro en esta versión donde se especifique la imagen que quiero que aprarezca. No se si me falta algo más; lo que tengo es básicamente esto:
Muchas gracias
Hola, debes agregar manualmente los Open Graph, ahi arriba lo explica! saludos
Excelente artículo, te felicito.
Ahora falta ponerlo a prueba.
Mil gracias
Justo lo que buscaba, quisiera saber si esto tambien seria valido para el boton de compartir.