Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
¿has deseado alguna vez aprender cómo hacer que tus aplicaciones sean más sociales con Facebook? ¡Es mucho más fácil de lo que piensas!
En este tutorial vamos a construir una aplicación que lee y publica datos en y desde Facebook usando su Graph API. ¿Te interesa? ¡Acompáñame tras el salto!
Una breve introducción al protocolo de Open Graph
El protocolo Open Graph posibilita que cualquier página web se convierta en un objeto enriquecido para un gráfico social. Por ejemplo, esto se utiliza en Facebook para permitir que cualquier página web tenga la misma funcionalidad que cualquier otro objeto en Facebook.
Aunque existen muchas distintas tecnologías y esquemas que pueden combinarse entre sí, no existe una única tecnología que proporcione suficiente información como para representar de forma enriquecida cualquier página web dentro del gráfico social. El protocolo Open Graph construye sobre estas tecnologías preexistentes y le proporciona a los desarrolladores algo que implementar. La simplicidad para los desarrolladores es un objetivo clave del protocolo Open Graph el cual ha informado sobre muchas de sus decisiones técnicas relacionadas con su diseño.
En pocas palabras, el protocolo Open Graph convierte cualquier página web en un objeto dentro de un inmenso gráfico. Cada objeto, al menos en los objetos dentro del gráfico de Facebook, pueden tener muchos otros objetos vinculados a él. Por ejemplo, una Facebook Page (página de Facebook) puede tener múltiples objetos Post, es decir, publicaciones realizadas por esa página. A cambio, cada objeto Post puede tener múltiples objetos Comment (comentario) adjuntos a él, haciendo referencia a los comentarios escritos por la gente en la publicación. Esta relación entre los objetos gráficos es la base de la Graph API de Facebook, que a cambio nos permite realizar operaciones CRUD sobre dichos objetos.
En este tutorial, estaremos aprendiendo cómo usar e integrar la Graph API de Facebook en una aplicación. También aprenderemos cómo usar datos de la Graph API para realizar operaciones como el inicio de sesión de un usuario a través de su perfil de Facebook. Por último, estaremos creando una pequeña aplicación que le permita a la gente crear y leer publicaciones de una Página de Facebook que estén gestionando, al igual que hace HootSuite o TweetDeck.
Paso 1: Crear una aplicación de Facebook
Lo primero que deberías hacer cuando estés planeando usar la Graph API de Facebook es crear una aplicación en dicha plataforma. Esto no significa que vayamos a poner necesariamente la aplicación en Facebook (aunque podríamos); simplemente necesitamos la aplicación de Facebook (concretamente un APP ID y un APP SECRET para acceder a la API.
Abre http://developers.facebook.com y haz clic en el enlace Apps situado en la barra de navegación.
Sitio para desarrolladores de Facebook
De inmediato, se te solicitará que inicies sesión (si es que aún no lo has hecho) y que permitas que la aplicación Developer acceda a tu cuenta. Simplemente haz clic sobre Allow y serás redirigido a la página de inicio de la Developer App.
Permitir el acceso a la aplicación Developer
En la página de inicio de Developer App, haz clic sobre Create New App en la esquina superior derecha de la página.
Página de inicio de la aplicación para desarrolladores
Serás bienvenido mediante una ventana modal que te solicitará el nombre visible de la App (App Display Name) y el "namespace" o el espacio de nombres para la App (App Namespace). Proporciona aquí lo que desees, pero en este tutorial, yo voy a usar Nettuts+ Page Manager y nettuts-page-manager respectivamente. Haga clic en Continue.
Nacimiento de Nettuts+ Page Manager
Después de cumplimentar un captcha de comprobación, serás redireccionado a la nueva página de tu recién acuñada aplicación. Aquí verás el APP ID y el APP SECRET que necesitamos. Copia y pega estos valores en algún lugar para su uso posterior.
El ID de APP y APP SECRET
Cuando hayas hecho esto, dirígete a la parte inferior de la página y haz clic en la caja "Website", bajo ella debería aparecer un formulario que te pregunte sobre la URL del sitio (Site URL). Dado que yo solo estoy usando un equipo local para crear la aplicación, usaré http://localhost/nettuts/pagemanager. Cuando hayas terminado, haz clic sobre el botón inferior que dice Save Changes (Guardar los cambios).
Configuración del Administrador de páginas de Nettuts+
Paso 2: Descargar y configurar el SDK PHP de Facebook
Página GitHub de Facebook
Nuestra siguiente tarea consiste en descargar y configurar el SDK para PHP de Facebook. El mejor sitio para obtenerlo sería la página de Facebook en GitHub, ya que ahí estará la última y la mejor versión del SDK para PHP.
Descargar el SDK PHP de Facebook
Diríge tu navegador a https://github.com/facebook/php-sdk y haz clic sobre el botón "ZIP". Esto debería iniciar una descarga de la última versión del SDK. Guárdalo donde prefieras.
Ahora, extrae en include_path de PHP para que sea accesible para cualquier aplicación. Como alternativa, si estás usando esto simplemente para una aplicación, extráelo dentro de la carpeta de la aplicación, simplemente, asegúrate de tomar nota de donde lo haces, ya que más adelante tendremos que incluir facebook.php en nuestro código.
Paso 3: Leer desde Facebook a través de la Graph API
Empecemos a crear nuestro proyecto y a usar la Graph API de Facebook para leer información desde Facebook. Para los principiantes, cread un archivo index.php en donde un usuario pueda iniciar sesión a través de Facebook. El archivo index.php debería contener el siguiente código: El archivo index.php debería contener el siguiente código:
1 |
|
2 |
<!DOCTYPE html>
|
3 |
<html>
|
4 |
<head>
|
5 |
<title>Nettuts+ Page Manager</title> |
6 |
<link rel="stylesheet" href="css/reset.css" type="text/css" /> |
7 |
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> |
8 |
<script src="js/jquery.min.js"></script> |
9 |
|
10 |
<style>
|
11 |
body { |
12 |
padding-top: 40px; |
13 |
}
|
14 |
#main { |
15 |
margin-top: 80px; |
16 |
text-align: center; |
17 |
}
|
18 |
</style>
|
19 |
</head>
|
20 |
<body>
|
21 |
<div class="topbar"> |
22 |
<div class="fill"> |
23 |
<div class="container"> |
24 |
<a class="brand" href="/">Nettuts+ Page Manager</a> |
25 |
</div>
|
26 |
</div>
|
27 |
<div id="main" class="container"> |
28 |
<a href="connect.php" class="btn primary large">Login via Facebook</a> |
29 |
</div>
|
30 |
</body>
|
31 |
</html>
|
Por si te lo estás preguntando, reset.css es simplemente una hoja de restablecimiento de estilos, y bootstrap.min.css es Twitter Bootstrap. También he añadido jQuery a la combinación para que sea más fácil hacer cosas desde el lado del cliente. Si actualizas la página ahora, debería tener un aspecto similar al siguiente:
Primera ejecución del Administrador de página de Nettuts+
Creemos ahora nuestro archivo connect.php, el cual nos permitirá conectar la cuenta de un usuario de Facebook y las páginas que él o ella administre. Comencemos incluyendo la librería de Facebook que descargamos anteriormente. Crea una instancia, utilizando el APP ID y el APP SECRET:
1 |
|
2 |
|
3 |
//include the Facebook PHP SDK
|
4 |
include_once 'facebook.php'; |
5 |
|
6 |
//instantiate the Facebook library with the APP ID and APP SECRET
|
7 |
$facebook = new Facebook(array( |
8 |
'appId' => 'REPLACE WITH YOUR APP ID', |
9 |
'secret' => 'REPLACE WITH YOUR APP SECRET', |
10 |
'cookie' => true |
11 |
));
|
La variable $facebook podrá usarse ahora para hacer llamadas API a Facebook en nombre de la aplicación.
- Los ajustes de
appIDle indican a Facebook qué aplicación estamos usando. - El ajuste
secret"autentifica" nuestras llamadas a la API, indicándole a Facebook que proceden de alguien propietario de la aplicación. Esto nunca (never) debería mostrarse de forma pública, y por eso se le denomina "Application Secret" (secreto de aplicación). - El ajuste de la
cookiele indica a la librería que almacene la sesión del usuario usando cookies. Sin esto, no seríamos capaces de saber si el usuario ha iniciado sesión a través de Facebook o no.
Ahora, comprobamos si el actual usuario ya ha concedido acceso a la aplicación. Si no es así, la aplicación los debe redirigir a la página "Dar permisos" de Facebook.
1 |
|
2 |
|
3 |
//Get the FB UID of the currently logged in user
|
4 |
$user = $facebook->getUser(); |
5 |
|
6 |
//if the user has already allowed the application, you'll be able to get his/her FB UID
|
7 |
if($user) { |
8 |
//do stuff when already logged in
|
9 |
} else { |
10 |
//if not, let's redirect to the ALLOW page so we can get access
|
11 |
//Create a login URL using the Facebook library's getLoginUrl() method
|
12 |
$login_url_params = array( |
13 |
'scope' => 'publish_stream,read_stream,offline_access,manage_pages', |
14 |
'fbconnect' => 1, |
15 |
'redirect_uri' => 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] |
16 |
);
|
17 |
$login_url = $facebook->getLoginUrl($login_url_params); |
18 |
|
19 |
//redirect to the login URL on facebook
|
20 |
header("Location: {$login_url}"); |
21 |
exit(); |
22 |
}
|
En esencia, esto es todo lo que sucede aquí:
- La aplicación hace una sencilla llamada a la API para obtener el ID del usuario de Facebook (también conocido como
FB UID) a través del método$facebook->getUser(). - Si la variable
$usertiene un valor, significa que el usuario ya ha concedido permisos básicos a la aplicación. - De no ser así, significa que el usuario no ha dado todavía permisos a la aplicación, y esta debe redirigirles a la página de permisos de Facebook para obtener los permisos necesarios.
- Después genera una URL de inicio de sesión (
Login URL), a la cual debería redirigir al usuario para mostrarle la página de permisos de Facebook para la aplicación. El métodogetLoginUrl()toma los siguientes parámetros:-
scope: es una lista de permisos delimitada por comas que necesita la aplicación -
fbconnect: esto debería ser1para indicarle a Facebook que la aplicación estará usando Facebook para autenticar al usuario -
redirect_uri: esta es la página a la que redirige Facebook después de que el usuario haya ido a la página de permisos de Facebook
Puedes leer más sobre el método
getLoginUrl()aquí: https://developers.facebook.com/docs/reference/php/facebook-getLoginUrl/ -
- Después, la aplicación redirecciona al usuario a la URL de inicio de sesión (
Login URL) y el usuario verá la página de permisos de Facebook.
Página de permisos de Facebook
Permisos de Facebook
Hablemos un minuto sobre los permisos de Facebook. De igual forma que cuando instalas una aplicación en tu teléfono Android, los permisos de Facebook conceden varios niveles de acceso que una aplicación de Facebook puede conceder en nombre de un usuario. Por ejemplo, si quisiéramos acceder a la dirección de email, podríamos añadir el permiso email en el ajuste scope que usamos para generar la URL de inicio de sesión.
Recuerda, un gran poder va acompañado de una gran responsabilidad, así que asegúrate de usar los permisos únicamente para el bien, no para el mal.
Es importante que tu aplicación solo le solicite al usuario los permisos que realmente necesite. Si solo necesitas autentificar a un usuario a través de Facebook, ¡ni siquiera necesitas solicitar ningún permiso en absoluto! Recuerda, un gran poder va acompañado de una gran responsabilidad, así que asegúrate de usar los permisos únicamente para el bien, no para el mal.
En nuestra app, usamos los siguientes permisos:
-
publish_stream: le permite a la aplicación publicar actualizaciones en Facebook en nombre del usuario -
read_stream: le permite a la aplicación leer desde el muro de noticias del usuario -
offline_access: convierte elaccess_tokena uno que no expire, además le permite a la aplicación hacer llamadas a la API en cualquier momento. Sin esto, elaccess_tokende la aplicación expirará tras unos minutos, lo que no es ideal en este caso -
manage_pages: le permite a la aplicación acceder a las páginas de Facebook del usuario. Dado que la aplicación que estamos construyendo tiene que ver con las páginas de Facebook, también necesitaremos esto.
Existen muchos otros permisos que Facebook solicita para diversas cosas. Puedes leer todo sobre los mismos en la documentación de los permisos de Facebook.
Volviendo a la aplicación, ahora que el usuario ha concedido los permisos que esta ha solicitado, ¡podemos realizar algunas llamadas API a Facebook! Coloca esto dentro del bloque if-else del código de arriba:
1 |
|
2 |
<pre>
|
3 |
//start the session if needed |
4 |
if( session_id() ) {
|
5 |
|
6 |
} else {
|
7 |
session_start(); |
8 |
} |
9 |
|
10 |
//get the user's access token |
11 |
$access_token = $facebook->getAccessToken(); |
12 |
|
13 |
//check permissions list |
14 |
$permissions_list = $facebook->api( |
15 |
'/me/permissions', |
16 |
'GET', |
17 |
array( |
18 |
'access_token' => $access_token |
19 |
) |
20 |
); |
21 |
</pre>
|
Lo primero que hacemos es obtener el $access_token del usuario que la aplicación acaba de autenticar. Esto es crucial, ya que la aplicación necesitará este token de acceso para cualquier cosa que hagamos. Para obtenerlo, usamos el método getAccessToken(). El $access_token actúa a modo de ‘contraseña’ del usuario. Siempre es único para cada usuario en cada aplicación, así que asegúrate de almacenarlo cuando sea necesario.
Después, podemos ver como hacer llamadas API a Facebook usando el método api(). Este método toma los siguientes parámetros:
-
$graph_path: esta es la ruta del graph de Facebook, es en esencia la “URL” al objeto open graph al que queremos acceder. Puede tratarse de cualquier objeto gráfico en Facebook, como unPost(p. ej. '/<post_id>'), unComment(p. ej. '/<comment_id>'), e incluso unUser('/me' es una abreviación del usuario al que pertenezca el$access_token. También puede ser '/<user_name>' o '/<fb_uid>', pero el$access_tokenque estés usando debe (must) tener acceso a ese usuario, de otro modo solo tendrás acceso a la información pública del mismo). -
$method: este es el tipo de método que deseas realizar. Cuando intentas obtener información, este suele serGET,POSTcuando intentas publicar o actualizar información, yDELETEsi quieres eliminarla. Si no estás seguro de cuál debes utilizar, la documentación de la Graph API te dirá que método debes usar para realizar una llamada API concreta. -
$params: estos son los parámetros que vienen con la solicitud de API. Por lo general, para los métodosGETsolo necesitas proporcionar el$access_tokendel usuario. Sin embargo, para los métodosPOST, también tendrás que proporcionar otros parámetros. Por ejemplo, si deseas publicar una nueva actualización de estado, proporcionarías aquí el mensaje de actualización de estado.
Alternativamente, también podemos usar el método api() para ejecutar consultas FQL (Lenguaje de consulta de Facebook), lo que nos permite obtener datos a través del estilo de lenguaje SQL. Esto es ideal para recuperar información que no esté disponible en Graph API, así como para ejecutar varias consultas en una llamada. Por ejemplo, podemos obtener el nombre de un usuario y otros detalles a través de esta llamada a la API de FQL:
1 |
|
2 |
$fql = 'SELECT name from user where uid = ' . $fb_uid; |
3 |
$ret_obj = $facebook->api(array( |
4 |
'method' => 'fql.query', |
5 |
'query' => $fql, |
6 |
));
|
No necesitaremos esto para este tutorial, pero es bueno tenerlo en cuenta cuando te encuentres con algo que Graph API no pueda obtener.
Ahora que tenemos la lista de permisos que el usuario ha concedido a la aplicación, tenemos que comprobar si este dio a la aplicación todos los necesarios. Dado que la página de permisos de Facebook permite a los usuarios revocar ciertos permisos, debemos asegurarnos de que todos ellos hayan sido concedidos para que la aplicación pueda funcionar. Si el usuario ha revocado uno de los permisos, los redirigiremos de nuevo a la página de permisos.
1 |
|
2 |
//check if the permissions we need have been allowed by the user
|
3 |
//if not then redirect them again to facebook's permissions page
|
4 |
$permissions_needed = array('publish_stream', 'read_stream', 'offline_access', 'manage_pages'); |
5 |
foreach($permissions_needed as $perm) { |
6 |
if( !isset($permissions_list['data'][0][$perm]) || $permissions_list['data'][0][$perm] != 1 ) { |
7 |
$login_url_params = array( |
8 |
'scope' => 'publish_stream,read_stream,offline_access,manage_pages', |
9 |
'fbconnect' => 1, |
10 |
'display' => "page", |
11 |
'next' => 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'] |
12 |
);
|
13 |
$login_url = $facebook->getLoginUrl($login_url_params); |
14 |
header("Location: {$login_url}"); |
15 |
exit(); |
16 |
}
|
17 |
}
|
var_dump() de la variable $permissions_list
Cuando esto haya terminado, significará que estamos listos y podremos ejecutar la aplicación sin ningún problema. Comencemos por hacer otra llamada a la API, esta vez para recuperar la lista de páginas de Facebook sobre las que el usuario tiene derechos administrativos y para guardarla en una variable de sesión. Después, redirigiremos al usuario a la página manage.php, donde estará el código de gestión de la página.
1 |
|
2 |
//if the user has allowed all the permissions we need,
|
3 |
//get the information about the pages that he or she managers
|
4 |
$accounts = $facebook->api( |
5 |
'/me/accounts', |
6 |
'GET', |
7 |
array( |
8 |
'access_token' => $access_token |
9 |
)
|
10 |
);
|
11 |
|
12 |
//save the information inside the session
|
13 |
$_SESSION['access_token'] = $access_token; |
14 |
$_SESSION['accounts'] = $accounts['data']; |
15 |
//save the first page as the default active page
|
16 |
$_SESSION['active'] = $accounts['data'][0]; |
17 |
|
18 |
//redirect to manage.php
|
19 |
header('Location: manage.php'); |
var_dump() de la variable $accounts
La ruta del gráfico /me/accounts nos da una lista de las páginas sobre las que un usuario tiene derechos administrativos. Esto devuelve una matriz de todas las páginas, además de $access_tokens específicos para cada una de ellas. Con esos $access_tokens, ¡también podremos hacer llamadas a la API en nombre de la página de Facebook!
Guárdalos en la matriz $_SESSION y redirige a la página manage.php.
Comencemos a trabajar en nuestro archivo manage.php. Recuerda que hemos guardado la lista de $accounts del usuario en la matriz $_SESSION, así como establecido la primera cuenta de la lista como la página activa predeterminada. Vamos a obtener (GET) la fuente de noticias de esa cuenta y a mostrarla:
1 |
|
2 |
//include the Facebook PHP SDK
|
3 |
include_once 'facebook.php'; |
4 |
|
5 |
//start the session if necessary
|
6 |
if( session_id() ) { |
7 |
|
8 |
} else { |
9 |
session_start(); |
10 |
}
|
11 |
|
12 |
//instantiate the Facebook library with the APP ID and APP SECRET
|
13 |
$facebook = new Facebook(array( |
14 |
'appId' => 'APP ID', |
15 |
'secret' => 'APP SECRET', |
16 |
'cookie' => true |
17 |
));
|
18 |
|
19 |
//get the news feed of the active page using the page's access token
|
20 |
$page_feed = $facebook->api( |
21 |
'/me/feed', |
22 |
'GET', |
23 |
array( |
24 |
'access_token' => $_SESSION['active']['access_token'] |
25 |
)
|
26 |
);
|
Una vez más, la aplicación hace la inicialización de la biblioteca de Facebook, y luego otra llamada api(), esta vez a /me/feed. Ten en cuenta que en lugar de usar el token de acceso del usuario, usamos el token de acceso de la página activa (a través de $_SESSION['active']['access_token']). Esto le indica a Facebook que queremos acceder a la información como Página de Facebook y no el usuario.
var_dump() de la variable $page_feed
Vaya, eso es mucha información sobre un Post de Facebook. Vamos a diseccionar un solo objeto Post de Facebook y ver de qué está hecho.
El objeto Post de Facebook
Hoja de trucos de Post de Facebook
-
id: este es el ID delPost -
from: contiene información sobre el usuario que publicó la publicación -
message (red): el componente del mensaje de la publicación -
picture (orange): un enlace a la foto adjunta a la publicación -
nombre (blue): el "título" de la publicación de Facebook -
link (also blue): el enlace a donde va el nombre (name) cuando se hace clic -
caption (purple): unas pocas palabras para describir el enlace -
description (pink): más de unas pocas palabras para describir el enlace -
icon (grey): un enlace a la imagen del icono utilizado -
actions: acciones de Facebook que puedes ejecutar sobre la publicación, como darle alMe gustaoComentarsobre ella. -
privacy: la privacidad de la publicación -
type: el tipo de publicación. Una publicación puede ser un estado (status), un enlace (link), una foto (photo) o un vídeo (video). -
created_time: el momento en que se creó la publicación -
updated_time: el momento en que se actualizó la publicación -
comments: comentarios en la publicación
Sería prudente guardar una copia de la anterior hoja de trucos, ya que la usaremos de nuevo cuando publiquemos objetos Post en Facebook.
Continuando, vamos a mostrar el feed de noticias de una manera más agradable. Añade el siguiente código HTML debajo del código PHP:
1 |
|
2 |
<!DOCTYPE html>
|
3 |
<html>
|
4 |
<head>
|
5 |
<title>Nettuts+ Page Manager</title> |
6 |
<link rel="stylesheet" href="css/reset.css" type="text/css" /> |
7 |
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> |
8 |
<script src="js/jquery.min.js"></script> |
9 |
|
10 |
<style>
|
11 |
body { |
12 |
padding-top: 40px; |
13 |
background-color: #EEEEEE; |
14 |
}
|
15 |
img { |
16 |
vertical-align: middle; |
17 |
}
|
18 |
#main { |
19 |
text-align: center; |
20 |
}
|
21 |
|
22 |
.content { |
23 |
background-color: #FFFFFF; |
24 |
border-radius: 0 0 6px 6px; |
25 |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); |
26 |
margin: 0 -20px; |
27 |
padding: 20px; |
28 |
}
|
29 |
.content .span6 { |
30 |
border-left: 1px solid #EEEEEE; |
31 |
margin-left: 0; |
32 |
padding-left: 19px; |
33 |
text-align: left; |
34 |
}
|
35 |
.page-header { |
36 |
background-color: #F5F5F5; |
37 |
margin: -20px -20px 20px; |
38 |
padding: 20px 20px 10px; |
39 |
text-align: left; |
40 |
}
|
41 |
</style>
|
42 |
|
43 |
</head>
|
44 |
<body>
|
45 |
<div id="main" class="container"> |
46 |
<div class="content"> |
47 |
<div class="page-header"> |
48 |
<h1>
|
49 |
<img width="50" src="http://graph.facebook.com/<?php echo $_SESSION['active']['id']; ?>/picture" alt="<?php echo $_SESSION['active']['name']; ?>" /> |
50 |
<?php echo $_SESSION['active']['name']; ?>
|
51 |
<small><a href="http://facebook.com/profile.php?id=<?php echo $_SESSION['active']['id']; ?>" target="_blank">go to page</a></small> |
52 |
</h1>
|
53 |
</div>
|
54 |
<div class="row"> |
55 |
<div class="span10"> |
56 |
<ul id="feed_list"> |
57 |
<?php foreach($page_feed['data'] as $post): ?>
|
58 |
<?php if( ($post['type'] == 'status' || $post['type'] == 'link') && !isset($post['story'])): ?>
|
59 |
<?php //do some stuff to display the post object ?>
|
60 |
<?php endif; ?>
|
61 |
<?php endforeach; ?>
|
62 |
</ul>
|
63 |
</div>
|
64 |
<div class="span6"> |
65 |
<h3>Post a new update</h3> |
66 |
</div>
|
67 |
</div>
|
68 |
</div>
|
69 |
</div>
|
70 |
</body>
|
71 |
</html>
|
Aquí usamos un simple truco de Graph API: el objeto Picture de la Graph API. Básicamente, puede tomar la ruta Graph de cualquier objeto User o Page (por ejemplo, http://graph.facebook.com/293518907333589), añade /picture al final y obtendrás una foto de 50x50 de ese objeto. Por ejemplo:
https://graph.facebook.com/293518907333589/picture
Se convierte en...
Demostración del objeto Picture de la Graph API
Volviendo, cuando ahora actualizamos la página manage.php, debería tener un aspecto similar a este:
Añade esto dentro de <?php foreach($page_feed['data'] como $post): ?> para mostrar el feed desde la página:
1 |
|
2 |
<?php if( ($post['type'] == 'status' || $post['type'] == 'link') && !isset($post['story'])): ?>
|
3 |
<li>
|
4 |
<div class="post_photo"> |
5 |
<img src="http://graph.facebook.com/<?php echo $post['from']['id']; ?>/picture" alt="<?php echo $post['from']['name']; ?>"/> |
6 |
</div>
|
7 |
|
8 |
<div class="post_data"> |
9 |
<p><a href="http://facebook.com/profile.php?id=<?php echo $post['from']['id']; ?>" target="_blank"><?php echo $post['from']['name']; ?></a></p> |
10 |
<p><?php echo $post['message']; ?></p> |
11 |
<?php if( $post['type'] == 'link' ): ?>
|
12 |
<div>
|
13 |
<div class="post_picture"> |
14 |
<?php if( isset($post['picture']) ): ?>
|
15 |
<a target="_blank" href="<?php echo $post['link']; ?>"> |
16 |
<img src="<?php echo $post['picture']; ?>" width="90" /> |
17 |
</a>
|
18 |
<?php else: ?>
|
19 |
|
20 |
<?php endif; ?>
|
21 |
</div>
|
22 |
<div class="post_data_again"> |
23 |
<p><a target="_blank" href="<?php echo $post['link']; ?>"><?php echo $post['name']; ?></a></p> |
24 |
<p><small><?php echo $post['caption']; ?></small></p> |
25 |
<p><?php echo $post['description']; ?></small></p> |
26 |
</div>
|
27 |
<div class="clearfix"></div> |
28 |
</div>
|
29 |
<?php endif; ?>
|
30 |
</div>
|
31 |
<div class="clearfix"></div> |
32 |
</li>
|
33 |
<?php endif; ?>
|
Cuando actualices la página de nuevo, debería tener un aspecto similar al siguiente:
Se ve bien, ¿verdad? ¡Tendremos que agradecer al CSS de Twitter Bootstrap por esto!
Ahora, vamos a añadir una barra de navegación superior para ayudarnos a cambiar entre una página y otra. Añade el siguiente código HTML después de la etiqueta <body> y antes de la etiqueta <div id="main" class="container">:
1 |
|
2 |
<div class="topbar"> |
3 |
<div class="fill"> |
4 |
<div class="container"> |
5 |
<a class="brand" href="/">Nettuts+ Page Manager</a> |
6 |
<ul class="nav secondary-nav"> |
7 |
<li class="dropdown" data-dropdown="dropdown"> |
8 |
<a class="dropdown-toggle" href="#">Switch Page</a> |
9 |
<ul class="dropdown-menu"> |
10 |
<?php foreach($_SESSION['accounts'] as $page): ?>
|
11 |
<li>
|
12 |
<a href="switch.php?page_id=<?php echo $page['id']; ?>"> |
13 |
<img width="25" src="http://graph.facebook.com/<?php echo $page['id']; ?>/picture" alt="<?php echo $page['name']; ?>" /> |
14 |
<?php echo $page['name']; ?>
|
15 |
</a>
|
16 |
</li>
|
17 |
<?php endforeach; ?>
|
18 |
</ul>
|
19 |
</li>
|
20 |
</ul>
|
21 |
</div>
|
22 |
</div>
|
23 |
</div>
|
No olvides cargar la biblioteca desplegable de JavaScript desde la página JavaScript de Twitter Bootstrap. Puede descargarla desde aquí.
1 |
|
2 |
<script src="js/bootstrap-dropdown.js"></script> |
3 |
<script>
|
4 |
$('.topbar').dropdown() |
5 |
</script>
|
Por último, vamos a crear el archivo switch.php, donde estableceremos otra página como la página activa:
1 |
|
2 |
<?php
|
3 |
session_start(); |
4 |
$page_id = $_GET['page_id']; |
5 |
|
6 |
foreach($_SESSION['accounts'] as $page) { |
7 |
if( $page['id'] == $page_id ) { |
8 |
$_SESSION['active'] = $page; |
9 |
header('Location: manage.php'); |
10 |
exit(); |
11 |
}
|
12 |
}
|
13 |
exit(); |
14 |
?>
|
Actualiza la página manage.php de nuevo, deberías ver algo como esto:
Y ahora, mediante el uso de nuestro conmutador desplegable, podemos cambiar de página.
Paso 4: Publicar en Facebook a través de la Graph API
¡Ahora estamos listos para publicar nuevas actualizaciones en nuestra página! En primer lugar, vamos a crear el formulario HTML donde podemos establecer lo que vamos a publicar. Añade esto bajo el HTML <h3>Publicar una nueva actualización</h3>:
1 |
|
2 |
<img src="post_breakdown.png" alt="Facebook Post Cheat Sheet" width="340" /><br /> |
3 |
<form method="POST" action="newpost.php" class="form-stacked"> |
4 |
<label for="message">Message:</label> |
5 |
<input class="span5" type="text" id="message" name="message" placeholder="Message of post" /> |
6 |
<label for="picture">Picture:</label> |
7 |
<input class="span5" type="text" id="picture" name="picture" placeholder="Picture of post" /> |
8 |
<label for="link">Link:</label> |
9 |
<input class="span5" type="text" id="link" name="link" placeholder="Link of post" /> |
10 |
<label for="name">Name:</label> |
11 |
<input class="span5" type="text" id="name" name="name" placeholder="Name of post" /> |
12 |
<label for="caption">Caption:</label> |
13 |
<input class="span5" type="text" id="caption" name="caption" placeholder="Caption of post" /> |
14 |
<label for="description">Description:</label> |
15 |
<input class="span5" type="text" id="description" name="description" placeholder="Description of post" /> |
16 |
|
17 |
<div class="actions"> |
18 |
<input type="submit" class="btn primary" value="Post" /> |
19 |
<input type="reset" class="btn" value="Reset" /> |
20 |
</div>
|
21 |
</form>
|
Actualiza para ver qué aspecto tiene:
Me encantan los estilos de formulario predeterminados de Twitter Bootstrap
La hoja de trucos Post debería resultarte útil mientras estamos averiguando qué poner en los campos. Ahora, vamos a crear el archivo newpost.php donde usaremos la Graph API de Facebook para publicar en el muro de la página.
Comienza creando el archivo e inicializando la biblioteca de Facebook como hicimos para las otras páginas:
1 |
|
2 |
<?php
|
3 |
//include the Facebook PHP SDK
|
4 |
include_once 'facebook.php'; |
5 |
|
6 |
//start the session if necessary
|
7 |
if( session_id() ) { |
8 |
|
9 |
} else { |
10 |
session_start(); |
11 |
}
|
12 |
|
13 |
//instantiate the Facebook library with the APP ID and APP SECRET
|
14 |
$facebook = new Facebook(array( |
15 |
'appId' => 'APP ID', |
16 |
'secret' => 'APP SECRET', |
17 |
'cookie' => true |
18 |
));
|
19 |
?>
|
Después, vamos a obtener todo el contenido que recibimos de la solicitud POST:
1 |
|
2 |
//get the info from the form
|
3 |
$parameters = array( |
4 |
'message' => $_POST['message'], |
5 |
'picture' => $_POST['picture'], |
6 |
'link' => $_POST['link'], |
7 |
'name' => $_POST['name'], |
8 |
'caption' => $_POST['caption'], |
9 |
'description' => $_POST['description'] |
10 |
);
|
No olvidemos añadir el $access_token de la página a los parámetros:
1 |
|
2 |
//add the access token to it
|
3 |
$parameters['access_token'] = $_SESSION['active']['access_token']; |
Ahora que tenemos nuestra matriz de $parameters, ¡vamos a crear y enviar nuestra solicitud de Graph API!
1 |
|
2 |
//build and call our Graph API request
|
3 |
$newpost = $facebook->api( |
4 |
'/me/feed', |
5 |
'POST', |
6 |
$parameters
|
7 |
);
|
Toma nota de la diferencia que pueden marcar los métodos $method. Una llamada GET de la API a /me/feed devolverá el feed de noticias de ese objeto en particular, pero una llamada POST de la API a /me/feed publicará una nueva actualización de estado en el objeto.
Para publicar un nuevo objeto Post en Facebook, la aplicación debe realizar una llamada a la ruta del gráfico /<page_id o /me>/feed, y debe proporcionar lo siguiente en la matriz $parameters:
-
access_token: el token de acceso de la cuenta para la que estamos publicando -
message: el mensaje a publicar -
picture(opcional): un enlace a la foto de la publicación -
name(opcional): el "título" de la publicación -
link(opcional): un enlace al que irá el nombre (name) cuando se haga clic sobre él -
caption(opcional): unas pocas palabras para describir el link/name -
description(opcional): más de unas pocas palabras para describir el link/name
Puedes ver que los únicos parámetros que son necesarios son los access_token y los parámetros de message. Al proporcionar solo estos dos, podemos publicar una sencilla actualización de estado, de la siguiente manera:
Ejemplo de actualización de estado
Todo lo demás es opcional. Sin embargo, si proporcionas un name, un link, un title o una description, debes proporcionar los cuatro. En cuanto a picture, si no se proporciona un valor de parámetro o no se puede acceder a él, la imagen de la publicación quedará en blanco.
Por último, ¡vamos a tratar de publicar en Facebook utilizando la aplicación! Vuelve a la página manage.php y rellena el formulario, luego presiona Post:
Después, deberías ser redirigido de nuevo a la página manage.php, ¡aunque debería haber una nueva publicación en el feed!
¡Publicando con éxito en Facebook!
También puedes consultar la propia página de Facebook. Allí deberías ver la nueva publicación:
Publicación en la página de Facebook
Conclusión
Ahora, ya deberías tener una idea clara de cómo usar la Graph API de Facebook para leer y publicar en esta red social. En este tutorial, solo cubrimos los conceptos básicos: hay mucho más que puedes hacer con Graph API. Cosas como actualizaciones en tiempo real, que te permiten suscribirte a eventos que les sucedan a los usuarios de la aplicación (por ejemplo, cuando un usuario cambia su foto de perfil) o el objeto gráfico Insights, que te permite obtener las estadísticas de una aplicación, página o dominio al que el usuario tenga acceso.
Por supuesto, el mejor recurso para aprender más sobre la Graph API es, sin duda, su propia documentación en Facebook, pero también te sugiero que eches un vistazo a FBDevWiki, que es una wiki alojada de terceros para la documentación sobre el desarrollo de Facebook.
FBDevWiki.com
Además, también existe una versión especial de Facebook de StackOverflow que puedes visitar en http://facebook.stackoverflow.com. Aquí todas las preguntas versan sobre Facebook y el desarrollo de Facebook, por lo que vale la pena visitarlo si necesita ayuda o tienes alguna pregunta sobre el tema.
StackOverflow de Facebook
Con suerte, habrás aprendido en este tutorial lo fácil que resulta usar la Graph API de Facebook para conseguir que tus aplicaciones sean más sociales.
¿Has usado la Graph API de Facebook en un anterior proyecto o estás planeando usarlo ahora? Cuéntamelo a través de la sección de comentarios que viene a continuación, ¡y muchas gracias por leerme!
By
