facebook app api vs2.0

34

Upload: felix-rivas

Post on 01-Jul-2015

2.179 views

Category:

Technology


2 download

DESCRIPTION

Facebook Developing

TRANSCRIPT

Page 2: Facebook app API Vs2.0

DESARROLLADOR

http://apps.facebook.com/developer

Page 3: Facebook app API Vs2.0
Page 4: Facebook app API Vs2.0

¡Creemos el directorio de nuestra aplicación!

Page 5: Facebook app API Vs2.0

¿Cómo inicio?<?php ... ?>

¿Cómo se declaran las variables?$variable1=0;$variable2="esto es una cadena";

¿Cómo imprimo en pantalla?echo $variable1;echo "esto es una cadena";

¿Cómo comento?// para una línea /* */ para varias líneas

PHP Genius

Page 6: Facebook app API Vs2.0

¿Cómo se incluyen páginas externas?require_once 'carpeta/archivo.php';

¿Cómo concateno cadenas?$cadena = “hola”.”mundo”;

Comillas dentro de cadenas de caracteres$cadena = “hola \” mundo \” ”;

Arrays asociados$color = array (‘rojo’=>45, ‘verde’=>67, ‘azul’=>32);$variable = $color[‘rojo’];

foreach ($color as $valor)echo “$valor ”;

PHP Genius

Page 7: Facebook app API Vs2.0
Page 8: Facebook app API Vs2.0

FBML

Page 9: Facebook app API Vs2.0

FBML

Page 10: Facebook app API Vs2.0

<fb:profile-pic uid=“UN USER ID" linked="true" size=“small" />

<fb:name uid=“UN USER ID" />

Page 11: Facebook app API Vs2.0

<fb:dashboard>

<fb:action href=“index.php” title="Home"> Home </fb:action>

<fb:help href="ayuda.php” title=“Help“> Help </fb:help>

<fb:create-button href="invite.php“> Invitar </fb:create-button>

</fb:dashboard>

Page 12: Facebook app API Vs2.0

<fb:wall>

<fb:wallpost t=“1" uid="520602768">

Facebook Rocks!

</fb:wallpost>

</fb:wall>

Page 13: Facebook app API Vs2.0

<fb:tabs>

<fb:tab-item href=“index.php” title="Hello " selected="true"/> <fb:tab-item href=“invite.php" title="Invite Your Friends" />

</fb:tabs>

Tab Effect

Page 14: Facebook app API Vs2.0

fb:success

Page 15: Facebook app API Vs2.0

fb:error

Page 16: Facebook app API Vs2.0

<fb:message> This is the heading text for the message.

</fb:message>

<fb:error><fb:message>Error message</fb:message> Este es el cuerpo

</fb:error>

<fb:success> <fb:message>Success message</fb:message> This is the success message text.

</fb:success>

Page 17: Facebook app API Vs2.0

<fb:dialog id="fb_search" cancel_button="true"><fb:dialog-title>.. Trabeling Babies</fb:dialog-title>

<fb:dialog-content><fb:message>Este es el

cuerpo</fb:message></fb:dialog-content>

</fb:dialog>

<a href="" clicktoshowdialog="fb_search">Mostrar Error</a>

Dialogs

Page 18: Facebook app API Vs2.0

FBJS

Page 19: Facebook app API Vs2.0

<script src=http://midominio/miProyecto/externo.js?version=1.0></script>

INCLUDING SCRPITS

<script >//some scripts//..

</script>

Page 20: Facebook app API Vs2.0

JavaScript FBJS getter FBJS setter Description

parentNode getParentNode

nextSibling getNextSibling

previousSibling

getPreviousSibling

firstChild getFirstChild

lastChild getLastChild

childNodes getChildNodes Returns a snapshot array of childNodes

innerHTML n/a setInnerFBML Use Fb:js-string to create the string first then pass that variable.

innerText/ textContent

n/a setTextValue allow text (no HTML)! It will remove all childNodes of the element it is called on.

form getForm Doesn't work, use document.getElementById('formid') instead

Page 21: Facebook app API Vs2.0

obj.setStyle({color: 'black', background: 'white'});obj.setStyle('color', 'black');

obj.setStyle('textDecoration', 'underline');obj.setStyle('text-decoration', 'underline');

obj.setStyle('width', '340px');obj.setStyle('width', '340');

setStyle('left', x), but rather like setStyle('left', x+'px').

MANIPULATING STYLES

Page 22: Facebook app API Vs2.0

addClassName(className) ;

removeClassName(className) ; toggleClassName(className); 

hasClassName(className) ;

MANIPULATING STYLES

Page 23: Facebook app API Vs2.0

var newSwf = document.createElement('fb:swf');

Events can be added to FBJS DOM objects using the W3C-style addEventListener method.Third parameter useCapture is not supported.

listEventListeners(eventName) 

purgeEventListeners(eventName) 

stopPropagation 

preventDefault 

Events

CREATING FBML ELEMENTS

Page 24: Facebook app API Vs2.0

echo "<style>";echo htmlentities(file_get_contents('estilo.css',true)); echo "</style>";

<div id="foo">bar</div>

<div id="app0123456789_foo">bar</div>

#foo { ... }

#app0123456789_foo { ... }

Page 25: Facebook app API Vs2.0

<body/>, <p/> font-family: lucida grande, tahoma, verdana, arial, sans-serif; font-size: 11px<h1/> color: #333; font-size: 14px<h2/>, <h3/> color: #333; font-size: 13px<h4/>, <h5/> color: #333; font-size: 11px<a/> color: #3B5998; text-decoration: nonea:hover text-decoration: underline<img/> border: 0px none<select/> border: 1px solid #BDC7D8<input/> border-color: #ADADAD; border-style: solid; border-width: 1px

Default CSS properties for elements on a Facebook canvas page

Page 26: Facebook app API Vs2.0

do_colors!

function do_colors(obj) { obj.setStyle({background: 'black', color: 'red'});

}

<a href="#" onclick="do_colors(this); return false">Hello World!</a>

Page 27: Facebook app API Vs2.0
Page 28: Facebook app API Vs2.0

responseType This can be one of Ajax.RAW, Ajax.JSON, or Ajax.FBML.

ondone(data) 

onerror 

And two methods:

post(url, query) Start an AJAX post. url must be a remote address, and query can be either a string or an object that is automatically converted to a string. abort() 

new Ajax();

Page 29: Facebook app API Vs2.0

<script>function do_ajax(url, div_id) {

var ajax = new Ajax();

ajax.responseType = Ajax.FBML;

ajax.ondone = function(data) { document.getElementById(div_id).setInnerFBML(data);}ajax.requireLogin = true;ajax.post(url);}</script>

Page 30: Facebook app API Vs2.0

Mock AJAX’d

Page 31: Facebook app API Vs2.0

<form id="dummy_form“></form>

<a clickrewriteurl='http://your_server/ajax.php' clickrewriteform='dummy_form' clickrewriteid=‘your_div'>refresh content</a>

<div id=“your_div"> </div>

MOCK AJAX

Page 32: Facebook app API Vs2.0

<fb:multi-friend-input width="350px" border_color="#8496ba" exclude_ids="4,5,10,15" />

<input type="hidden" value="123456789" name="ids[]"/>

$friends = (isset($_REQUEST["ids"]) ? $_REQUEST["ids"] : null);

Selecting multiple friends

Page 33: Facebook app API Vs2.0

<script>function publique(){

var attachment = {'media':[{'type':'image','src':‘URL_IMAGEN','href':‘URL_REF'}]}; Facebook.streamPublish('Esto es lo que te publico', attachment);

}</script>

PUBLIQUEMOS!

Page 34: Facebook app API Vs2.0