Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Facebook en WordPress: Meta Tags, Javascript SDK y los Social Plugins
#1
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:

[Imagen: fb_enviar11.jpg]

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?:

[Imagen: fb_like_21.jpg]

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:


Código:
<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.
ogConfundidoite_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:

Código:
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:

[Imagen: aplicacion_facetags.jpg]


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:

Código:
<!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:


Código:
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:

Código:
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:

Código:
<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:

Código:
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:


Código PHP:
<?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:

Código:
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:

Código:
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:

Código:
1
<fb:recommendations site="http://www.emenia.es/" width="230" height="500" header="true" font="" border_color="#F0EEE5"></fb:recommendations>
#2
La lista de números 1, 2, 3, ... Bórralos.

Y si haces un Copy&Paste (como es este caso), lo dejas para que se vean bien los post Guiño
WWW
#3
aparte e eso envuelve el codigo en las etiquetas correspondientes a nuestros mycode Guiño
WWW
#4
ordena un poco el tema, se ve interesante, pero a la vez da pereza leer por lo enredado del tema.
#5
Muy buen tema. A ver si lo ordenan, porfavor. Muchas gracias.
#6
se ve genial, pero no se entiendo bien
#7
Si envolvieras los codigos en la etiqueta php o de code queria mucho mas organizado.

Hazlo porfavor me enreda xd Confundido
#8
Gracias por el Dato Sonrisa
#9
WWW
#10
Vaya buen tema!!! a probar se ah dicho


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  WordPress: Artículos vs Páginas Carlos Mendoza 7 131 22-05-2017, 08:23 PM
Último mensaje: brettavz
Bug Error og:image en wordpress yuma2009 8 419 03-05-2017, 05:04 AM
Último mensaje: ReyNexo23
  Solucionado: WordPress 4.7.2 versión de seguridad Vicen 15 341 17-04-2017, 09:49 PM
Último mensaje: brettavz
  Wordpress problema [While Screen] yuma2009 4 164 03-02-2017, 04:04 AM
Último mensaje: yuma2009
  multiples errores en web con wordpress elcarnes 11 367 05-01-2017, 09:41 AM
Último mensaje: Vicen
  LMS para Wordpress xvvrsoftware 15 536 23-12-2016, 07:07 AM
Último mensaje: Lerans
Exclamación [HACK] Wordpress Bloodman and 1x33x7 yuma2009 4 172 22-12-2016, 12:16 AM
Último mensaje: jcifuentes
Arcoiris Resolver error en wordpress magoazul 6 265 01-12-2016, 07:49 AM
Último mensaje: Duandri23
Arcoiris Olvidaste clave y correo en wordpress magoazul 13 401 17-11-2016, 05:53 PM
Último mensaje: angelismo
  Curso Wordpress para Iniciados Parte 01: Instalación en Localhost Carlos Mendoza 10 373 16-10-2016, 06:28 PM
Último mensaje: Mtraker



Usuarios navegando en este tema: 1 invitado(s)