Agregar el Facebook Like Button en un Sitio Web


Hace poco en un proyecto utilicé el botón like de Facebook para compartir el contenido de un sitio web.

Al parecer, el botón es muy fácil de agregar, de hecho en la API de Facebook hay una sección en la que te genera automáticamente el código que necesitas insertar en tu sitio web para que el botón aparezca.

El sitio web consistía en un catálogo en línea, el cual mostraba propiedades (casas, terrenos, departamentos, etc.).
El problema con el que yo me encontraba era que la página en la que yo quería insertar el botón representaba un registro del catálogo, por lo tanto, tenía la necesidad de estilizar el contenido del enlace que se compartiría en el timeline de los usuarios al momento de hacer click en el botón like.

Para empezar, en la API de Facebook lo primero que se hace es configurar el botón de like, después se generan las etiquetas Open Graph, las cuales utilizan el Open Graph Protocol, el cual nos permitirá estilizar el contenido que se va a mostrar en el timeline una vez que un usuario hace click en el boton.


<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta property="og:title" content="Mi Sitio: Propiedad <?php echo $propiedad[0]->folio;?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.misitio.com/propertyDetail/<?php echo $propiedad[0]->idpropiedad; ?>" />
<?php if(isset($fotos[0]->foto)) :?>
 <meta property="og:image" content="<?php echo base_url() . '/casas/thumbs/' . $fotos[0]->foto;?>" />
 <meta property="og:image:width" content="200" />
 <meta property="og:image:height" content="200" />
<?php else :?>
 <meta property="og:image" content="http://www.misitio.com/images/logo.png" />
<?php endif;?>
<meta property="og:site_name" content="Mi sitio" />
<meta property="fb:admins" content="000000000" />
<meta property="og:description" content="<?php echo $propiedad[0]->descripcion;?>"/>

En esta primera parte del código, lo que se hace es declarar las Open Graph Tags, las cuales van a estilizar el contenido de nuestro mensaje en el timeline.
Las propiedades que utilizo en este ejemplo son las mínimas que debe de tener nuestro objeto (botón like) para que funcione correctamente.

En este código,  utilizo un poco de PHP, ya que por medio de arreglos obtengo los datos  de una propiedad, entonces en el titulo del enlace que se va a compartir en el timeline quiero que aparezca el numero de registro; a su vez, también quiero mostrar una foto de la propiedad, por lo cual hago una validación, si no encuentra una foto de la propiedad, muestra el logo de la página. Finalmente, la url especificada, es la url que contiene el registro.
Aquí hay una cuestión importante, la propiedad “og:url” es a donde el botón like va a  redireccionarse para obtener las etiquetas Open Graph. En este caso, como la información es diferente para cada registro, especifico con ayuda de php la url que contiene dicho registro.

Como dato interesante, es necesario que se especifique el id del administrador de Facebook  (el que tenias antes de crear tu nombre de dominio p.e. http://www.facebook.com/pako.herrera). Normalmente, ese Id aparece automáticamente cuando generas las etiquetas Open Graph en la página del Like Button. Lo que aún no me queda claro es cuál Id es el que se debe de utilizar, si el del usuario, el de la página o el de la aplicación.

Después de terminar con esa parte de configuración, lo que sigue es insertar el script que va a generar el botón like. Se recomienda que el script se ponga enseguida de la etiqueta <body>:


<div id="fb-root"></div>
 <script>
 (function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>

Este script es el que permite que los usuarios interactúen con la API de Facebook.

Finalmente, agregamos el html donde queremos insertar el botón like:


<div data-href="http://www.misitio.com/propertyDetail/<?php echo $p->idpropiedad;?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>

Y el resultado final quedaría así:

Anuncios
Esta entrada fue publicada el 28 noviembre, 2012 a las 21:13. Se guardó como Tech y etiquetado como , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: