fixing facebook api
TRANSCRIPT
![Page 1: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/1.jpg)
Dezember 7, 2011 Seite 1 AllFacebook.de Developer Conference - 05.12.2011 Klaus Breyer
Fixing Facebook API - Die schönsten Workarounds
![Page 2: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/2.jpg)
Dezember 7, 2011 Seite 2
![Page 3: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/3.jpg)
Dezember 7, 2011 Seite 3
![Page 4: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/4.jpg)
Dezember 7, 2011 Seite 4
Abstract
• Operation Developer Love: Hilft.
• Codebasis: Besser.
• Heute: Für jeden was dabei.
• Anregungen: Gerne gesehen.
• Fragen: Am Ende.
![Page 5: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/5.jpg)
Dezember 7, 2011 Seite 5
Flash-Layer-Fuckoff
![Page 6: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/6.jpg)
Dezember 7, 2011 Seite 6
Was Agenturen machen: Gewinnspiele
![Page 7: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/7.jpg)
Dezember 7, 2011 Seite 7
Was brauchen Gewinnspiele: E-Mail-Adressen
![Page 8: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/8.jpg)
Dezember 7, 2011 Seite 8
Was haben E-Mail-Adressen:
@
![Page 9: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/9.jpg)
Dezember 7, 2011 Seite 9
• 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!
Problem
![Page 10: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/10.jpg)
Dezember 7, 2011 Seite 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
![Page 11: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/11.jpg)
Dezember 7, 2011 Seite 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
![Page 12: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/12.jpg)
Dezember 7, 2011 Seite 12
Was der Nutzer sieht
![Page 13: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/13.jpg)
Dezember 7, 2011 Seite 13
Was eigentlich da ist
![Page 14: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/14.jpg)
Dezember 7, 2011 Seite 14
Das Ergebnis
![Page 15: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/15.jpg)
Dezember 7, 2011 Seite 15
Lösung 3: Permission einholen
• As simple as that.
• Learning für Konzeption
![Page 16: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/16.jpg)
Dezember 7, 2011 Seite 16
Likes
![Page 17: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/17.jpg)
Dezember 7, 2011 Seite 17
Brands wollen Likes
![Page 18: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/18.jpg)
Dezember 7, 2011 Seite 18
Smoother: Inline-Like Button
![Page 19: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/19.jpg)
Dezember 7, 2011 Seite 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 (); !!!} !!!); !!
!!
![Page 20: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/20.jpg)
Dezember 7, 2011 Seite 20
Klappt auch mit mehreren
![Page 21: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/21.jpg)
Dezember 7, 2011 Seite 21
Auch mit Faces
![Page 22: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/22.jpg)
Dezember 7, 2011 Seite 22
Problem: Empfehlungs-Dialog
![Page 23: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/23.jpg)
Dezember 7, 2011 Seite 23
Lösung: Overlays
![Page 24: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/24.jpg)
Dezember 7, 2011 Seite 24
Scrollbar-Bugs
![Page 25: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/25.jpg)
Dezember 7, 2011 Seite 25
Problem: Scrollbars in Reitern
• Ursachen:
• Javascript SDK resized nicht richtig.
• Content wenige Pixel zu groß
• Check: Per HTTPS eingebunden?
![Page 26: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/26.jpg)
Dezember 7, 2011 Seite 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;!!}!
![Page 27: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/27.jpg)
Dezember 7, 2011 Seite 27
Kampagnen-Administration
![Page 28: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/28.jpg)
Dezember 7, 2011 Seite 28
Das Problem
• Der Kunde möchte die Inhalte bearbeiten können
• Vergisst aber ständig den Zugang zum Backend
![Page 29: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/29.jpg)
Dezember 7, 2011 Seite 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
![Page 30: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/30.jpg)
Dezember 7, 2011 Seite 30
Was der Benutzer sieht
![Page 31: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/31.jpg)
Dezember 7, 2011 Seite 31
Was der Seitenadministrator sieht
![Page 32: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/32.jpg)
Dezember 7, 2011 Seite 32
Was der Seitenadministrator machen kann
![Page 33: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/33.jpg)
Dezember 7, 2011 Seite 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, '-_', '+/'));!}!
![Page 34: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/34.jpg)
Dezember 7, 2011 Seite 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!
![Page 35: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/35.jpg)
Dezember 7, 2011 Seite 35
Bild-Upload
![Page 36: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/36.jpg)
Dezember 7, 2011 Seite 36
Problem
• Profilbildgeneratoren
• Fotowettbewerbe
• User möchten ihre Bilder auswählen
• Die wichtigsten Bilder sind ohnehin in Facebook
• Facebook bietet dafür kein Widget
![Page 37: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/37.jpg)
Dezember 7, 2011 Seite 37
Lösung: Nachbauen
![Page 38: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/38.jpg)
Dezember 7, 2011 Seite 38
Mega-Batch-Requests
![Page 39: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/39.jpg)
Dezember 7, 2011 Seite 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
![Page 40: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/40.jpg)
Dezember 7, 2011 Seite 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";!
}!
![Page 41: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/41.jpg)
Dezember 7, 2011 Seite 41
App-Requests
![Page 42: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/42.jpg)
Dezember 7, 2011 Seite 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
![Page 43: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/43.jpg)
Dezember 7, 2011 Seite 43
Lösung 1: Mechanik ändern
• Limit entfernen
• Beliebig viele Leute einladen lassen können
• First Come – First Served
• Requests gehen unter
• Mehr Reichweite
![Page 44: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/44.jpg)
Dezember 7, 2011 Seite 44
Lösung 2: Nachbauen
![Page 45: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/45.jpg)
Dezember 7, 2011 Seite 45
Lösung 2: Nachbauen
![Page 46: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/46.jpg)
Dezember 7, 2011 Seite 46
Lösung 2: Nachbauen
![Page 47: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/47.jpg)
Dezember 7, 2011 Seite 47
Evercookie
![Page 48: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/48.jpg)
Dezember 7, 2011 Seite 48
Problem
• Man darf per Like-Buttons keine Voting-Gewinner bestimmen
• Voting ohne Installation sehr Betrugsanfällig
• Installation allerdings Hürde
![Page 49: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/49.jpg)
Dezember 7, 2011 Seite 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
![Page 50: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/50.jpg)
Dezember 7, 2011 Seite 50
Tab-Verlinkungen
![Page 51: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/51.jpg)
Dezember 7, 2011 Seite 51
Was der Kunde bekommt, wenn er einen Tab verlinkt:
![Page 52: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/52.jpg)
Dezember 7, 2011 Seite 52
Was der Kunde eigentlich möchte:
![Page 53: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/53.jpg)
Dezember 7, 2011 Seite 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
![Page 54: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/54.jpg)
Dezember 7, 2011 Seite 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>!
![Page 55: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/55.jpg)
Dezember 7, 2011 Seite 55
Zeit für Fragen!
Kontakt:
Klaus Breyer
http://facebook.com/klausbreyer
http://twitter.com/klausbreyer
We are hiring:
http://facebook.com/buddybrand
http://buddybrand.de
![Page 56: Fixing facebook api](https://reader033.vdocuments.site/reader033/viewer/2022051016/558cb2aad8b42a447a8b45da/html5/thumbnails/56.jpg)
Dezember 7, 2011 Seite 56
Impressum
buddybrand GmbH Greifenhagener Straße 63 10437 Berlin T.: +49 [0]30 4467793 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.
Klaus Breyer
10