1. Fixing Facebook API - Die schönsten
Workarounds
Seite 1 Dezember 7, 2011
AllFacebook.de Developer Conference - 05.12.2011 Klaus Breyer

2. Seite 2 Dezember 7, 2011

3. Seite 3 Dezember 7, 2011

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. Flash-Layer-Fuckoff
Seite 5 Dezember 7, 2011

6. Was Agenturen machen: Gewinnspiele
Seite 6 Dezember 7, 2011

7. Was brauchen Gewinnspiele: E-Mail-Adressen
Seite 7 Dezember 7, 2011

8. Was haben E-Mail-Adressen:
@ Seite 8 Dezember 7, 2011

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. 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. 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. Was der Nutzer sieht
Seite 12 Dezember 7, 2011

13. Was eigentlich da ist
Seite 13 Dezember 7, 2011

14. Das Ergebnis
Seite 14 Dezember 7, 2011

15. Lösung 3: Permission einholen
• As simple as that.
• Learning für Konzeption
Seite 15 Dezember 7, 2011

16. Likes
Seite 16 Dezember 7, 2011

17. Brands wollen Likes
Seite 17 Dezember 7, 2011

18. Smoother: Inline-Like Button
Seite 18 Dezember 7, 2011

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. Klappt auch mit mehreren
Seite 20 Dezember 7, 2011

21. Auch mit Faces
Seite 21 Dezember 7, 2011

22. Problem: Empfehlungs-Dialog
Seite 22 Dezember 7, 2011

23. Lösung: Overlays
Seite 23 Dezember 7, 2011

24. Scrollbar-Bugs
Seite 24 Dezember 7, 2011

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. 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. Kampagnen-
Administration
Seite 27 Dezember 7, 2011

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. 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. Was der Benutzer sieht
Seite 30 Dezember 7, 2011

31. Was der Seitenadministrator sieht
Seite 31 Dezember 7, 2011

32. Was der Seitenadministrator machen kann
Seite 32 Dezember 7, 2011

33. Code
function 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. 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. Bild-Upload
Seite 35 Dezember 7, 2011

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. Lösung: Nachbauen
Seite 37 Dezember 7, 2011

38. Mega-Batch-Requests
Seite 38 Dezember 7, 2011

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. 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. App-Requests
Seite 41 Dezember 7, 2011

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. 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. Lösung 2: Nachbauen
Seite 44 Dezember 7, 2011

45. Lösung 2: Nachbauen
Seite 45 Dezember 7, 2011

46. Lösung 2: Nachbauen
Seite 46 Dezember 7, 2011

47. Evercookie
Seite 47 Dezember 7, 2011

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. 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. Tab-Verlinkungen
Seite 50 Dezember 7, 2011

51. Was der Kunde bekommt, wenn er einen Tab
verlinkt:
Seite 51 Dezember 7, 2011

52. Was der Kunde eigentlich möchte:
Seite 52 Dezember 7, 2011

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. 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. Zeit für Fragen!
Kontakt:
Klaus Breyer
kb@buddybrand.de
http://facebook.com/klausbreyer
http://twitter.com/klausbreyer
We are hiring:
http://facebook.com/buddybrand
http://buddybrand.de
jobs@buddybrand.de
Seite 55 Dezember 7, 2011

56. Impressum
buddybrand GmbH
Klaus Breyer
Greifenhagener Straße 63
10437 Berlin
T.: +49 [0]30 4467793 10
F: +49 [0]30 446779325
Die in dieser Präsentation dokumentierten Gedanken und Ideen sind stets Eigentum der
buddybrand GmbH. Der gesamte Inhalt ist geschützt durch das deutsche Urheberrecht.
Eine auch nur auszugsweise Nutzung oder Weitergabe an Dritte bedarf in jedem Fall der
ausdrücklichen, schriftlichen Genehmigung durch die buddybrand GmbH.
Seite 56 Dezember 7, 2011