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>