Crear un Facebook News Feed para página web

Facebook News Feed es una herramienta gratuita que he desarrollado para poder mostrar noticias de cualquier página de Facebook mediante Iframe.

Este es un «Paso a paso» para los que quieran aventurarse a investigar cómo funciona la API de facebook.

Para empezar hay que tener una cuenta en Facebook (lo más seguro es que ya tengas tu cuenta personal).

Si ya la tienes es hora de empezar creando una APP.

La APP servirá para conectar con los servicios que ofrece la API de Facebook. Yo la he llamado Page Feeder para darle un nombre algo diferente. En prinpcio se llamaría Facebook Page Feeder pero por normas de Facbeook, la APP no puedes utilizar la palabra «Face» dentro del nombre.

Rellenamos todos los datos y continuamos con la documentación:

desarrolladores-de-facebook

Configuración

Ahora toca configurar la APP. Los puntos más importantes son:

  1. Seleccionar»Producto»: Inicio de Sesión con Facebook
  2. Entrar en Configuración -> Básica: configurar el sitio donde haremos las pruebas
  3. Obtener el ID de la aplicación y la Clave Secreta

1. Seleccionamos Producto Inicio de Sesión

Yo he dejado todo deshabilitado porque no lo necesitamos, pero es obligatorio tener aunque sea uno de los productos que nos muestran para configurar la APP.

2. Configurar el sitio donde haremos las pruebas

Añadimos el sitio donde haremos las pruebas. Si estamos haciendo las pruebas utilizando un WAMP o cualquier plataforma desde nuestro ordeandor en «Local» necesitaremos dar permisos para que facebook pueda comunicarse. Rellenamos con la palabra «localhost» en el campo «Dominios de la aplicación».

Creamos la «Plataforma» con la que vamos a trabajar. En nuestro caso un «Sitio web» y en el campo habilitado añadimos el dominio para que nos valide las conexiones.

Ejemplo en «REAL / PRODUCCIÓN»

 

Ejemplo en LOCAL / DESARROLLO

3. Identificador de la aplicación y Clave secreta de la aplicación

Anotamos «Identificador de la aplicación» y «Clave secreta de la aplicación» para utilizarlas en nuestros archivos de prueba.

Testing

Para hacer las pruebas pertinentes en nuestra app de Facebook News Feed he instalado la api de facebook en mi propio espacio web.

Descarga disponible desde SDK para PHP FACEBOOK

El SDK de Facebook para PHP es una biblioteca con funciones eficaces que le permiten a los desarrolladores de PHP integrar fácilmente el inicio de sesión con Facebook y realizar solicitudes a la API Graph. También es compatible con el SDK de Facebook para JavaScript y permite ofrecerle al usuario de administración la mejor experiencia posible. Además, el SDK de Facebook para PHP facilita la subida de fotos y videos, y el envío de solicitudes por lotes a la API Graph, entre otras cosas. Además, el SDK para PHP cuenta con muchos puntos de extensibilidad para que los desarrolladores de PHP tengan el control total de cómo interactúa con entornos de alojamiento y marcos web específicos.

Una vez instalado el SDK y haber revisado la documentación, crearemos los archivos de prueba para crear el FEED.

Os dejo aquí el enlace para poder descargarlo todo: Facebook News Feed – PHP

Login

Lo primero que vamos a hacer es utilizar el Login de Facebook para poder obtener los permisos. Lo guardamos en un archivo llamado loign-fb.php:

// Cargar la configuración de la aplicación
$fb = new Facebook\Facebook([
'app_id' => 'ID-APLICACIÓN', // Sustituir con el Identificador de la aplicación
'app_secret' => 'CLAVE-SECRETA-APLICACIÓN' // Sustituir con la Clave secreta de la aplicación
]);

// Función que nos permitirá obtener el token de acceso para solicitar permisos a nuestra cuenta
$helper = $fb->getRedirectLoginHelper();

// Permisos que deseamos obtener
$permissions = ['manage_pages','user_location','user_posts']; // optional

// Crea la URL para la autenticación con Facebook
$loginUrl = $helper->getLoginUrl('http://url-local/fb-callback.php', $permissions); // Sustituir "url-local" con la url donde harás las pruebas

// Botón de Login
echo '<a href="' . $loginUrl . '">Log in with Facebook!</a>';

Callback

Una vez creado el interfaz para hacer el Login de Facebook y hayamos obtenido los permisos necesarios, crearemos la llamada a la aplicación mediante el archivo que llamaremos fb-callback.php:

// Cargar la configuración de la aplicación
$fb = new Facebook\Facebook([
'app_id' => 'ID-APLICACIÓN', // Sustituir con el Identificador de la aplicación
'app_secret' => 'CLAVE-SECRETA-APLICACIÓN' // Sustituir con la Clave secreta de la aplicación
]);

// Obtener un token de acceso del redireccionamiento
$helper = $fb->getRedirectLoginHelper(); 

try {
$accessToken = $helper->getAccessToken();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}

if (! isset($accessToken)) {
if ($helper->getError()) {
header('HTTP/1.0 401 Unauthorized');
echo "Error: " . $helper->getError() . "\n";
echo "Error Code: " . $helper->getErrorCode() . "\n";
echo "Error Reason: " . $helper->getErrorReason() . "\n";
echo "Error Description: " . $helper->getErrorDescription() . "\n";
} else {
header('HTTP/1.0 400 Bad Request');
echo 'Bad request';
}
exit;
}

// Logged in
echo '<h3>Access Token</h3>';
var_dump($accessToken->getValue());

// The OAuth 2.0 client handler helps us manage access tokens
$oAuth2Client = $fb->getOAuth2Client();

// Get the access token metadata from /debug_token
$tokenMetadata = $oAuth2Client->debugToken($accessToken);
echo '<h3>Metadata</h3>';
var_dump($tokenMetadata);
$accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);

/*
Cuando un usuario inicia sesión en tu aplicación por primera vez, el token de acceso de la
aplicación recibe un token de acceso de corta duración con una vigencia de dos horas aproximadamente.
Una buena idea es cambiar este token por uno de larga duración, que estará activo alrededor de 60 días.
*/
echo '<h3>Long-lived</h3>';
var_dump($accessToken->getValue());

$_SESSION['fb_access_token'] = (string) $accessToken;

// User is logged in with a long-lived access token.
// You can redirect them to a members-only page.
header('Location: http://url-local/login-ok.php');
exit();

Login OK

Ya hemos obtenido los datos necesarios para poder aplicarlo a nuestra herramienta. El último paso es el de mostrar los datos en pantalla que mostraemos en un archivo llamado login-ok.php:

// Cargar la configuración de la aplicación
$fb = new Facebook\Facebook([
'app_id' => 'ID-APLICACIÓN', // Sustituir con el Identificador de la aplicación
'app_secret' => 'CLAVE-SECRETA-APLICACIÓN' // Sustituir con la Clave secreta de la aplicación
]);

/* SUSTITUIR en esta función $_SESSION['fb_access_token'] POR LA CLAVE DE LARGA DURACIÓN(Long-lived TOKEN) QUE SE MOSTRARÁ POR PANTALLA*/
$fb->setDefaultAccessToken($_SESSION['fb_access_token']);

/*
En este ejemplo, enviaremos una solicitud GET al extremo de la API Graph /me.
El extremo /me es un alias especial para el extremo de nodo de usuario que hace referencia al usuario o a la página que realiza la solicitud.
*/
if(empty($_GET['facebook-id'])) $_GET['facebook-id'] = 'me'; // Sustituir via parametro con el id de la página de facebook del cual queremos obtener los posts
if(empty($_GET['num-posts'])) $_GET['num-posts'] = 4; // Limitamos el número de posts utilizando el parámetro num-posts

 

try {
/*
Para que la respuesta que se obtiene tenga la forma de una sofisticada colección, llamamos a getGraphUser().
Este método devuelve una entidad Facebook\GraphNodes\GraphUser que representa un nodo de usuario.
*/
$response = $fb->get('/'.$_GET['facebook-id'].'?fields=id,name,link,picture,location,posts{full_picture,created_time,message,permalink_url}');
$page = $response->getDecodedBody();
} catch(Facebook\Exceptions\FacebookResponseException $e) {
// When Graph returns an error
echo 'Graph returned an error: ' . $e->getMessage();
exit;
} catch(Facebook\Exceptions\FacebookSDKException $e) {
// When validation fails or other local issues
echo 'Facebook SDK returned an error: ' . $e->getMessage();
exit;
}

function getFacebookFeed($page){
$numPosts = 0;
echo '<div id="facebook-page-feeder">';
foreach($page['posts']['data'] as $post){
echo '<div class="page-feed">';
echo '<div class="pf-message">
<p>'.(!empty($post['message']) ? $post['message'] : 'Nuevo post de '.$page['name']).'</p>
<p>'.date('d/m/Y H:i:s',strtotime($post['created_time'])).' - <a href="'.$post['permalink_url'].'" target="_blank">Ver en Facebook</a></p>
</div>';
echo '<div class="pf-picture"><img src="'.$post['full_picture'].'" /></div>';
echo '</div>';
$numPosts++;
if($numPosts == $_GET['num-posts']) break;
}
echo '</div>';
}

echo '<h3>Long-lived Access Token</h3>';
var_dump($_SESSION['fb_access_token']);

<h1><a href="<?php echo $page['link'] ?>" target="_blank"><img src="<?php echo $page['picture']['data']['url'] ?>" />Visitar <?php echo $page['name'] ?> en Facebook</a></h1>

<?php getFacebookFeed($page); ?>