Fixing facebook api

Dezember 7, 2011 Seite 1 AllFacebook.de Developer Conference - 05.12.2011 Klaus Breyer

Fixing Facebook API - Die schönsten Workarounds

Dezember 7, 2011 Seite 2



Abstract

•  Operation Developer Love: Hilft.

•  Codebasis: Besser.

•  Heute: Für jeden was dabei.

•  Anregungen: Gerne gesehen.

•  Fragen: Am Ende.


Flash-Layer-Fuckoff


Was Agenturen machen: Gewinnspiele


Was brauchen Gewinnspiele: E-Mail-Adressen


Was haben E-Mail-Adressen:

@


•  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


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


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


Was der Nutzer sieht


Was eigentlich da ist


Das Ergebnis


Lösung 3: Permission einholen

•  As simple as that.

•  Learning für Konzeption


Likes


Brands wollen Likes


Smoother: Inline-Like Button


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 (); !!!} !!!); !!

!!


Klappt auch mit mehreren


Auch mit Faces


Problem: Empfehlungs-Dialog


Lösung: Overlays


Scrollbar-Bugs


Problem: Scrollbars in Reitern

•  Ursachen:

•  Javascript SDK resized nicht richtig.

•  Content wenige Pixel zu groß

•  Check: Per HTTPS eingebunden?


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;!!}!


Kampagnen-Administration


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-Administrator

•  Links zum Löschen/Editieren direkt in Reiter

•  Einheitliche Lösung

•  Kein eigenes Back-End mit eigenem Design nötig


Was der Benutzer sieht


Was der Seitenadministrator sieht


Was der Seitenadministrator machen kann


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, '-_', '+/'));!}!


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!


Bild-Upload


Problem

•  Profilbildgeneratoren

•  Fotowettbewerbe

•  User möchten ihre Bilder auswählen

•  Die wichtigsten Bilder sind ohnehin in Facebook

•  Facebook bietet dafür kein Widget


Lösung: Nachbauen


Mega-Batch-Requests


Problem

•  Riesige Batch-Requests werden nicht ausgeführt wegen Limit

•  Use-Cases:

•  Alle je geposteten Links von allen Freunden

•  Auslesen aller Freunde seiner Freunde


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";!

}!


App-Requests


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


Lösung 1: Mechanik ändern

•  Limit entfernen

•  Beliebig viele Leute einladen lassen können

•  First Come – First Served

•  Requests gehen unter

•  Mehr Reichweite


Lösung 2: Nachbauen






Evercookie


Problem

•  Man darf per Like-Buttons keine Voting-Gewinner bestimmen

•  Voting ohne Installation sehr Betrugsanfällig

•  Installation allerdings Hürde


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


Tab-Verlinkungen


Was der Kunde bekommt, wenn er einen Tab verlinkt:


Was der Kunde eigentlich möchte:


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


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>!


Zeit für Fragen!

Kontakt:

Klaus Breyer

[email protected]

http://facebook.com/klausbreyer

http://twitter.com/klausbreyer

We are hiring:

http://facebook.com/buddybrand

http://buddybrand.de

[email protected]


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

Date post:	26-Jun-2015
Category:	Documents
Upload:	klaus-breyer
View:	543 times
Download:	1 times

Fixing facebook api

Documents