Social Apps Workshop
-
Upload
matias-paterlini -
Category
Technology
-
view
473 -
download
3
description
Transcript of Social Apps Workshop
![Page 2: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/2.jpg)
• CTO / Co-Founder Altodot | Social Marketing Technologies
• Former Software Architect & Social Media Specialist at Tweetboard
• Columnist at PulsoSocial.com• Former Founder & CTO at:
o VirtualInmobiliario.com o Cristones.com - Xristianos
me...
![Page 3: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/3.jpg)
El origen...
![Page 4: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/4.jpg)
![Page 5: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/5.jpg)
A ellos ya los socializamos...
![Page 6: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/6.jpg)
Introducción a lasSocial Apps
![Page 7: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/7.jpg)
¿Qué son las Social Apps?
![Page 8: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/8.jpg)
Las Social Apps son aplicaciones web que se
desarrollan sobre plataformas sociales, o conectándose con ellas.
![Page 9: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/9.jpg)
Porqué Social Apps?
![Page 10: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/10.jpg)
- Acceso a millones de usuarios
- Acceso a millones de dólares
- Nuevos desafíos
- Nuevas oportunidades de negocio
![Page 11: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/11.jpg)
Qué tipo de social apps hay?
![Page 12: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/12.jpg)
- Facebook Applications
- Twitter Applications
- Open Social Applications
- Other social platforms
![Page 13: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/13.jpg)
Cuales son los riezgos?
![Page 14: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/14.jpg)
- Aplicaciones Baneadas
- Problemas de escalabilidad
- Aplicaciones poco virales
- No poder monetizarlas
- Camian las reglas del juego
![Page 15: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/15.jpg)
Cual es la tendencia en Social Apps?
![Page 16: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/16.jpg)
- Open social casi desaparece
- Twitter apps siguen creciendo
- Facebook Fan Pages explotan
- Casual Applications desaparecen
- Grandes aplicaciones explotan
![Page 17: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/17.jpg)
Es dificil desarrollar Social Apps?
![Page 18: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/18.jpg)
- No es “rocket science”
- No es soplar y hacer botellas
- Hay que preveer los “bottle necks”
- Son multilenguaje
- Requieren mucho monitoreo
![Page 19: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/19.jpg)
Cómo se hostea una Social App?
![Page 20: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/20.jpg)
- Cualquier shared hosting :(
- Servidores dedicados :)
- Could computing :D(Amazon Services, RightScale,Joyent, GoGrid, Vurbia T.)
![Page 21: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/21.jpg)
Como manejar problemas de
escalabilidad en Social Apps?
![Page 22: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/22.jpg)
- Distribuir la carga en varios servidores
- No utilizar Frameworks
- Usar MUCHO memcached
- Usar lenguajes de programación “rápidos”
![Page 23: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/23.jpg)
Cómo “viralizar” Social Apps?
![Page 24: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/24.jpg)
- Explotando canales virales
- Empujando la app son publicidad
- Generando una masa mínima de usuarios
- Buenas ideas!!
![Page 25: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/25.jpg)
Cómo “monetizar” Social Apps?
![Page 26: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/26.jpg)
- Virtual Goods
- Ad Networks
- Real Goods – ej. tickets de avion
- Development
- Publicidad segmentada
![Page 27: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/27.jpg)
Cuánto dinero se puede ganar con
Social Apps?
![Page 28: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/28.jpg)
- MUCHO
- Virtual Goods: Promedio 1 dólar por usuario
- Ojo con la inversión!
- Millones de usuarios = millones de hits
![Page 29: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/29.jpg)
Cuánto tiempo toma desarrollar una
Social App?
![Page 30: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/30.jpg)
POCO...
![Page 31: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/31.jpg)
Cuán seguido se actualizan las APIs de las “plataformas
sociales”?
![Page 32: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/32.jpg)
- MUY SEGUIDO!
- Facebook: TODO EL TIEMPO!
- Twitter: CASI NUNCA!
- Open Social: Muy Poco!
![Page 33: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/33.jpg)
Cuánto tiempo requiere mantenerse
actualizado?
![Page 34: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/34.jpg)
- MUCHO
- Las aplicaciones se caen
- Metodos se deprecan
- Nuevos métodos aparecen
![Page 35: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/35.jpg)
Questions?
![Page 36: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/36.jpg)
![Page 37: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/37.jpg)
Facebook Platform Basics
![Page 38: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/38.jpg)
Do you PHP?
![Page 39: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/39.jpg)
Sabias?
• Facebook almacena +500 M de personas
• Facebook creó u propio compiler de PHP
• Facebook modificó y mejoró Memcached
• Facebook usa Mysql Sharded Databases
• Facebook construído sobre PHP
![Page 40: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/40.jpg)
Facebook Platform
![Page 41: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/41.jpg)
Que tipo de aplicaciones hay?
![Page 42: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/42.jpg)
• Mobile Applications
• Facebook Connect Applications
• Fan Pages Tab applications
• Canvas Applicationso Iframe ApplicationsoCanvas Applications
• Desktop Applications
![Page 43: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/43.jpg)
Canvas Applications
![Page 44: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/44.jpg)
The IFRAME way
HTML + XFBML
Facebook Javascript API Facebook PHP SDK
PHP
![Page 45: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/45.jpg)
The FBML way
FBML + HTML
Facebook FBJS wrapper Facebook API PHP client
PHP
![Page 46: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/46.jpg)
Facebook Markup Language
![Page 47: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/47.jpg)
En cada Request:
• Facebook llama a nuestro servidor pidiendo código FBML + HTML
• Nuestro servidor ejecuta los scripts PHP y devuelve código FBML + HTML
• Facebook parsea el FBML generado y...:o - Arroja errores (en caso de haber)o - Reemplaza identidades en nombres de estilos,
variables y funciones de FBJSo - Genera el HTML de los controles FBML usados
![Page 48: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/48.jpg)
XFBML
![Page 49: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/49.jpg)
• Funciona sobre IFRAME apps o sitios con Facebook Connect
• Requiere el Facebook Javascript SDK• Algunos controles son los mismos de FBML• Nuevos controles• Social Plugins
![Page 50: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/50.jpg)
FBJS:
Facebook Javascript
![Page 51: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/51.jpg)
• Tiene la misma sintaxis de Javascript• Diferentes funciones: .style = .setStyle• Getters y setters: .location = .setLocation, • Nuevas
métodos: .setTextValue, .setInnerFBML• NO se puede usar Jquery, mootools,
prototype, etc.• Tiene su propia librería de efectos para
animar objetos del DOM
![Page 52: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/52.jpg)
FBJS Effects
![Page 53: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/53.jpg)
• Permite modificar valores de CSS a diferentes velocidades y delays.
• Muestra o esconde elmentos con efectos.
![Page 54: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/54.jpg)
FBJS Listeners
![Page 55: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/55.jpg)
• Se pueden attachear funciones a eventos de los elementos del DOM como clicks, overs, etc
• Es muy útil cuando se agrega contenido dinámico en FBML desde ajax, en donde facebook remueve todos los eventos asignados como atributos a los elementos.
![Page 56: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/56.jpg)
Facebook Javascript SDK
![Page 57: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/57.jpg)
• Es una librería standard de Javasctipt que conecta contra el Facebook Open Graph para conseguir información.
• Se encarga de analizar el DOM y reemplazar todos los tags de XFBML por HTML estandard
• Puede usarse en sitios con Facebook Connect o aplicaciones en Iframe
• Puede coexistir con Javascript frameworks como Jquery, mootools, prototype.
• Tiene una serie de métodos para autenticarse, así como para obtener información de los usuarios y ejecutar métodos del Facebook API
![Page 58: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/58.jpg)
Facebook PHP SDK
![Page 59: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/59.jpg)
• Es una librería PHP estandard que se contecta contra los servidores de Open Graph.
• Viene a reemplazar al PHP REST CLIENT que se conectaba contra los servidores REST de Facebook.
• Contiene una serie de métodos para obtener información de los usuarios, para postear contenido, o para ejecutar funciones del Facebook API.
• Puede ejecutar múltiples métodos en modo batch.
![Page 60: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/60.jpg)
FQL:
Facebook Query Language
![Page 61: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/61.jpg)
• Es un conjunto de tablas y un lenguaje de query scripting para consumir la información de esas tablas
• Las tablas solo pueden ser leidas.• Pertenece a los métodos del Facebook REST
server• Solo se puede filtrar por las columnas indexadas• No se pueden usar joins• No se puede usar el operador “NOT” • Se puede usar el operador IN en los filtros.
![Page 62: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/62.jpg)
FBML or IFRAME?
![Page 63: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/63.jpg)
• Facebook va a restringir las apps a solo iframe en dic.• Iframes tiene problemas de session• FBML require conocer los controles• FBML es mas estricto, no se pueden cometer errores o
Facebook mostrará una lista de errores por pantalla• En FBML, uno está limitado a las funciones que nos ofrece
FBJS, mientras que en Iframe somos libres de usar cualquier librería Javascript
• Las aplicaciones en FBML tiene problemas de latencia. Si el script de nuestros servidores tarda mas de 12 en devolver el contenido facebook “droppea” el request y muestra un error por pantalla
![Page 64: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/64.jpg)
Graph API
![Page 65: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/65.jpg)
Facebook Graph API es la nueva representación de la información en Facebook, ordenada por ids unicos, y con conecciones entre objetos del social
graph
![Page 66: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/66.jpg)
• Cada objeto tiene un id único y una representación de su objeto en formato JSON
• Hay información pública e información a la que podemos acceder pasando un access token autorizado.
• Algunos objetos poseen “conecciones” que nos llevan a subelementos del objeto padre. Ejemplo Album → Fotos
• Faltan MUCHOS metodos del REST API todavía.
![Page 67: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/67.jpg)
https://graph.facebook.com/me
{"id": "587412625","first_name": "Mat\u00edas","last_name": "Paterlini","link": "http://www.facebook.com/paterlinimatias","about": "Founder & Chief Technology Officer at Altodot | Social Gaming","birthday": "07/02/1983","gender": "male"}
![Page 68: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/68.jpg)
Scalability Issues
![Page 69: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/69.jpg)
• Evitar ORMs, o en caso de usuarlos no debemos traer todo el contenido del objeto por defecto, sino ir pidiendo a medida que necesitemos información
• Utilizar css sprites para evitar la carga de
multiples imagenes.
• Desarrollar las aplicaciones "ajax friendly"
![Page 70: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/70.jpg)
Facebook ConnectApplications
![Page 71: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/71.jpg)
???
![Page 72: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/72.jpg)
Fan Pages TabApplications
![Page 73: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/73.jpg)
![Page 74: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/74.jpg)
Social Plugins
![Page 75: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/75.jpg)
![Page 76: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/76.jpg)
Questions?
![Page 77: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/77.jpg)
BREAK
![Page 78: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/78.jpg)
Facebook Platform in Deep
![Page 79: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/79.jpg)
Programando una aplicación en FBML
![Page 80: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/80.jpg)
Paso 1: Elegir Hosting
![Page 81: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/81.jpg)
Paso 2: Configurar la
aplicación
![Page 82: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/82.jpg)
![Page 83: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/83.jpg)
![Page 84: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/84.jpg)
![Page 85: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/85.jpg)
![Page 86: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/86.jpg)
![Page 87: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/87.jpg)
![Page 88: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/88.jpg)
Paso 3:Programando nuestro primer "Hola Mundo!"
![Page 89: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/89.jpg)
index.php
![Page 90: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/90.jpg)
![Page 91: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/91.jpg)
Paso 4:Autorizando una
aplicación utilizando el Facebook PHP
SDK
![Page 92: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/92.jpg)
Descargamos el PHP SDK
http://github.com/facebook/php-sdk/
y lo guardamos en el root como facebook.php
![Page 93: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/93.jpg)
config.php
![Page 94: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/94.jpg)
init.php
![Page 95: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/95.jpg)
index.php
![Page 96: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/96.jpg)
Entramos al Canvas URL
![Page 97: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/97.jpg)
Aceptamos los permisos y...
![Page 98: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/98.jpg)
index.php
![Page 99: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/99.jpg)
Obtenemos el objeto "/me" del Graph API
![Page 100: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/100.jpg)
Paso 5:Accediendo a la información de
mis amigos
![Page 101: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/101.jpg)
index.php
![Page 102: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/102.jpg)
Obtenemos la conexión "friends" del objeto "/me" del Graph API
![Page 103: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/103.jpg)
Paso 6:Requiriendo permisos
extendidos
![Page 104: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/104.jpg)
init.php
![Page 105: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/105.jpg)
Nuestros nuevos permisos
![Page 106: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/106.jpg)
Accediendoa los álbums y fotos
del usuario
![Page 107: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/107.jpg)
index.php
![Page 108: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/108.jpg)
El resultado será...
![Page 109: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/109.jpg)
Paso 7:Utilizando controles
de FBML
![Page 110: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/110.jpg)
index.php
![Page 111: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/111.jpg)
El FBML transformado en HTML resultará en:
![Page 112: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/112.jpg)
Paso 8:Agregando client side
scripting con FBJS
![Page 113: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/113.jpg)
index.php
![Page 114: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/114.jpg)
Al ejecutarlo...
![Page 115: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/115.jpg)
Al clickearlo
![Page 116: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/116.jpg)
Utilizando Facebook Dialogs con FBJS
![Page 117: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/117.jpg)
index.php
![Page 118: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/118.jpg)
Al ejecutarlo...
![Page 119: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/119.jpg)
Realizando llamadas AJAX con FBJS
![Page 120: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/120.jpg)
index.php
![Page 121: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/121.jpg)
Al ejecutarlo...
![Page 122: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/122.jpg)
Al clickear en el boton...
![Page 123: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/123.jpg)
Agregando la aplicación a un Fan Page Tab
![Page 124: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/124.jpg)
Creamos el file tab.php
![Page 125: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/125.jpg)
Configuramos la app para aceptar Tabs
![Page 126: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/126.jpg)
Accedemos al Application Profile
![Page 127: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/127.jpg)
Clickeamos en "Add to my page"
![Page 128: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/128.jpg)
Elegimos la Fan Page a agregar el Tab
![Page 129: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/129.jpg)
Vamos a la Fan Page!
![Page 130: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/130.jpg)
Aquí veremos el FBML generado por tab.php
![Page 131: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/131.jpg)
Al clickear en "Cambiar mi status":
![Page 132: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/132.jpg)
Luego de publicarla... vemos en nuestro perfil el update.
![Page 133: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/133.jpg)
Creando una aplicación en Iframe
![Page 134: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/134.jpg)
Modificando la configuración...
![Page 135: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/135.jpg)
Encuentre la diferencia!
![Page 136: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/136.jpg)
Encuentre la diferencia!
![Page 137: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/137.jpg)
Creamos nuestro Hola Mundo Script en index.php
![Page 138: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/138.jpg)
Y la ejecución resulta en:
![Page 139: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/139.jpg)
Consultando el Graph API con Javascript
![Page 140: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/140.jpg)
index.php
![Page 141: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/141.jpg)
Esto resultará en:
![Page 142: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/142.jpg)
Questions?
![Page 143: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/143.jpg)
Twitter API
![Page 144: Social Apps Workshop](https://reader038.fdocuments.net/reader038/viewer/2022103015/54bd43ce4a7959a8338b4594/html5/thumbnails/144.jpg)
Questions?