Taller: ¿Cómo añadir un botón `me gusta´ en una página con iframe en Facebook?

La técnica de iframes nos permite “reintegrar” plugins sociales en pestañas de nuestras páginas de fans. Con Nike Fútbol Spain presentamos ayer un ejemplo de una página que hace uso extensivo de esta técnica. Nike es una multinacional con páginas de miles de fans. Pero también hay un uso muy interesante para las páginas de fans más pequeñas: conseguir que un usuario se haga fan en la pestaña de inicio a través de un plugin “me gusta”.



En el caso de BuyVIP España hay una pestaña de inicio para los no-fans. Ahí la primera meta para cualquier administrador de página tiene que ser que el usuario se convierta en fan. En el pasado hemos visto diseños creativos que ponían un enfoque en el botón “me gusta” arriba del todo.

Ahora se puede mostrar el botón “me gusta” directamente en el diseño.

Manos a la obra -

Antes de empezar hay que cumplir con los siguientes requisitos:

  • La cuenta del administrador tiene que estar verificada
  • como para cualquier otra pestaña con iframe hace falta un espacio web
  • una aplicación en Facebook con OAuth 2.0 activado
  • subir la Facebook php sdk en el espacio web . La encontráis en https://github.com/facebook/php-sdk

Paso 1: configurar la pestaña inicial

<?php
require_once 'facebook/facebook.php';
$facebook = new Facebook(array(
	'appId' => '182339698481533',     // poner tu propria appId
   	'secret' => 'jjjjjjjaaaaaaaajjjjjjj'  // poner tu proprio código secreto
));
$signedRequest = $facebook->getSignedRequest();
if ($signedRequest['page']['liked']) {
	// usuario ya es fan.
} else {
	// usuario todavía no es fan.
}
?>

Paso 2: cargar javascript facebook connect e iniciarlo

 <script type="text/javascript" src="http://connect.facebook.net/es_Es/all.js"></script>
<script type="text/javascript">
FB.init({
    appId:'182339698481533',
    cookie:false,
    status:false,
    xfbml:true
});
</script>
<div id="fb-root"></div> 

Paso 3: hacer el rendering del botón “me gusta” a través de xfbml & añadir el reload handler

 <div id="like_button">
  <fb:like href="http://www.facebook.com/cuentamelared.com" layout="button_count" show_faces="false" width="85"></fb:like>
</div>
<!-- poner el url de tú página de fans -->
<script type="text/javascript">
  FB.Event.subscribe('edge.create', function(response) {
    top.location.href='http://www.facebook.com/cuentamelared.com?sk=app_182339698481533';
  });
<!-- poner tu propria appId -->
</script> 

Paso 4: ocultar el like count a través de css

Este paso es opcional y depende  de si queréis o no que se vea el número  fans.

<style type="text/css">
  #like_button {
    width: 85px;
    overflow: hidden;
  }
</style>

Austriaco y casado con una española, lleva años trabajando en marketing en internet como CEO de AVISEO, empresa especializada en SEO y SEM, también para el mercado español. Uno de sus primeros pasos fue escribir este blog sobre el mundo de Facebook para empresas.

Deja un comentario

2 comentarios

  1. Saludo, podrian explicarlo un poco mejor? donse se deben cargar esos codigos¿

  2. Muchas gracias por la explicación. Aprovecho para preguntar si suele notarse de forma clara algun aumento de visitas por el hecho de tener el botón. Un saludo!!