Fixing facebook api

Klaus Breyer
Klaus BreyerGeschäftsführer um buddybrand
Fixing Facebook API - Die schönsten
                        Workarounds




                                                   Seite 1   Dezember 7, 2011
AllFacebook.de Developer Conference - 05.12.2011               Klaus Breyer
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 gesehen.

•    Fragen: Am Ende.




                                        Seite 4   Dezember 7, 2011
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-Mode: Flash im
     Vordergrund – keine Overlays

•    Popup-Elemente: Geblockt, da kein
     onclick-Event ausgelöst wurde



          è Kein @ in Flash!




                                          Seite 9   Dezember 7, 2011
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
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
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   Dezember 7, 2011
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.subscribe('edge.create',
                                ! !!
  !function(response) { !!
  !window.location.reload ();   !!
  !} !!
  !); !!
!
!




                                               Seite 19   Dezember 7, 2011
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 groß

•    Check: Per HTTPS eingebunden?




                                                 Seite 25   Dezember 7, 2011
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
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




                                                      Seite 28   Dezember 7, 2011
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
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
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
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
Bild-Upload




              Seite 35   Dezember 7, 2011
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
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 allen Freunden

      •  Auslesen aller Freunde seiner Freunde




                                                                  Seite 39   Dezember 7, 2011
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
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

      •  Nur Listen-Vorschläge

•    Facebook bietet keine reine Freund-Auswahl




                                                               Seite 42   Dezember 7, 2011
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
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

•    Installation allerdings Hürde




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




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




                                 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 Reitern

      •  Server-Root macht immer etwas

      •  OG-Tags sollte man so oder so setzen

      •  Wiederverwendbar




                                                                 Seite 53   Dezember 7, 2011
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
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
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
1 von 56

Recomendados

Trabajofinal edwinpimienta Teoria General sistemas von
Trabajofinal edwinpimienta Teoria General sistemasTrabajofinal edwinpimienta Teoria General sistemas
Trabajofinal edwinpimienta Teoria General sistemasEdwin Calderon
658 views9 Folien
Wohnungsmrkte+im+Wandel+-+Zentrale+Ergebnisse+der+Wohnungsmarkt-+prognose+201... von
Wohnungsmrkte+im+Wandel+-+Zentrale+Ergebnisse+der+Wohnungsmarkt-+prognose+201...Wohnungsmrkte+im+Wandel+-+Zentrale+Ergebnisse+der+Wohnungsmarkt-+prognose+201...
Wohnungsmrkte+im+Wandel+-+Zentrale+Ergebnisse+der+Wohnungsmarkt-+prognose+201...unn | UNITED NEWS NETWORK GmbH
503 views16 Folien
Bios uefi y lagacy von
Bios uefi y lagacyBios uefi y lagacy
Bios uefi y lagacynayelikaren
345 views14 Folien
Recopilacion de la informacion von
Recopilacion de la informacionRecopilacion de la informacion
Recopilacion de la informacionnayelikaren
409 views37 Folien
Aprendizaje autónomo von
Aprendizaje autónomoAprendizaje autónomo
Aprendizaje autónomolickatty05
492 views8 Folien
Teresa de jesus carrillo quintero evidencia de acuerdo von
Teresa de jesus carrillo quintero evidencia de acuerdoTeresa de jesus carrillo quintero evidencia de acuerdo
Teresa de jesus carrillo quintero evidencia de acuerdoTeresacq
262 views5 Folien

Más contenido relacionado

Destacado

Navidad von
NavidadNavidad
NavidadAndrea Salinas
356 views6 Folien
Windows, software comercial & mac os von
Windows, software comercial & mac osWindows, software comercial & mac os
Windows, software comercial & mac osBrenn Cabreera
576 views5 Folien
Diapositiva 1 von
Diapositiva 1Diapositiva 1
Diapositiva 1lcptinoco
242 views3 Folien
PI-026_Arbeitsmarktreport.pdf von
PI-026_Arbeitsmarktreport.pdfPI-026_Arbeitsmarktreport.pdf
PI-026_Arbeitsmarktreport.pdfunn | UNITED NEWS NETWORK GmbH
358 views15 Folien
.NET Gadgeteer von
.NET Gadgeteer.NET Gadgeteer
.NET GadgeteerHolger Wendel
964 views16 Folien
8. evolución y distribución geográfica de la población española. los efectivo... von
8. evolución y distribución geográfica de la población española. los efectivo...8. evolución y distribución geográfica de la población española. los efectivo...
8. evolución y distribución geográfica de la población española. los efectivo...Miguel Romero Jurado
825 views4 Folien

Destacado(17)

Windows, software comercial & mac os von Brenn Cabreera
Windows, software comercial & mac osWindows, software comercial & mac os
Windows, software comercial & mac os
Brenn Cabreera576 views
Diapositiva 1 von lcptinoco
Diapositiva 1Diapositiva 1
Diapositiva 1
lcptinoco242 views
8. evolución y distribución geográfica de la población española. los efectivo... von Miguel Romero Jurado
8. evolución y distribución geográfica de la población española. los efectivo...8. evolución y distribución geográfica de la población española. los efectivo...
8. evolución y distribución geográfica de la población española. los efectivo...
Evaluación luz aida córdoba (3) von luzaidaprofe
Evaluación luz aida córdoba (3)Evaluación luz aida córdoba (3)
Evaluación luz aida córdoba (3)
luzaidaprofe318 views
Como lograr una conciencia ambientalDiseño tpack maria del carmen1 von mariadelcarmenlora2015
Como lograr una conciencia ambientalDiseño tpack maria del carmen1Como lograr una conciencia ambientalDiseño tpack maria del carmen1
Como lograr una conciencia ambientalDiseño tpack maria del carmen1
Liderazgo ético y valores von andres celi
Liderazgo ético y valoresLiderazgo ético y valores
Liderazgo ético y valores
andres celi582 views
Tema 3 las grandes unidades del relieve. las meseta y sus unidades interiores... von Miguel Romero Jurado
Tema 3 las grandes unidades del relieve. las meseta y sus unidades interiores...Tema 3 las grandes unidades del relieve. las meseta y sus unidades interiores...
Tema 3 las grandes unidades del relieve. las meseta y sus unidades interiores...

Más de Klaus Breyer

Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PR von
Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PRPrototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PR
Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PRKlaus Breyer
7.5K views50 Folien
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de... von
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...Klaus Breyer
1.4K views52 Folien
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann. von
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.Klaus Breyer
10.4K views33 Folien
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen. von
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.Klaus Breyer
1.4K views62 Folien
Mobile Messenger - New Ways And Chances For Companies von
Mobile Messenger - New Ways And Chances For CompaniesMobile Messenger - New Ways And Chances For Companies
Mobile Messenger - New Ways And Chances For CompaniesKlaus Breyer
2K views35 Folien
Wie effektiv sind mobile Social Media Kampagnen? von
Wie effektiv sind mobile Social Media Kampagnen?Wie effektiv sind mobile Social Media Kampagnen?
Wie effektiv sind mobile Social Media Kampagnen?Klaus Breyer
2.1K views62 Folien

Más de Klaus Breyer(6)

Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PR von Klaus Breyer
Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PRPrototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PR
Prototyping digitaler Geschäftsmodelle - Übertragen auf Marketing / PR
Klaus Breyer7.5K views
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de... von Klaus Breyer
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...
Webinale 2015 - „Was bringt mir das eigentlich-“ – Ansätze zur Bestimmung de...
Klaus Breyer1.4K views
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann. von Klaus Breyer
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.
What’s Up, WhatsApp? Wie man die strategische Nuss WhatsApp knacken kann.
Klaus Breyer10.4K views
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen. von Klaus Breyer
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.
2014 10-28 #webtechcon - #iphp - das ende der homepage, wie wir sie kennen.
Klaus Breyer1.4K views
Mobile Messenger - New Ways And Chances For Companies von Klaus Breyer
Mobile Messenger - New Ways And Chances For CompaniesMobile Messenger - New Ways And Chances For Companies
Mobile Messenger - New Ways And Chances For Companies
Klaus Breyer2K views
Wie effektiv sind mobile Social Media Kampagnen? von Klaus Breyer
Wie effektiv sind mobile Social Media Kampagnen?Wie effektiv sind mobile Social Media Kampagnen?
Wie effektiv sind mobile Social Media Kampagnen?
Klaus Breyer2.1K views

Fixing facebook api

  • 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