{"id":3593,"date":"2013-03-03T17:43:34","date_gmt":"2013-03-03T16:43:34","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=3593"},"modified":"2014-11-08T00:42:53","modified_gmt":"2014-11-07T23:42:53","slug":"como-crear-una-aplicacion-para-facebook-en-php-caso-practico-codigo-fuente","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/como-crear-una-aplicacion-para-facebook-en-php-caso-practico-codigo-fuente\/","title":{"rendered":"C\u00f3mo crear una aplicaci\u00f3n para Facebook en PHP, caso pr\u00e1ctico + c\u00f3digo fuente"},"content":{"rendered":"<p>Buenas, en esta entrada hablaremos sobre el desarrollo de aplicaciones para Facebook usando el lenguaje de programaci\u00f3n PHP.<\/p>\n<p>Facebook proporciona <strong>3 ramas de desarrollo<\/strong> de aplicaciones que se pueden consultar en:<\/p>\n<p><a href=\"http:\/\/developers.facebook.com\" target=\"_blank\">http:\/\/developers.facebook.com<\/a><\/p>\n<p>Una de ellas es <strong>Ios<\/strong>, otra <strong>Android<\/strong> y por \u00faltimo v\u00eda <strong>Web<\/strong>, que es la que voy a exponer.<\/p>\n<p>Al integrar Facebook en la web, podemos realizarlo mediante los mecanismos<a href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/like\/\" target=\"_blank\"> like button<\/a>, <a href=\"http:\/\/developers.facebook.com\/docs\/reference\/plugins\/send\/\" target=\"_blank\">send button<\/a>\u00a0u otros <a href=\"http:\/\/developers.facebook.com\/docs\/plugins\/\" target=\"_blank\">plugins <\/a>para dirigir tr\u00e1fico hacia nuestro sitio web.<\/p>\n<p>Mediante el procedimiento de <a href=\"http:\/\/developers.facebook.com\/docs\/concepts\/login\/\" target=\"_blank\">Facebook login<\/a> podremos de &#8220;forma sencilla&#8221; conectar a usuarios a nuestra aplicaci\u00f3n.<\/p>\n<p>El n\u00facleo de la plataforma \u00a0de la API de Facebook es <a href=\"http:\/\/developers.facebook.com\/docs\/getting-started\/graphapi\/\" target=\"_blank\"><strong>Graph API<\/strong><\/a>.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/developers.facebook.com\/docs\/technical-guides\/fql\/\" target=\"_blank\">FQL <\/a>es otra API que tiene acceso a el <strong>mismo<\/strong> rango de objetos que Graph API, pero que su funcionamiento es similar a las consultas <strong>SQL<\/strong>.<\/p>\n<p><a href=\"http:\/\/developers.facebook.com\/docs\/concepts\/opengraph\/\" target=\"_blank\">OpenGraph <\/a>describe acciones que las usuarios pueden realizar, son objetos y acciones que pueden ser personalizados por desarrolladores via Graph API.<\/p>\n<p style=\"text-align: justify;\">Comencemos creando una\u00a0aplicaci\u00f3n\u00a0para la web b\u00e1sica, que emplea<a href=\"http:\/\/developers.facebook.com\/docs\/concepts\/login\/login-architecture\/\" target=\"_blank\"> autenticaci\u00f3n oAuth<\/a> y el proceso de facebook login. Para ello emplearemos el SDK (<a href=\"http:\/\/developers.facebook.com\/tools\/third-party-sdks\/\" target=\"_blank\">existen varios<\/a>) para <a href=\"http:\/\/developers.facebook.com\/docs\/reference\/php\/\" target=\"_blank\">PHP<\/a>.<\/p>\n<p style=\"text-align: justify;\">Ese kit de desarrollo podemos descargarlo de <a href=\"https:\/\/github.com\/facebook\/facebook-php-sdk\" target=\"_blank\">Github <\/a>(ver art\u00edculo sobre <a href=\"http:\/\/www.palentino.es\/blog\/el-facebook-de-los-programadores-y-disenadores-uso-basico-de-git-y-acceso-a-repositorios-github\/\" target=\"_blank\">gibhub<\/a>)<\/p>\n<p><strong>Manos a la obra, como simbolizo en la imagen superior, \u00a0subamos al elefante de PHP y pensemos en el desarrollo para la red social Facebook &#8230;<\/strong><\/p>\n<p><!--more--><\/p>\n<p style=\"text-align: justify;\">El SDK de Facebook para PHP ofrece un conjunto completo de funcionalidades de \u00a0acceso a Facebook y llamadas a la API. Estos incluyen todas las caracter\u00edsticas de la API de gr\u00e1ficos (Graph API) y FQL.<\/p>\n<p style=\"text-align: justify;\">El SDK PHP se utiliza normalmente para realizar operaciones como un administrador de aplicaci\u00f3n, pero tambi\u00e9n se puede utilizar para realizar operaciones en nombre de la sesi\u00f3n del usuario actual. Al eliminar la necesidad de gestionar los tokens de acceso manualmente.\u00a0El PHP SDK simplifica enormemente el proceso de autenticaci\u00f3n y autorizar a los usuarios a nuestra aplicaci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Necesitaremos \u00a0un ID de aplicaci\u00f3n para inicializar el SDK, que se puede obtener de la aplicaci\u00f3n Dashboard.\u00a0El SDK de Facebook para PHP puede trabajar en conjunto con el SDK de Facebook JavaScript para ofrecer gesti\u00f3n de sesi\u00f3n integrada.<\/p>\n<p>Vayamos por partes.<\/p>\n<p>Primero es necesario ir a la direcci\u00f3n <strong>URL<\/strong><\/p>\n<p><a href=\"https:\/\/developers.facebook.com\/apps\" target=\"_blank\">https:\/\/developers.facebook.com\/apps<\/a><\/p>\n<p>Para gestionar nuestras aplicaciones debemos usar la\u00a0aplicaci\u00f3n\u00a0de &#8220;Developer&#8221; de Facebook, hacer click en el bot\u00f3n &#8220;Go to App&#8221;<\/p>\n<p>Posteriormente pulsaremos en el bot\u00f3n &#8220;<strong>Crear nueva aplicaci\u00f3n<\/strong>&#8220;. En esta ventana introducimos el nombre de la app. Esta denominaci\u00f3n debe ser v\u00e1lida, entre 3 y 32 caracteres. El\u00a0App Namespace es opcional, y sirve para acceder a objetos y acciones \u00a0del la API Open Graph. Para finalizar podemos indicarle si deseamos un hosting gratuito para la APP. Nos pedira un captcha y listo.<\/p>\n<p><a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3603\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP.jpg\" alt=\"HolamundoFP\" width=\"671\" height=\"363\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP.jpg 671w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP-300x162.jpg 300w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\">Una vez realizado esto, observamos un<strong> App ID y un App Secret<\/strong>, que usaremos m\u00e1s adelante. \u00a0Completaremos las opciones de informaci\u00f3n b\u00e1sica. Recuerda pulsar sobre la ? para aclarar cada concepto.<\/p>\n<p style=\"text-align: justify;\">Podemos observar que existen multitud tipos de integraci\u00f3n de la aplicaci\u00f3n. Vamos a seleccionar,<strong> Aplicaci\u00f3n en facebook<\/strong> y colocar la direcci\u00f3n donde se encuentra la aplicaci\u00f3n PHP, facebook s\u00f3lo aceptar\u00e1 la autenticaci\u00f3n de los usuarios en dicha carpeta. Pulsamos guardar cambios.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3605\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP2.jpg\" alt=\"HolamundoFP2\" width=\"725\" height=\"553\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP2.jpg 725w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP2-300x228.jpg 300w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Importante, una vez guardados los cambios de nuestra aplicaci\u00f3n, debemos publicar los archivos a la carpeta de nuestro servicios que hemos indicado para probar la aplicaci\u00f3n. Copiaremos los datos App ID y App Secret para configurar nuestra app.<\/p>\n<p style=\"text-align: justify;\">En este momento es cuando tendemos que usar los conocimientos del SDK de P<a href=\"https:\/\/developers.facebook.com\/docs\/reference\/php\/\" target=\"_blank\">HP de facebook<\/a>. El SDK proporciona una plataforma para aplicaciones PHP. La biblioteca de funciones nos sirve de ayuda para crear autenticaciones y dar soporte a la API Graph. El SDK es opensource y se encuentra disponible en el repositorio <a href=\"https:\/\/github.com\/facebook\/facebook-php-sdk\" target=\"_blank\">Github<\/a>.<\/p>\n<p style=\"text-align: justify;\">Una vez en GitHub, podremos hacer un pull del repositorio o descargar el Zip con el SDK. En estos archivos existen ejemplos de c\u00f3digo para usar en nuestras aplicaciones.<\/p>\n<p style=\"text-align: justify;\">De los archivos descargados tendremos una carpeta llamada SRC, dentro de ella se muestran los archivos para poder crear las apps de Facebook.<\/p>\n<p style=\"text-align: justify;\">Comenzaremos viendo el c\u00f3digo de la p\u00e1gina index.php, <strong>no os\u00a0preocup\u00e9is\u00a0porque\u00a0pod\u00e9is descargaros\u00a0los fuentes en el enlace inferior.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3617 alignnone\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP5.jpg\" alt=\"HolamundoFP5\" width=\"763\" height=\"1106\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP5.jpg 763w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP5-206x300.jpg 206w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP5-706x1024.jpg 706w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/p>\n<p>El c\u00f3digo superior corresponde con la p\u00e1gina index.php situada en la carpeta holamundofp. Es importante apreciar como hemos incluido el<strong> SDK con un require<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Los datos importantes que es necesario cambiar son el Appid y el Secret, son par\u00e1metros que nos sirven para poder crear una instancia de Facebook.<\/p>\n<p style=\"text-align: justify;\">Se crea un objeto de tipo facebook y Llamamos al m\u00e9todo getUser. Nos devuelve el nombre del usuario y si est\u00e9 se autentific\u00f3 en la Aplicaci\u00f3n. Luego preguntaremos por esta variable para definir el comportamiento de la app.<\/p>\n<p style=\"text-align: justify;\">Se puede probar la aplicaci\u00f3n en:<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.palentino.es\/holamundofp\/\" target=\"_blank\">http:\/\/www.palentino.es\/holamundofp\/<\/a><\/p>\n<p style=\"text-align: justify;\">Tambi\u00e9n podremos apreciar el comportamiento cambiando la url de la forma <a href=\"http:\/\/apps.facebook.com\/holamundofp\" target=\"_blank\">http:\/\/apps.facebook.com\/holamundofp<\/a><\/p>\n<p style=\"text-align: justify;\">Al hacer clic en el enlace de &#8220;Iniciar Sesi\u00f3n&#8221; nos muestra la siguiente pantalla, donde tendremos que pulsar en &#8220;Ir a la aplicaci\u00f3n&#8221; para poder usarla.<\/p>\n<p style=\"text-align: justify;\">Esta pantalla se puede configurar en la opci\u00f3n &#8220;Auth Dialog&#8221; de la configuraci\u00f3n de nuestra app.<\/p>\n<p style=\"text-align: justify;\">Una vez logeados, o iniciada la sesi\u00f3n en facebook, nos mostrar\u00e1 la siguiente ventana, con los datos del usuario activo. En lugar de mostrar todo el <strong>vector<\/strong>, podremos usar s\u00f3lo los datos que nos interesan.<\/p>\n<p style=\"text-align: justify;\">Por ejemplo el nombre, apellido, y usuario. El ID es v\u00e1lido para obtener el avatar del usuario.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3610\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP3.jpg\" alt=\"HolamundoFP3\" width=\"582\" height=\"338\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP3.jpg 582w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP3-300x174.jpg 300w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3611\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP4.jpg\" alt=\"HolamundoFP4\" width=\"666\" height=\"398\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP4.jpg 666w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/03\/HolamundoFP4-300x179.jpg 300w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Bueno, eso es todo, puedes descargar el c\u00f3digo fuente aqu\u00ed:<\/strong><\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.palentino.es\/holamundofp\/holamundofp.rar\" target=\"_blank\">http:\/\/www.palentino.es\/holamundofp\/holamundofp.rar<\/a><br \/>\n<span style=\"color: #999999;\">\u00a0Nota: Por favor, recuerda si te ha gustado, puedes contribuir con aportaciones publicitarias, \u00a0para caf\u00e9s al menos <img decoding=\"async\" class=\"wp-smiley\" src=\"http:\/\/www.palentino.es\/blog\/wp-includes\/images\/smilies\/icon_wink.gif\" alt=\";-)\" \/><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buenas, en esta entrada hablaremos sobre el desarrollo de aplicaciones para Facebook usando el lenguaje de programaci\u00f3n PHP. Facebook proporciona 3 ramas de desarrollo de aplicaciones que se pueden consultar en: http:\/\/developers.facebook.com Una de ellas es Ios, otra Android y por \u00faltimo v\u00eda Web, que es la que voy a exponer. Al integrar Facebook en la web, podemos realizarlo mediante los mecanismos like button, send button\u00a0u otros plugins para dirigir tr\u00e1fico hacia nuestro sitio web. Mediante el procedimiento de Facebook login podremos de &#8220;forma sencilla&#8221; conectar a usuarios a nuestra aplicaci\u00f3n. El n\u00facleo de la plataforma \u00a0de la API de Facebook es Graph API. FQL es otra API que tiene acceso a el mismo rango de objetos que Graph API, pero que su funcionamiento es similar a las consultas SQL. OpenGraph describe acciones que las usuarios pueden realizar, son objetos y acciones que pueden ser personalizados por desarrolladores via Graph API. Comencemos creando una\u00a0aplicaci\u00f3n\u00a0para la web b\u00e1sica, que emplea autenticaci\u00f3n oAuth y el proceso de facebook login. Para ello emplearemos el SDK (existen varios) para PHP. Ese kit de desarrollo podemos descargarlo de Github (ver art\u00edculo sobre gibhub) Manos a la obra, como simbolizo en la imagen superior, \u00a0subamos al elefante de PHP y pensemos en el desarrollo para la red social Facebook &#8230;<\/p>\n","protected":false},"author":1,"featured_media":3594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,5,7],"tags":[124,87,110,667,44],"class_list":["post-3593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-formacion","category-programacion","category-software","tag-api","tag-desarrollo","tag-facebook","tag-php","tag-programacion-2"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/3593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=3593"}],"version-history":[{"count":26,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/3593\/revisions"}],"predecessor-version":[{"id":7381,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/3593\/revisions\/7381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/3594"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=3593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=3593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=3593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}