Bienvenido a la tercera parte de "Diseñar y codificar una aplicación de Facebook integrada". En este punto, asumo que ha creado el HTML y CSS para su aplicación. Si no, refiérase a la primera entrada en esta serie. En esta parte, vamos a llevar nuestra aplicación al siguiente nivel.

Ponte al día

• Diseñar y codificar una aplicación de Facebook integrada: teoría
• Diseñar y codificar una aplicación de Facebook integrada: HTML + CSS

Visión general

En esta lección, nos ocuparemos de:

• agregando algunos efectos geniales usando la impresionante biblioteca jQuery
• configurando nuestra aplicación en el nuevo panel de configuración de la aplicación de Facebook, así como configurando el SDK de PHP de Facebook.
• Trayendo nuestros datos desde Feedburner usando la api de Yahoos YQL
• Obtención de datos desde la api del gráfico de Facebook.

Así que quédate conmigo, hazte una taza de té y ¡feliz codificación!

Paso 1 - jQuery

Antes de comenzar con la conversión de nuestro HTML a PHP, necesitamos hacer que algunos de nuestros objetos HTML sean funcionales. Podemos hacer esto fácilmente usando la biblioteca jQuery. Si aún no ha comenzado a usar la biblioteca jQuery, entonces este es definitivamente un excelente momento para comenzar. Es una excelente introducción a Javascript y, en verdad, no es demasiado difícil de usar. De hecho, puede crear algunos efectos geniales con solo unas pocas líneas de código. En nuestra aplicación de blog, usaremos jQuery para dos cosas. En primer lugar, lo utilizaremos para nuestra búsqueda de filtro en vivo y, en segundo lugar, para las pestañas de nuestra página para que nuestros usuarios tengan una experiencia fluida a medida que pasan de una página a otra.

Si recuerda el tutorial anterior, incluimos un archivo JavaScript en el encabezado de su documento HTML. Ahora es el momento de crear ese archivo. Salta a tu editor de código favorito y llama al archivo 'myjava.js'. Comenzamos creando el documento listo. Esto le indica a jQuery que cargue todo lo que hay dentro una vez que el DOM esté listo para ser manipulado.

Las pestañas

Cuando el DOM está listo, ocultamos todas las pestañas. Luego, cada página se difumina cuando se hace clic en la pestaña correspondiente o se hace "activa". También eliminamos la clase active de las pestañas y ocultamos todo el contenido de las demás páginas.

  var tabContent = $('.tab_content'), //Define the tab as a variable
     	tabs = $('ul.tabs li');		//Define the tabs li as a variable
	
		tabContent.hide(); //On page load hide all the contents of all tabs
		tabs.eq(0).addClass("active").show(); //Default to the first tab
		tabContent.eq(0).show(); //Show the default tabs content

	//When the user clicks on the tab
	tabs.click(function(e) {
		var li = $(this), //define this li as a variable
			  activeTab = li.find('a'); //Get the href's attribute value (class) and fade in the corresponding tabs content
		
		tabs.removeClass("active"); //Remove the active class
		li.addClass("active"); //Add the active tab to the selected tab
		tabContent.hide(); //Hide all other tab content

		activeTab.fadeIn(); //Fade the tab in
		
		e.preventDefault();
	});

Búsqueda de filtros

El siguiente elemento para el que utilizaremos jQuery es nuestra búsqueda de filtros. Esto permitirá a nuestros usuarios filtrar sus resultados de búsqueda en tiempo real a medida que escriben. Esto se hace al tomar el valor en vivo del campo de formulario y filtrarlo con cualquier cosa que coincida con nuestros divs de 'publicaciones'. El filtro mostrará el div 'posts' que contiene el valor y ocultará cualquiera que no lo haga.

	//Filter Search

	$(".search").keyup(function () {
		var $this = $(this),
			  filter = $this.val(), 
			  count = 0;

		$(".post").each(function () {
			var $this = $(this);

			if ($this.text().search(new RegExp(filter, "i")) < 0) {
			   $this.hide();
			} else {
			 $this.show();
			}
		});
		
		$("#filter-count").text(count);
	});

Paso 2 - PHP

Ahora es el momento de dar vida a este archivo estático y comenzar a extraer datos de Facebook y Feedburner. Ahora es probablemente un buen momento para cambiar el nombre de su archivo de index.html a index.php y descargar el SDK de PHP. Puede descargar la última copia del PHP SDK de Facebook desde:

Facebook PHP SDK

Paso 3 - Configuración de nuestra aplicación dentro de Facebook

Ahora necesitamos configurar tu página de lienzo de la aplicación de Facebook. Aunque esto se ha cubierto anteriormente, Facebook ha actualizado recientemente su página de configuración de la aplicación; por lo que es importante pasar por la nueva configuración. En primer lugar, cargue el archivo index.php en su propia cuenta de alojamiento web. He subido el mío a una subcarpeta, por ejemplo. www.yourdomain.com/tut Cuando haya terminado, puede configurar su aplicación visitando https://developers.facebook.com/apps.

En este punto, haga clic en el botón 'crear nueva aplicación' en la esquina superior derecha. Ingrese el nombre de su aplicación y luego será llevado a la página de configuración. Facebook te permite crear muchas variaciones de aplicaciones, desde el escritorio hasta el móvil. En nuestro caso, tenemos que elegir la 'Aplicación en Facebook'. Hay cinco campos esenciales que debe completar para que su aplicación funcione. Están resaltados en la imagen de arriba. Una vez hecho esto, si va a apps.facebook.com, siga con lo que haya ingresado en el 'espacio de nombres de la aplicación'. En mi caso, esto fue 'webdesigntuts', por lo que mi dominio de aplicación es: http://apps.facebook.com/webdesigntuts/

Cuando vaya a su url, debería ver su archivo de índice dentro del espacio del lienzo en Facebook.

Paso 4 - Configuración y configuración de Facebook PHP SDK

Después de llevar la aplicación a Facebook, ahora es el momento de extraer datos de la API gráfica de Facebook y permitir que las personas inicien y salgan de nuestra aplicación.

En el directorio de nuestra aplicación, agregue una nueva carpeta y llámela 'fb' Abra la carpeta SDK que descargó de GitHub. En él, deberías encontrar un par de ejemplos: el src y algunas pruebas. Tome el contenido de la carpeta src y arrástrelo a su carpeta fb. Este es el bit que necesitamos para conectarnos a Facebook. En nuestro archivo index.php, agregue el siguiente código comenzando con la inclusión del SDK de Facebook desde nuestra carpeta 'fb', y agregue su ID de aplicación única y clave secreta. En el código a continuación, puede ver cómo debe configurarse esto. Básicamente nos estamos conectando a Facebook y recuperando la id de usuario de la persona que está usando nuestra aplicación. Si el usuario ha sido autenticado, entonces estamos generando una variable para la url de cierre de sesión o, si no lo han hecho, estamos generando una para la url de inicio de sesión.

<?php

require 'fb/facebook.php';

$fbconfig['appUrl'] = "The full url of your app on Facebook goes here"; 

// Create An instance of our Facebook Application.
$facebook = new Facebook(array(
  'appId'  => 'Your App ID',
  'secret' => 'Your App Secret',
  'cookies' => 'true',
));

// Get the app User ID
$user = $facebook->getUser();

if ($user) {
	  try {
		// If the user has been authenticated then proceed
		$user_profile = $facebook->api('/me');
	  } catch (FacebookApiException $e) {
		error_log($e);
		$user = null;
	  }
}

// If the user is authenticated then generate the variable for the logout URL
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
  
?>

<!-- Insert Logged in HTML here -->

<?php  
} else {
  $loginUrl = $facebook->getLoginUrl();
}
?>

Paso 5 - Iniciar y cerrar sesión

Entre la declaración if y else, queremos cerrar e iniciar las etiquetas de PHP para poder insertar nuestro html que creamos anteriormente en la página de PHP. Ahora, si carga su página en su espacio web y actualiza el lienzo de la aplicación de Facebook, ahora debería poder ver la aplicación. Si has iniciado sesión lo verás; De lo contrario, verá una url de inicio de sesión como en la imagen de abajo.

 <a href="<?php echo $logoutUrl; ?>">Logout</a>

Hemos configurado nuestra aplicación en Facebook y hemos creado un inicio de sesión para nuestros usuarios. Todo lo que queda es reemplazar nuestros datos ficticios con datos reales en vivo.

Paso 6 - Extraer datos de YQL usando JSON

Aprende más sobre YQL.

El primer bit de datos que vamos a ingresar a nuestra aplicación son las publicaciones del blog. Esto se obtiene de nuestro feed RSS Feedburner. Lo recolectamos utilizando YQL. Si no has usado YQL antes, entonces definitivamente deberías probarlo. Es super simple de usar y la flexibilidad que ofrece es impresionante. Si no está familiarizado con él, puede aprender más sobre él aquí y aquí.

Básicamente, lo que estamos haciendo es enviar una solicitud a YQL usando una sintaxis similar que podría usarse en MYSQL. Luego decodificamos los datos que se devuelven en un formato legible JSON, y los almacenamos en una variable para que podamos recuperar partes específicas del array dentro de las publicaciones de nuestro blog.

Necesitamos hacer tres peticiones a YQL. Son los siguientes:

• webdesigntuts-summary feed: contiene la mayoría de los datos que necesitamos para las publicaciones de nuestro blog. Contiene el título, url, autor, fecha de publicación y resumen del artículo.
• Webdesigntutsplus feed: la única información que necesitamos de esto es el número de comentarios. Necesitamos llamar a este ya que estos datos no están contenidos en la fuente de resumen webdesigntuts.
• webdesigntuts-summary feed (de nuevo): esta vez, en lugar de recopilar todos los datos, solo recopilamos las categorías para su uso en la barra lateral.

Esto debe insertarse antes de que cierre la etiqueta PHP antes de que comience su HTML. Puedes ver esto demostrado en el siguiente código:

// The YQL query to get the Webdesigntuts+ summary posts from FeedBurner

$yqlurl = "http://query.yahooapis.com/v1/public/yql?q=";
$yqlurl .= urlencode("select * from feed where url='http://feeds.feedburner.com/webdesigntuts-summary' LIMIT 10");
$yqlurl .= "&format=json";
 
$yqlfeed = file_get_contents($yqlurl, true);  
$yqlfeed = json_decode($yqlfeed);

// The YQL query to get the webdesigntuts+ posts from feedburner - We need this for the comments count only
$yqlurl2 = "http://query.yahooapis.com/v1/public/yql?q=";
$yqlurl2 .= urlencode("select * from feed where url='http://feeds.feedburner.com/webdesigntutsplus' LIMIT 10");
$yqlurl2 .= "&format=json";
 
$yqlfeed2 = file_get_contents($yqlurl2, true);  
$yqlfeed2 = json_decode($yqlfeed2);


// The YQL query to get the webdesigntuts+ categories.
$yqlurl3 = "http://query.yahooapis.com/v1/public/yql?q=";
$yqlurl3 .= urlencode("SELECT category FROM feed WHERE url='http://feeds.feedburner.com/webdesigntuts-summary' LIMIT 10");
$yqlurl3 .= "&format=json";
 
$yqlfeed3 = file_get_contents($yqlurl3, true);  
$yqlfeed3 = json_decode($yqlfeed3);

Paso 7 - Obtener el número de Me gusta de una página de Facebook

En esta etapa, haremos una llamada a la API gráfica de Facebook.  Es similar a cómo hicimos las llamadas a YQL, sin embargo, hay algunas variaciones leves entre los dos.  Esto es realmente simple de hacer y definitivamente debería ser una sección de código que guardas en tu carpeta de fragmentos, ya que estoy seguro de que será útil.  Establecemos una variable de me gusta en = '0', hacemos la llamada y luego decimos; si el array que se devuelve contiene 'me gusta', entonces establezca nuestra variable me gusta al número de me gusta que se devolvió.

//Make a call to the facebook graph api and decode the json to collect the number of likes from the webdesigntuts+ facebook page

$json_url ='https://graph.facebook.com/webdesigntutsplus';
$json = file_get_contents($json_url);
$json_output = json_decode($json);
$likes = 0;
if($json_output->likes){
$likes = $json_output->likes;
}

Paso 8 - Visualización de los datos dinámicos

Ahora que tenemos todos nuestros datos almacenados en variables de PHP, debemos tomar esos datos y mostrarlos en nuestra página. Para la publicación de nuestro blog, lo hacemos creando un valor simple con un bucle for each y usando $ feed. Luego podemos hacer echo de los valores individuales de nuestra array JSON utilizando el nombre de la parte que deseamos hacer echo. La consola YQL debería ayudarlo a encontrar estas secciones usando el modo de árbol.

  <?php
	
//Create a variable that we can use to auto increment 
$i=0;
	
//Loop out our yql feedburner feed

foreach ($yqlfeed->query->results->item as $item ) { ?>
	 <div class="post">
             <h3><a  href="<?php echo $item->link;?>" target="_blank"><?php echo $item->title;?></a></h3>
            <span class="postInfo">by <a href="#"><?php echo $item->creator;?></a> on <?php echo substr($item->pubDate,0,-9);?></span>
            <p><?php echo $item->description;?></p>
            <a class="more" href="<?php echo $item->link;?>" target="_blank">Read More</a>
            <span class="line"></span>
                    
             <span class="blue"><?php echo $yqlfeed2->query->results->item[$i++]->comments[1]; ?> Comments </span>
                     
             <span class="line"></span>
        </div><!--End Blog Post-->
		
	<?php }?>

En el bloque de código anterior, tenga en cuenta que hemos hecho echo el número de comentarios de '$ yqlfeed2'. La sección de comentarios tiene dos partes: URL de comentario y número de comentario. La URL del comentario es la primera part (0), y el número de comentarios es la segunda part [1]. Solo requerimos el número de comentarios. También incrementamos automáticamente el elemento configurando '$ i = 0', y luego usamos el 'item[$ i ++]' Al hacer esto, el número del elemento se incrementará cada vez que la publicación se repite y devolverá el número de comentarios para cada publicación individual

Otro punto a tener en cuenta es que hemos utilizado una función PHP incorporada, subtr - substr ($ item-> pubDate, 0, -9). La razón por la que hemos hecho esto se debe a algunos personajes de aspecto extraño al final de nuestra fecha y hora. Esto simplemente elimina los últimos nueve caracteres (-9) y deja que nuestra fecha y hora aparezcan como se esperaba.

Paso 9 - Visualización del nombre de usuario, la imagen y el número de Me gusta

Hacer echo de la cantidad de "me gusta" es simple; creamos la variable, '$ likes' anteriormente, así que simplemente necesitamos hacer echo. Facebook PHP SDK también crea automáticamente algunas variables para nosotros; De nuevo es un caso simple de hacer echo. Todo lo que necesitamos hacer es reemplazar nuestros datos ficticios con los datos dinámicos.

 <span class="likesCount"><?php echo $likes;?></span>
<p>People like webdesigntuts+</p>
            
<div class="tabHeader">Hi <?php echo $user_profile['name']; ?></div>
            
<img class="profileimage" name="" src="https://graph.facebook.com/<?php echo $user; ?>/picture" width="50" height="50" alt="">
            
<p>We're glad you stopped by at webdesigntuts+. We hope you enjoy our blog</p>

Paso 9 - Mostrando las categorías

  <div class="tabHeader">Categories on webdesigntuts+</div>
            
<ul>
   <?php  foreach($yqlfeed3->query->results->item as $item) { ?>
   <li><a href="https://webdesign.tutsplus.com/tag/<?php echo str_replace(' ','+',$item->category);?>" target="_blank"><?php echo $item->category;?></a></li>
    <?php }?>
</ul>

En el código anterior, simplemente hacemos un bucle a través de nuestra consulta YQL contenida en '$ yqlfeed3'. También usamos otra función PHP incorporada, str_replace. Usamos esto para reemplazar cualquier espacio en nuestras categorías con un signo '+'. Esto es para que no tengamos enlaces rotos cuando intentemos redirigir al usuario a las categorías en Webdesigntuts +.

Paso 10 - Consejos y trucos finales para aplicaciones de Facebook

Cambiar automáticamente el tamaño de la aplicación de Facebook Canvas Space

El primer truco que me gustaría mostrarte nos ayuda a solucionar un error en el iframe del canvas de Facebook. En la configuración de la aplicación de Facebook, puede configurarlo para que el iframe cambie de tamaño automáticamente para adaptarse a su contenido; sin embargo, también coloca una barra de desplazamiento horrible junto a tu aplicación a la derecha de la barra lateral de Facebook. Esto no parece demasiado bueno, por lo que podemos resolverlo con un simple bit de JavaScript que se puede colocar justo después de nuestra etiqueta body de apertura. Esto cambiará el tamaño de nuestro lienzo para que se ajuste al contenido, y la barra lateral estará en el extremo derecho de Facebook en lugar de nuestra aplicación.

<!--Resize Iframe-->
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>

 FB.Canvas.setAutoResize(7);

 </script>
 <!-- End Resize Iframe-->

Popup de inicio de sesión de aplicación de Facebook

El siguiente truco que me gustaría mostrarle es que cuando un usuario visita su aplicación por primera vez, se le pedirá que inicie sesión / autorice. En lugar de simplemente mostrar un enlace, podemos tener una autorización emergente de Facebook. Sabes de los que estoy hablando, estoy seguro de que los has visto un millón de veces. Esto se puede lograr agregando otro bit de JavaScript después de nuestra declaración de cierre de PHP else.

 $loginUrl = $facebook->getLoginUrl(array('redirect_uri' => $fbconfig['appUrl']));
  print "&gt;script>top.location.href = '$loginUrl';</script>"; &gt;

Conclusión

Así que eso es todo amigos! Esto cierra nuestra serie de 'Diseño y código de una aplicación de Facebook integrada'. Espero que te hayas divertido tanto al crearlo como lo he escrito al respecto.

En septiembre, en la Conferencia anual de F8, Facebook anunció que acababan de superar los 800 millones de usuarios anuales. ¡Así se hace Facebook! Como puedes ver, esta es una gran plataforma para promocionarte a ti mismo, tu marca o tu producto. Qué mejor manera de utilizar esto que creando tu propia aplicación nativa de Facebook. Facebook también anunció, el mismo día, la reinvención de los perfiles de usuario, llamada Timeline. Con Timeline viene una nueva forma adicional para que las aplicaciones se integren en un perfil de usuario / timeline.

"Las películas que citas. Las canciones que tienes en repetición. Las actividades que amas. Ahora hay una nueva clase de aplicaciones sociales que te permiten expresar quién eres a través de todas las cosas que haces ".

¡Este es un momento emocionante para nosotros los desarrolladores de aplicaciones! Si todavía no te has unido, ¿qué estás esperando? No se limite a pensar en crear la siguiente aplicación, levántese y cámbielo. Espero ver lo que se te ocurre y cómo puedes tomar lo que has aprendido y darle tu propio toque. Siéntase libre de dejar enlaces a sus aplicaciones y creaciones en los comentarios a continuación.

¡Hasta la próxima, feliz diseño y codificación!