Facebook app API Vs2.0

2,387 views

Published on

Facebook Developing

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,387
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Facebook app API Vs2.0

  1. 1.
  2. 2. DESARROLLADOR<br />http://apps.facebook.com/developer<br />
  3. 3.
  4. 4. ¡Creemos el directorio de nuestra aplicación!<br />
  5. 5. PHP Genius<br />¿Cómo inicio?<br /> <?php ... ?><br />¿Cómo se declaran las variables?<br /> $variable1=0;<br /> $variable2="esto es una cadena";<br />¿Cómo imprimo en pantalla?<br /> echo $variable1;<br /> echo "esto es una cadena";<br />¿Cómo comento?<br /> // para una línea<br /> /* */ para varias líneas<br />
  6. 6. PHP Genius<br />¿Cómo se incluyen páginas externas?<br />require_once 'carpeta/archivo.php';<br />¿Cómo concateno cadenas?<br /> $cadena = “hola”.”mundo”;<br />Comillas dentro de cadenas de caracteres<br /> $cadena = “hola ” mundo ” ”;<br />Arrays asociados<br /> $color = array (‘rojo’=>45, ‘verde’=>67, ‘azul’=>32);<br /> $variable = $color[‘rojo’];<br />foreach ($color as $valor)<br /> echo “$valor ”;<br />
  7. 7.
  8. 8. FBML<br />
  9. 9. FBML<br />
  10. 10. <fb:nameuid=“UN USER ID" /><br /><fb:profile-picuid=“UN USER ID" linked="true"size=“small"/><br />
  11. 11. <fb:dashboard><br /><fb:actionhref=“index.php”title="Home"> Home </fb:action><br /> <fb:helphref="ayuda.php”title=“Help“>Help </fb:help><br /><fb:create-buttonhref="invite.php“> Invitar </fb:create-button><br /></fb:dashboard><br />
  12. 12. <fb:wall><br /> <fb:wallpost t=“1" uid="520602768"><br />FacebookRocks!<br /> </fb:wallpost><br /></fb:wall><br />
  13. 13. TabEffect<br /><fb:tabs><br /><fb:tab-itemhref=“index.php” title="Hello " selected="true"/><br /> <fb:tab-itemhref=“invite.php"title="Invite Your Friends"/><br /></fb:tabs><br />
  14. 14. fb:success<br />
  15. 15. fb:error<br />
  16. 16. <fb:message> <br /> This is the heading text for the message. </fb:message><br /><fb:success> <br /> <fb:message>Success message</fb:message> <br /> This is the success message text. <br /></fb:success><br /><fb:error><br /> <fb:message>Error message</fb:message> <br /> Este es el cuerpo<br /></fb:error><br />
  17. 17. Dialogs<br /><fb:dialog id="fb_search" cancel_button="true"><br /> <fb:dialog-title>.. TrabelingBabies</fb:dialog-title><br /> <fb:dialog-content><br /><fb:message>Este es el cuerpo</fb:message><br /></fb:dialog-content><br /></fb:dialog><br /><a href="" clicktoshowdialog="fb_search">Mostrar Error</a><br />
  18. 18. FBJS<br />
  19. 19. Includingscrpits<br /><script src=http://midominio/miProyecto/externo.js?version=1.0></script><br /><script ><br />//some scripts<br /> //..<br /></script><br />
  20. 20.
  21. 21. ManipulatingStyles<br />obj.setStyle({color: 'black', background: 'white'});<br />obj.setStyle('color', 'black');<br />obj.setStyle('textDecoration', 'underline');<br />obj.setStyle('text-decoration', 'underline');<br />obj.setStyle('width', '340px');<br />obj.setStyle('width', '340');<br />setStyle('left', x), butratherlikesetStyle('left', x+'px'). <br />
  22. 22. ManipulatingStyles<br />addClassName(className) ;<br />removeClassName(className) ;<br />toggleClassName(className); <br />hasClassName(className) ;<br />
  23. 23. Creating FBML Elements<br />varnewSwf = document.createElement('fb:swf'); <br />Eventscan beaddedto FBJS DOM objectsusingthe W3C-style addEventListener method.<br />ThirdparameteruseCaptureisnotsupported. <br />listEventListeners(eventName) <br />purgeEventListeners(eventName) <br />stopPropagation <br />preventDefault <br />Events<br />
  24. 24. echo "<style>";<br />echohtmlentities(file_get_contents('estilo.css',true)); <br />echo "</style>";<br /><div id="foo">bar</div><br />#foo { ... }<br /><div id="app0123456789_foo">bar</div><br />#app0123456789_foo { ... }<br />
  25. 25. Default CSS properties for elements on a Facebook canvas page<br /><body/>, <p/> font-family: lucida grande, tahoma, verdana, arial, sans-serif; font-size: 11px<br /><h1/> color: #333; font-size: 14px<br /><h2/>, <h3/> color: #333; font-size: 13px<br /><h4/>, <h5/> color: #333; font-size: 11px<br /><a/> color: #3B5998; text-decoration: none<br />a:hover text-decoration: underline<br /><img/> border: 0px none<br /><select/> border: 1px solid #BDC7D8<br /><input/> border-color: #ADADAD; border-style: solid; border-width: 1px<br />
  26. 26. do_colors!<br />functiondo_colors(obj) { <br />obj.setStyle({background: 'black', color: 'red'}); <br />} <br /><a href="#" onclick="do_colors(this); return false">Hello World!</a> <br />
  27. 27.
  28. 28. new Ajax();<br />responseType <br />This can beone of Ajax.RAW, Ajax.JSON, orAjax.FBML. <br />ondone(data) <br />onerror <br />And twomethods: <br />post(url, query) <br />Startan AJAX post. urlmustbe a remoteaddress, and query can beeither a stringoranobject<br />thatisautomaticallyconvertedto a string. <br />abort() <br />
  29. 29. <script><br />functiondo_ajax(url, div_id) {<br />varajax = new Ajax();<br />ajax.responseType = Ajax.FBML;<br />ajax.ondone = function(data) {<br />document.getElementById(div_id).setInnerFBML(data);<br />}<br />ajax.requireLogin = true;<br />ajax.post(url);<br />}<br /></script><br />
  30. 30. MockAJAX’d<br />
  31. 31. MOCK AJAX<br /><form id="dummy_form“></form> <br /> <a clickrewriteurl='http://your_server/ajax.php' clickrewriteform='dummy_form' clickrewriteid=‘your_div'>refreshcontent</a><br /> <div id=“your_div"> </div> <br />
  32. 32. Selectingmultiplefriends<br /><fb:multi-friend-input width="350px" border_color="#8496ba" exclude_ids="4,5,10,15" /><br /><input type="hidden" value="123456789" name="ids[]"/><br />$friends = (isset($_REQUEST["ids"]) ? $_REQUEST["ids"] : null);<br />
  33. 33. PUBLIQUEMOS!<br /><script><br />function publique(){<br />varattachment = {'media':[{'type':'image','src':‘URL_IMAGEN','href':‘URL_REF'}]}; <br />Facebook.streamPublish('Esto es lo que te publico', attachment);<br />}<br /></script><br />

×