SlideShare ist ein Scribd-Unternehmen logo
1 von 56
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

SEO Basics - Vortrag Mediale Hamburg 2011
SEO Basics - Vortrag Mediale Hamburg 2011SEO Basics - Vortrag Mediale Hamburg 2011
SEO Basics - Vortrag Mediale Hamburg 2011
Björn Instinsky
 
Workshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
Workshop - Kreatives Problemlösen und Wissensgenerierung - AnleitungWorkshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
Workshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
Heidrun Allert
 
Sprungbrett Event Aarau 2010
Sprungbrett Event Aarau 2010Sprungbrett Event Aarau 2010
Sprungbrett Event Aarau 2010
Malte Polzin
 
West Terrace-Kindergarten
West Terrace-KindergartenWest Terrace-Kindergarten
West Terrace-Kindergarten
Elise Andrews
 

Andere mochten auch (20)

Riechers farm
Riechers farmRiechers farm
Riechers farm
 
Cube TV 2010
Cube TV 2010Cube TV 2010
Cube TV 2010
 
SLAC 2008 Mit SUSE Linux glücklich werden
SLAC 2008 Mit SUSE Linux glücklich werdenSLAC 2008 Mit SUSE Linux glücklich werden
SLAC 2008 Mit SUSE Linux glücklich werden
 
SEO Basics - Vortrag Mediale Hamburg 2011
SEO Basics - Vortrag Mediale Hamburg 2011SEO Basics - Vortrag Mediale Hamburg 2011
SEO Basics - Vortrag Mediale Hamburg 2011
 
Social Commerce -Nur was für Freaks?
Social Commerce -Nur was für Freaks?Social Commerce -Nur was für Freaks?
Social Commerce -Nur was für Freaks?
 
Vaixells
VaixellsVaixells
Vaixells
 
Grüne Welle Kommunikation: Bürgerbeteiligung und Dialog
Grüne Welle Kommunikation: Bürgerbeteiligung und DialogGrüne Welle Kommunikation: Bürgerbeteiligung und Dialog
Grüne Welle Kommunikation: Bürgerbeteiligung und Dialog
 
Workshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
Workshop - Kreatives Problemlösen und Wissensgenerierung - AnleitungWorkshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
Workshop - Kreatives Problemlösen und Wissensgenerierung - Anleitung
 
Social Media im E-Commerce - Nur wer den echten Dialog will, hat Erfolg!
Social Media im E-Commerce - Nur wer den echten Dialog will, hat Erfolg!Social Media im E-Commerce - Nur wer den echten Dialog will, hat Erfolg!
Social Media im E-Commerce - Nur wer den echten Dialog will, hat Erfolg!
 
Einzelaussagen - Kinderbefragung zum 20. Jahrestag der UN-Kinderrechtskonvention
Einzelaussagen - Kinderbefragung zum 20. Jahrestag der UN-KinderrechtskonventionEinzelaussagen - Kinderbefragung zum 20. Jahrestag der UN-Kinderrechtskonvention
Einzelaussagen - Kinderbefragung zum 20. Jahrestag der UN-Kinderrechtskonvention
 
Splitterherz
SplitterherzSplitterherz
Splitterherz
 
GAF 2009 1
GAF 2009 1GAF 2009 1
GAF 2009 1
 
Datenmanagement
DatenmanagementDatenmanagement
Datenmanagement
 
Sprungbrett Event Aarau 2010
Sprungbrett Event Aarau 2010Sprungbrett Event Aarau 2010
Sprungbrett Event Aarau 2010
 
SLAC 2009 - Business Continuity mal ganz pragmatisch - Das Business Continuit...
SLAC 2009 - Business Continuity mal ganz pragmatisch - Das Business Continuit...SLAC 2009 - Business Continuity mal ganz pragmatisch - Das Business Continuit...
SLAC 2009 - Business Continuity mal ganz pragmatisch - Das Business Continuit...
 
West Terrace-Kindergarten
West Terrace-KindergartenWest Terrace-Kindergarten
West Terrace-Kindergarten
 
LinuxTag 2007 - Linux im Bundesministerium des Inneren bei der Fußball WM 2006
LinuxTag 2007 - Linux im Bundesministerium des Inneren bei der Fußball WM 2006LinuxTag 2007 - Linux im Bundesministerium des Inneren bei der Fußball WM 2006
LinuxTag 2007 - Linux im Bundesministerium des Inneren bei der Fußball WM 2006
 
Dream gardens
Dream gardensDream gardens
Dream gardens
 
SLAC 2007 Secure Disaster Recovery
SLAC 2007 Secure Disaster RecoverySLAC 2007 Secure Disaster Recovery
SLAC 2007 Secure Disaster Recovery
 
Film Strip
Film StripFilm Strip
Film Strip
 

Mehr von AllFacebook.de

Mehr von AllFacebook.de (20)

„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
„New Work“ im Tagesschau Social-Media Team. Learnings aus 6 Monaten Arbeiten ...
 
Grow Up. Finally.
Grow Up. Finally.Grow Up. Finally.
Grow Up. Finally.
 
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
So nutzt du die ganze Power des Algorithmus: Katalog-Setup für Fortgeschritte...
 
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
12 Hacks für deine Instagram Ads - mit diesen Tipps steigerst du deine Perfor...
 
Instagram 2020 #AFBMC
Instagram 2020 #AFBMCInstagram 2020 #AFBMC
Instagram 2020 #AFBMC
 
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMCTikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
TikTok for Humanity: Das Rote Kreuz für Generation Z #AFBMC
 
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
Von der Krise in die Krise aus der Krise - Social Media & Krisenkommunikation...
 
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMCTake your tracking to the next level with the power of Google Tag Manager #AFBMC
Take your tracking to the next level with the power of Google Tag Manager #AFBMC
 
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMCWie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
Wie du die Landingpages auf die Facebook Zielgruppen abstimmst #AFBMC
 
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
Wer braucht schon den (client-side) FB Pixel? Warum du auf Facebooks serverse...
 
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMCExperimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
Experimente mit dem Algorithmus - so kriegt man Reichweite auf LinkedIn #AFBMC
 
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMCGeheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
Geheimzutat Social Media: Das Erfolgsrezept von Sternekoch Alexander Kunz #AFBMC
 
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
Love Social - Social love. Eine Liebeserklärung an Social Media, die Diversit...
 
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMCOnlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
Onlinemarketing on the Edge - 100.000 Euro Bußgeld für ein Cookie? #AFBMC
 
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
15+ Möglichkeiten mit Deiner Facebook-Gruppe Geld zu verdienen #AFBMC
 
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
Shop, Shoppen, Instagram Shopping: Was ist State of The Art und was kommt noc...
 
Social Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMCSocial Media, Boomer? Es wird ernst! #AFBMC
Social Media, Boomer? Es wird ernst! #AFBMC
 
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
„Alexa, wo kann ich heute kontaktlos mit Freunden shoppen?“ - Wie Voice das M...
 
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
So synchronisierst du automatisiert Google Analytics Segmente zu Facebook Aud...
 
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
WhatsApp 2020!? Das Messenger Marketing Update - was ihr 2020/21 umsetzen kön...
 

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

  • 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