Inicio > Facebook, FBML > Como crear una página Facebook para fans y no fans

Como crear una página Facebook para fans y no fans

Seguramente habremos visto en algunas páginas fan de facebook cambian en el momento en el que nos hacemos fans. Si es lo que buscas para tu página Facebook aquí tienes la respuestas a tus busquedas de Google.

Lo primero que crearemos serán los dos contenidos el que verán los usuarios que te visitan por primera vez (NO-FAN) y el que verá una vez le haya dado al “Me gusta” (FAN)

En mi caso he creado dos imágenes, pero para el ejemplo usaremos el NO-FAN y el FAN

Acto seguido crearemos una fan-page en facebook y la pondremos como página principal para los no-fan. Si no sabéis como crearla podéis visitar el post de como crear una página fan en Facebook.

Una vez creada la pestaña introduciremos el codigo, para que el contenido de la pestaña cambie dependiendo si eres o no fan usaremos fb:visible-to-connection y la sintaxys seria la siguiente:

<div id="wrapper"> <fb:visible-to-connection> FANS: Contenido que verán una vez conectados (me gusta)  <fb:else> <div id="non-fans">NO-FANS Contenido que verán si no están conectados. </div>  </fb:else>  </fb:visible-to-connection> </div>

Con este código podemos decir que ya lo tenemos listo, nosotros veremos los dos contenidos juntos porque  somos administradores de la página pero el resto de usuario solo vera el que le corresponde. El problema que existe ahora y que se hace más apreciable cuando el contenido es imagen, es que nosotros vemos una imagen arriba y otra abajo, la de No-Fan y la de Fan, y los usuarios al ver la de No Fan que es la segunda y esta en la parte inferior apreciará una separación, la correspondiente a la imagen Fan. Habrá un vacio perteneciente al contenido de la página Fan.

Para solucionarlo es bien sencillo, como veis hemos incluido varios div en el código, pues en la parte superior de este código incluiremos los estilos que harán que la parte inferior (NO FAN) se posicionará en la parte superior así al conectarnos se producirá un pase de una imagen o contenido a otra.

<style>
#wrapper {
  width:520px;
  margin:0 auto; border:0; padding:0;
  position:relative;
}
#non-fans {
  width:520px;
  position:absolute; top:0; left:0;
}
</style>

Los estilos también pueden ser substituidos por una pagina CSS:

<link rel=”stylesheet” type=”text/css” href=”URL-TO-EXTERNAL-STYLESHEET” />

Código e imagenes de prueba.

Código Funcionando:  Salinasjavi Fan Page

Fuente: SocialMeda Examiner

  1. Juanpi
    3 agosto 2011 a las 08:15

    y como te fue con el iframe, yo estoy en la misma situacion.

  2. Enrique Acevedo
    28 marzo 2011 a las 14:47

    Muy interesante Javi, pero esto afecta un poco cuando se trata de iframes, (Bueno hasta ahora no he logrado conseguirlo en un iframe), pero leyendo en un blog encontre lo siguiente:

    function parsePageSignedRequest() {
    if (isset($_REQUEST[‘signed_request’])) {
    $encoded_sig = null;
    $payload = null;
    list($encoded_sig, $payload) = explode(‘.’, $_REQUEST[‘signed_request’], 2);
    $sig = base64_decode(strtr($encoded_sig, ‘-_’, ‘+/’));
    $data = json_decode(base64_decode(strtr($payload, ‘-_’, ‘+/’), true));
    return $data;
    }
    return false;
    }
    if($signed_request = parsePageSignedRequest()) {
    if($signed_request->page->liked) {
    echo “This content is for Fans only!”;
    } else {
    echo “Please click on the Like button to view this tab!”;
    }
    }

    Que realiza lo mismo de fans y no fans de una pagina en iframe. Miralo haber que te parece. Saludos!!!

    • 28 marzo 2011 a las 14:51

      Gracias Enrique lo probaré y os contaré.

      Saludos

  1. 14 marzo 2015 a las 07:54

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: