Mas informacion tras el salto
Landing Page utilizando el API de Facebook
En las anteriores entradas hemos visto como crear una Landing Page con una aplicación como Static HTML iframe tabs.
Hay varias aplicaciones externas que realizan el mismo cometido que la que hemos explicado, pero en esta entrada nos vamos a centrar en como crearlas con nuestro propio código sin depender de ningúna aplicación externa y usando el API de Facebook y sus SDK Tools.
Para hacer webs que vayan a ir en páginas de facebook utilizaremos el PHP SDK, que se puede descargar desde GitHub aquí.
En la carpeta src vendrán los dos ficheros que deberán estar en nuestro directorio de la web que irá en la página facebook, facebook.php y base_facebook.php, nuestro otro fichero lo llamaremos index.php y en el irá el código para crear la landing page.
Primero deberemos crear nuestra aplicación donde irá nuestra web, iendo a la parte dedesarrollador de facebook, y haremos click en el apartado Aplicaciones de la parte superior, y daremos permisos a la aplicación Desarrollador de Facebook.
Se rellena el formulario que aparece y en su día cuando yo lo tuve que hacer, me pedía el número de móvil para recibir un mensaje o introducir una tarjeta de crédito (no cobran nada), yo introduje el número de una tarjeta y no hubo problema.
Para crear nuestra primera aplicación solo tenemos que hacer click en Create New App, dar un nombre a la aplicación, y posteriormente rellenar el formulario siguiendo estos pasos (haz clic aquí) poniendo la URL de la web donde estará nuestro código.
Actualmente, facebook avisa de que a partir del 1 de octubre se deberá insertar la url de nuestra web con protocolo de seguridad.
El código de index.php será el siguiente:
Como ves en el código se muestra como con el objeto signed_request es utilizado paracompartir información entre nuestra aplicación web y Facebook pudiéndose obtener datos como el país del usuario, si es administrador de la página o si ha hecho click en "Me Gusta", que en este código he controlado con la variable $like_status = $signed_request["page"]["liked"].
En caso de que el valor de la variable sea 1, es que el usuario ha hecho click en Me Gusta, sino el valor es vacío, por lo tanto con un simple If en el código se puede diferenciar entre si el usuario se ha hecho FAN o no, y tendríamos nuestra Landing Page.
Finalmente desde la URL de nuestra aplicación creada (del formato http://apps.facebook.com/XXXXX/) hacemos click en la parte de abajo donde viene EN GRIS EL NOMBRE DE LA APLICACIÓN, y después en Añadir a mi página y seleccionamos la página donde queremos que vaya nuestra Landing Page.
Podéis comentar cualquier duda.
Hay varias aplicaciones externas que realizan el mismo cometido que la que hemos explicado, pero en esta entrada nos vamos a centrar en como crearlas con nuestro propio código sin depender de ningúna aplicación externa y usando el API de Facebook y sus SDK Tools.
Para hacer webs que vayan a ir en páginas de facebook utilizaremos el PHP SDK, que se puede descargar desde GitHub aquí.
En la carpeta src vendrán los dos ficheros que deberán estar en nuestro directorio de la web que irá en la página facebook, facebook.php y base_facebook.php, nuestro otro fichero lo llamaremos index.php y en el irá el código para crear la landing page.
Primero deberemos crear nuestra aplicación donde irá nuestra web, iendo a la parte dedesarrollador de facebook, y haremos click en el apartado Aplicaciones de la parte superior, y daremos permisos a la aplicación Desarrollador de Facebook.
Se rellena el formulario que aparece y en su día cuando yo lo tuve que hacer, me pedía el número de móvil para recibir un mensaje o introducir una tarjeta de crédito (no cobran nada), yo introduje el número de una tarjeta y no hubo problema.
Para crear nuestra primera aplicación solo tenemos que hacer click en Create New App, dar un nombre a la aplicación, y posteriormente rellenar el formulario siguiendo estos pasos (haz clic aquí) poniendo la URL de la web donde estará nuestro código.
Actualmente, facebook avisa de que a partir del 1 de octubre se deberá insertar la url de nuestra web con protocolo de seguridad.
El código de index.php será el siguiente:
<?php
/*Llamada al fichero facebook.php*/
require 'facebook.php';
/*Introducimos datos de nuestra aplicación anteriormente creada en la parte de desarrollador*/
$app_id = "*************";
$app_secret = "*********************************";
/*y creamos nuestro objeto facebook*/
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
/*obtenemos datos de la SIGNED_REQUEST*/
$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$like_status = $signed_request["page"]["liked"];
$country = $signed_request["user"]["country"];
$locale = $signed_request["user"]["locale"];
$userid = $signed_request["user_id"]["locale"];
?>
<head>
<title>PRUEBA FACEBOOK</title>
<link rel="stylesheet" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<div id="container" >
/*Llamada al fichero facebook.php*/
require 'facebook.php';
/*Introducimos datos de nuestra aplicación anteriormente creada en la parte de desarrollador*/
$app_id = "*************";
$app_secret = "*********************************";
/*y creamos nuestro objeto facebook*/
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
/*obtenemos datos de la SIGNED_REQUEST*/
$signed_request = $facebook->getSignedRequest();
$page_id = $signed_request["page"]["id"];
$page_admin = $signed_request["page"]["admin"];
$like_status = $signed_request["page"]["liked"];
$country = $signed_request["user"]["country"];
$locale = $signed_request["user"]["locale"];
$userid = $signed_request["user_id"]["locale"];
?>
<head>
<title>PRUEBA FACEBOOK</title>
<link rel="stylesheet" href="styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<div id="container" >
<?php
/*CON LA VARIABLE $LIKE_STATUS SABEMOS SI EL USUARIO HA HECHO CLICK EN "ME GUSTA" */
if ($like_status == 1){
echo '<div style="position:relative">';
echo '<p>YA ERES NUESTRO FAN, BIENVENIDO A NUESTRA APLICACIÓN</p>';
echo '</div>';
}
else{
echo '<div style="position:relative">';
echo '<p>HAZTE NUESTRO FAN PINCHANDO EN ME GUSTA!!!</p>';
echo '</div>';
}
?>
</div>
</body>
</html>
/*CON LA VARIABLE $LIKE_STATUS SABEMOS SI EL USUARIO HA HECHO CLICK EN "ME GUSTA" */
if ($like_status == 1){
echo '<div style="position:relative">';
echo '<p>YA ERES NUESTRO FAN, BIENVENIDO A NUESTRA APLICACIÓN</p>';
echo '</div>';
}
else{
echo '<div style="position:relative">';
echo '<p>HAZTE NUESTRO FAN PINCHANDO EN ME GUSTA!!!</p>';
echo '</div>';
}
?>
</div>
</body>
</html>
Como ves en el código se muestra como con el objeto signed_request es utilizado paracompartir información entre nuestra aplicación web y Facebook pudiéndose obtener datos como el país del usuario, si es administrador de la página o si ha hecho click en "Me Gusta", que en este código he controlado con la variable $like_status = $signed_request["page"]["liked"].
En caso de que el valor de la variable sea 1, es que el usuario ha hecho click en Me Gusta, sino el valor es vacío, por lo tanto con un simple If en el código se puede diferenciar entre si el usuario se ha hecho FAN o no, y tendríamos nuestra Landing Page.
Finalmente desde la URL de nuestra aplicación creada (del formato http://apps.facebook.com/XXXXX/) hacemos click en la parte de abajo donde viene EN GRIS EL NOMBRE DE LA APLICACIÓN, y después en Añadir a mi página y seleccionamos la página donde queremos que vaya nuestra Landing Page.
Podéis comentar cualquier duda.
No hay comentarios:
Publicar un comentario