Fixing Facebook API - Die schönsten                        Workarounds                                                   S...
Seite 2   Dezember 7, 2011
Seite 3   Dezember 7, 2011
Abstract•    Operation Developer Love: Hilft.•    Codebasis: Besser.•    Heute: Für jeden was dabei.•    Anregungen: Gerne...
Flash-Layer-Fuckoff                  Seite 5   Dezember 7, 2011
Was Agenturen machen: Gewinnspiele                                 Seite 6   Dezember 7, 2011
Was brauchen Gewinnspiele: E-Mail-Adressen                                  Seite 7   Dezember 7, 2011
Was haben E-Mail-Adressen:          @                  Seite 8   Dezember 7, 2011
Problem•    Flash-Einbindung: transparent oder     opaque•    Transparent-Mode: Kein @-Zeichen     im Firefox•    Window-M...
Lösung 1: Unsichtbare Inputs und Javascript•    Flash in transparent eingebunden•    Unsichtbare Input-Felder über dem Fla...
Lösung 2: Das doppelte Lottchen•    E-Mail-Adresse wird nicht in transparent-Flash eingegeben•    Eigener Layer zur Eingab...
Was der Nutzer sieht                       Seite 12   Dezember 7, 2011
Was eigentlich da ist                        Seite 13   Dezember 7, 2011
Das Ergebnis               Seite 14   Dezember 7, 2011
Lösung 3: Permission einholen•    As simple as that.•    Learning für Konzeption                                Seite 15  ...
Likes        Seite 16   Dezember 7, 2011
Brands wollen Likes                      Seite 17   Dezember 7, 2011
Smoother: Inline-Like Button                               Seite 18   Dezember 7, 2011
Code<fb:like href=http://www.facebook.com/skoda!  send="false”!  width="450”!  show_faces="false"></fb:like>!!!FB.Event.su...
Klappt auch mit mehreren                           Seite 20   Dezember 7, 2011
Auch mit Faces                 Seite 21   Dezember 7, 2011
Problem: Empfehlungs-Dialog                              Seite 22   Dezember 7, 2011
Lösung: Overlays                   Seite 23   Dezember 7, 2011
Scrollbar-Bugs                 Seite 24   Dezember 7, 2011
Problem: Scrollbars in Reitern•    Ursachen:      •  Javascript SDK resized nicht richtig.      •  Content wenige Pixel zu...
Lösung: Overflow hidden / feste Größe  FB.Canvas.setAutoResize();!     FB.Event.subscribe(xfbml.render,function(response) ...
Kampagnen-Administration                 Seite 27   Dezember 7, 2011
Das Problem•    Der Kunde möchte die Inhalte bearbeiten können•    Vergisst aber ständig den Zugang zum Backend           ...
Lösungen•    Eigenständiges Back-End      •  Scaffolding      •  Universell      •  CMS-Anbindung•    Abfrage auf Page-Adm...
Was der Benutzer sieht                         Seite 30   Dezember 7, 2011
Was der Seitenadministrator sieht                                    Seite 31   Dezember 7, 2011
Was der Seitenadministrator machen kann                                  Seite 32   Dezember 7, 2011
Codefunction parse_signed_request($signed_request, $secret) {!   list($encoded_sig, $payload) = explode(., $signed_request...
Ergebnis[algorithm] => HMAC-SHA256![expires] => 1321815600![issued_at] => 1321808659![oauth_token] => ![page] => Array!   ...
Bild-Upload              Seite 35   Dezember 7, 2011
Problem•    Profilbildgeneratoren•    Fotowettbewerbe      •  User möchten ihre Bilder auswählen      •  Die wichtigsten B...
Lösung: Nachbauen                    Seite 37   Dezember 7, 2011
Mega-Batch-Requests                Seite 38   Dezember 7, 2011
Problem•    Riesige Batch-Requests werden nicht ausgeführt wegen Limit•    Use-Cases:      •  Alle je geposteten Links von...
Lösung: Aufteilen$members = $facebook->api("/me/friends", "GET", $args);!!$anzmembers = ceil($anzmembers/20);!!foreach ($m...
App-Requests               Seite 41   Dezember 7, 2011
Problem•    Die Konzeption sagt: Es müssen genau 3 Leute eingeladen werden      •  Früher: App-Requests ohne Nutzer-Limits...
Lösung 1: Mechanik ändern•    Limit entfernen•    Beliebig viele Leute einladen lassen können      •  First Come – First S...
Lösung 2: Nachbauen                      Seite 44   Dezember 7, 2011
Lösung 2: Nachbauen                      Seite 45   Dezember 7, 2011
Lösung 2: Nachbauen                      Seite 46   Dezember 7, 2011
Evercookie             Seite 47   Dezember 7, 2011
Problem•    Man darf per Like-Buttons keine Voting-Gewinner bestimmen•    Voting ohne Installation sehr Betrugsanfällig•  ...
Lösung: Evercookie•    Standard HTTP Cookies•    Local Shared Objects (Flash Cookies)•    Silverlight Isolated Storage•   ...
Tab-Verlinkungen                   Seite 50   Dezember 7, 2011
Was der Kunde bekommt, wenn er einen Tabverlinkt:                                 Seite 51   Dezember 7, 2011
Was der Kunde eigentlich möchte:                                   Seite 52   Dezember 7, 2011
Lösung•    OG-Metatags und eine Weiterleitung•    Nebeneffekte      •  Durch die Umleitung Favoritenlistung auch von Reite...
Code<head xmlns="http://www.w3.org/1999/xhtml"!      xmlns:og="http://ogp.me/ns#"!      xmlns:fb="http://www.facebook.com/...
Zeit für Fragen!Kontakt:Klaus Breyerkb@buddybrand.dehttp://facebook.com/klausbreyerhttp://twitter.com/klausbreyerWe are hi...
Impressumbuddybrand GmbHKlaus BreyerGreifenhagener Straße 6310437 BerlinT.: +49 [0]30 4467793 10F: +49 [0]30 446779325Die ...
Nächste SlideShare
Wird geladen in …5
×

Fixing Facebook API - Die schönsten Workarounds (by Klaus Breyer @ AllFacebook Developer Conference)

5.472 Aufrufe

Veröffentlicht am

0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
5.472
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.543
Aktionen
Geteilt
0
Downloads
58
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Fixing Facebook API - Die schönsten Workarounds (by Klaus Breyer @ AllFacebook Developer Conference)

  1. 1. Fixing Facebook API - Die schönsten Workarounds Seite 1 Dezember 7, 2011AllFacebook.de Developer Conference - 05.12.2011 Klaus Breyer
  2. 2. Seite 2 Dezember 7, 2011
  3. 3. Seite 3 Dezember 7, 2011
  4. 4. Abstract•  Operation Developer Love: Hilft.•  Codebasis: Besser.•  Heute: Für jeden was dabei.•  Anregungen: Gerne gesehen.•  Fragen: Am Ende. Seite 4 Dezember 7, 2011
  5. 5. Flash-Layer-Fuckoff Seite 5 Dezember 7, 2011
  6. 6. Was Agenturen machen: Gewinnspiele Seite 6 Dezember 7, 2011
  7. 7. Was brauchen Gewinnspiele: E-Mail-Adressen Seite 7 Dezember 7, 2011
  8. 8. Was haben E-Mail-Adressen: @ Seite 8 Dezember 7, 2011
  9. 9. Problem•  Flash-Einbindung: transparent oder opaque•  Transparent-Mode: Kein @-Zeichen im Firefox•  Window-Mode: Flash im Vordergrund – keine Overlays•  Popup-Elemente: Geblockt, da kein onclick-Event ausgelöst wurde è Kein @ in Flash! Seite 9 Dezember 7, 2011
  10. 10. Lösung 1: Unsichtbare Inputs und Javascript•  Flash in transparent eingebunden•  Unsichtbare Input-Felder über dem Flash •  Flash aktiviert Javascript zum Einblenden •  Javascript schickt Eingabe zurück•  Problem an der Lösung: In Flash eingebundene Schriften. •  Man könnte jeden einzelnen Buchstaben abgreifen •  Aber: Cursorposition und Darstellung Seite 10 Dezember 7, 2011
  11. 11. Lösung 2: Das doppelte Lottchen•  E-Mail-Adresse wird nicht in transparent-Flash eingegeben•  Eigener Layer zur Eingabe •  Flash in window-Mode •  HTML•  Javascript wechselt die Layer-Positionen •  Müssen beide schon sichtbar sein, sonst Lag.•  Saubere Lösung, wenn keine andere Möglichkeit für den Kunden akzeptabel ist Seite 11 Dezember 7, 2011
  12. 12. Was der Nutzer sieht Seite 12 Dezember 7, 2011
  13. 13. Was eigentlich da ist Seite 13 Dezember 7, 2011
  14. 14. Das Ergebnis Seite 14 Dezember 7, 2011
  15. 15. Lösung 3: Permission einholen•  As simple as that.•  Learning für Konzeption Seite 15 Dezember 7, 2011
  16. 16. Likes Seite 16 Dezember 7, 2011
  17. 17. Brands wollen Likes Seite 17 Dezember 7, 2011
  18. 18. Smoother: Inline-Like Button Seite 18 Dezember 7, 2011
  19. 19. Code<fb:like href=http://www.facebook.com/skoda! send="false”! width="450”! show_faces="false"></fb:like>!!!FB.Event.subscribe(edge.create, ! !! !function(response) { !! !window.location.reload (); !! !} !! !); !!!! Seite 19 Dezember 7, 2011
  20. 20. Klappt auch mit mehreren Seite 20 Dezember 7, 2011
  21. 21. Auch mit Faces Seite 21 Dezember 7, 2011
  22. 22. Problem: Empfehlungs-Dialog Seite 22 Dezember 7, 2011
  23. 23. Lösung: Overlays Seite 23 Dezember 7, 2011
  24. 24. Scrollbar-Bugs Seite 24 Dezember 7, 2011
  25. 25. Problem: Scrollbars in Reitern•  Ursachen: •  Javascript SDK resized nicht richtig. •  Content wenige Pixel zu groß•  Check: Per HTTPS eingebunden? Seite 25 Dezember 7, 2011
  26. 26. Lösung: Overflow hidden / feste Größe FB.Canvas.setAutoResize();! FB.Event.subscribe(xfbml.render,function(response) {! FB.Canvas.setAutoResize();! });!!!body {! !margin:0;! !padding:0; ! !height:1420px;! !width:520px;! !overflow:hidden;! !}! Seite 26 Dezember 7, 2011
  27. 27. Kampagnen-Administration Seite 27 Dezember 7, 2011
  28. 28. Das Problem•  Der Kunde möchte die Inhalte bearbeiten können•  Vergisst aber ständig den Zugang zum Backend Seite 28 Dezember 7, 2011
  29. 29. Lösungen•  Eigenständiges Back-End •  Scaffolding •  Universell •  CMS-Anbindung•  Abfrage auf Page-Administrator •  Links zum Löschen/Editieren direkt in Reiter •  Einheitliche Lösung •  Kein eigenes Back-End mit eigenem Design nötig Seite 29 Dezember 7, 2011
  30. 30. Was der Benutzer sieht Seite 30 Dezember 7, 2011
  31. 31. Was der Seitenadministrator sieht Seite 31 Dezember 7, 2011
  32. 32. Was der Seitenadministrator machen kann Seite 32 Dezember 7, 2011
  33. 33. Codefunction parse_signed_request($signed_request, $secret) {! list($encoded_sig, $payload) = explode(., $signed_request, 2); ! // decode the data! $sig = base64_url_decode($encoded_sig);! $data = json_decode(base64_url_decode($payload), true);! if (strtoupper($data[algorithm]) !== HMAC-SHA256) {! error_log(Unknown algorithm. Expected HMAC-SHA256);! return null;! }! // check sig! $expected_sig = hash_hmac(sha256, $payload, $secret, $raw = true);! if ($sig !== $expected_sig) {! error_log(Bad Signed JSON signature!);! return null;! }! return $data;!}!!function base64_url_decode($input) {! return base64_decode(strtr($input, -_, +/));!}! Seite 33 Dezember 7, 2011
  34. 34. Ergebnis[algorithm] => HMAC-SHA256![expires] => 1321815600![issued_at] => 1321808659![oauth_token] => ![page] => Array! (! [id] => 120959471289306! [liked] => 1! [admin] => 1! )![user] => Array! (! [country] => de! [locale] => de_DE! [age] => Array! (! [min] => 21! )! )![user_id] => 707892557! Seite 34 Dezember 7, 2011
  35. 35. Bild-Upload Seite 35 Dezember 7, 2011
  36. 36. Problem•  Profilbildgeneratoren•  Fotowettbewerbe •  User möchten ihre Bilder auswählen •  Die wichtigsten Bilder sind ohnehin in Facebook•  Facebook bietet dafür kein Widget Seite 36 Dezember 7, 2011
  37. 37. Lösung: Nachbauen Seite 37 Dezember 7, 2011
  38. 38. Mega-Batch-Requests Seite 38 Dezember 7, 2011
  39. 39. Problem•  Riesige Batch-Requests werden nicht ausgeführt wegen Limit•  Use-Cases: •  Alle je geposteten Links von allen Freunden •  Auslesen aller Freunde seiner Freunde Seite 39 Dezember 7, 2011
  40. 40. Lösung: Aufteilen$members = $facebook->api("/me/friends", "GET", $args);!!$anzmembers = ceil($anzmembers/20);!!foreach ($members[data] as $key => $value) {! !$requests[$i%$anzmembers] ! !.= {"method":"GET","relative_url":".$value[id]./links"},;!}!!for ($i=0; $i < count($string); $i++) { ! !$batched_request = "[". substr($requests[$i], 0, -1) . "]";!! !$post_url = "https://graph.facebook.com/" . "?batch=" ! !. $batched_request . "&access_token=" . $access_token ! !. "&method=post";!}! Seite 40 Dezember 7, 2011
  41. 41. App-Requests Seite 41 Dezember 7, 2011
  42. 42. Problem•  Die Konzeption sagt: Es müssen genau 3 Leute eingeladen werden •  Früher: App-Requests ohne Nutzer-Limits •  Nur Listen-Vorschläge•  Facebook bietet keine reine Freund-Auswahl Seite 42 Dezember 7, 2011
  43. 43. Lösung 1: Mechanik ändern•  Limit entfernen•  Beliebig viele Leute einladen lassen können •  First Come – First Served •  Requests gehen unter •  Mehr Reichweite Seite 43 Dezember 7, 2011
  44. 44. Lösung 2: Nachbauen Seite 44 Dezember 7, 2011
  45. 45. Lösung 2: Nachbauen Seite 45 Dezember 7, 2011
  46. 46. Lösung 2: Nachbauen Seite 46 Dezember 7, 2011
  47. 47. Evercookie Seite 47 Dezember 7, 2011
  48. 48. Problem•  Man darf per Like-Buttons keine Voting-Gewinner bestimmen•  Voting ohne Installation sehr Betrugsanfällig•  Installation allerdings Hürde Seite 48 Dezember 7, 2011
  49. 49. Lösung: Evercookie•  Standard HTTP Cookies•  Local Shared Objects (Flash Cookies)•  Silverlight Isolated Storage•  Storing cookies in RGB values of auto-generated, force-cached PNGs using HTML5 Canvas tag to read pixels (cookies) back out•  Storing cookies in Web History•  Storing cookies in HTTP ETags•  Storing cookies in Web cache•  window.name caching•  Internet Explorer userData storage•  HTML5 Session Storage•  HTML5 Local Storage•  HTML5 Global Storage•  HTML5 Database Storage via SQLite Seite 49 Dezember 7, 2011
  50. 50. Tab-Verlinkungen Seite 50 Dezember 7, 2011
  51. 51. Was der Kunde bekommt, wenn er einen Tabverlinkt: Seite 51 Dezember 7, 2011
  52. 52. Was der Kunde eigentlich möchte: Seite 52 Dezember 7, 2011
  53. 53. Lösung•  OG-Metatags und eine Weiterleitung•  Nebeneffekte •  Durch die Umleitung Favoritenlistung auch von Reitern •  Server-Root macht immer etwas •  OG-Tags sollte man so oder so setzen •  Wiederverwendbar Seite 53 Dezember 7, 2011
  54. 54. Code<head xmlns="http://www.w3.org/1999/xhtml"! xmlns:og="http://ogp.me/ns#"! xmlns:fb="http://www.facebook.com/2008/fbml">! <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />! <meta property="og:title" content="ME, MYKITA & I" />! <meta property="og:url" content="<?echo $fb_tab_url;?>" />! <meta property="og:description" content="ME, MYKITA & I" />! <meta property="og:site_name" content="ME, MYKITA & I" />! <meta property="og:type" content="product" />! <meta property="og:image" content="http://buddybrand.eu/mykita/me_mykita_i/images/client.png" />! <meta property="fb:app_id" content="<?echo $fb_app_id;?>" />! <script type="text/javascript">! top.location.href = <?echo $fb_tab_url;?>;! </script>!</head>!<body>!</body>!</html>! Seite 54 Dezember 7, 2011
  55. 55. Zeit für Fragen!Kontakt:Klaus Breyerkb@buddybrand.dehttp://facebook.com/klausbreyerhttp://twitter.com/klausbreyerWe are hiring:http://facebook.com/buddybrandhttp://buddybrand.dejobs@buddybrand.de Seite 55 Dezember 7, 2011
  56. 56. Impressumbuddybrand GmbHKlaus BreyerGreifenhagener Straße 6310437 BerlinT.: +49 [0]30 4467793 10F: +49 [0]30 446779325Die in dieser Präsentation dokumentierten Gedanken und Ideen sind stets Eigentum derbuddybrand GmbH. Der gesamte Inhalt ist geschützt durch das deutsche Urheberrecht.Eine auch nur auszugsweise Nutzung oder Weitergabe an Dritte bedarf in jedem Fall derausdrücklichen, schriftlichen Genehmigung durch die buddybrand GmbH. Seite 56 Dezember 7, 2011

×