Skip to content →

Teknikken bag en Facebook konkurrence

I sidste uge lancere min arbejdsplads en konkurrence hvor man kan vinde en skiferie. For at sprede ordet valgte vi bl.a. at dele konkurrencen på Facebook. I forbindelse med Facebookdelen rendte jeg ind i et par problemer som jeg havde svært ved at finde dokumenteret online. Konkurrencen blev oprettet som en facebook page app.

Facebooksiden

Facebooksiden i sig selv var ikke et stort problem. Jeg lavede en app på Facebook Developers siden. Dette giver en række muligheder, bl.a. muligheden for at vælge hvordan din app skal integreres med Facebook.

For at kunne bruge applikationen som et element på en Facebook page, vælges “page tab”. Teknisk fungerer det ved at du selv hoster din app, som en almindelig html side, der så indlejres på din Facebook Page, i en iframe. En page tab har 4 indstillinger:

  • Page Tab Name – Den navn din app skal have i page menuen
  • Page Tab URL – Den side Facebook skal integrere i sin iframe
  • Secure Page Tab URL – En HTTPS-version af den side der skal vises på Facebook
  • Page Tab Edit URL – Link til din app’s admin modul. Jeg skippede dette, da mit projekt ikke havde behov for customization

I følge Facebook selv har mere end 9.6mio brugere valgt kun at kunne tilgå Facebook via https. Hvis du ikke har tilføjet en HTTPS-version af din app vil alle de mennesker hverken kunne se eller bruge din app.

Et af de problemer jeg kæmpede mest med, var at gøre det muligt for folk at dele appen med deres venner. Ikke fordi det var svært rent kodemæssigt, men jeg fandt ud af at det kræver at appen udover at være oprettet som ‘page tab’ som forklaret ovenfor, også kræver at den er lavet som en normal ‘app on facebook’ (se billede ovenfor). Når du vælger ‘app on facebook’ får du 2 indstillingsmuligheder. Canvas URL, og Secure Canvas URL. Et Facebook app canvas fungerer på samme måde som en Facebook page tab, bortset fra at det er en selvstændig app, og ikke tilknyttet en page. Da jeg ikke havde brug for en selvstændig app valgte jeg at lave mine canvas URLs pege på en tom side, der kun bestod af et JavaScript redirect, til min page tab.

Selve appen

Da opsætningen var på plads var der bare tilbage at lave selve appen. Det sker som nævnt tidligere vha. html, css og javascript, og der er altså ikke meget magi her. For at få adgang til Facebooks funktionalitet, skal Facebook SDK’et loades.

Linjen:

kan bruges til at styre hvilket sprog Facebooks ting skal vises på. Tilgængelige sprog kan findes i Facebook’s Locale XML.

Nu er der adgang til Facebooks funktionalitet via. Javascript. I dette projekt blev det brug til 2 ting. Først skal der være mulighed for at folk kan dele appen med deres venner:

Den sidste del:

Sørger selvfølgelig for at funktionen poststory() kaldes så snart folk har valgt hvem af deres venner de gerne vil dele appen med. Det er også muligt at trykke cancel og på den måde ikke dele med nogen, poststory() vil dog stadig blive kaldt.
Formålet med poststory() er at lade folk poste et link til appen på deres egen væg:

Efter poststory() kaldes funktionen redirectuser(), som vha. et normalt Javascript redirect videresender brugeren til vores egen konkurrenceside.

Jeg håber indlægget kan hjælpe med at komme udenom nogen af de små fælder jeg selv rendte ind i 🙂
Husk i forbindelse med konkurrencer at overholde Facebook’s egne regler for konkurrencer. Ellers kan det blive en kort fornøjelse. Kasper Blom har skrevet en god kort opsummering af konkurrencereglerne.

Published in Software

15 Comments

  1. Perfekt! Tak for for/opklaringen 🙂
    /Anders

    • Hej Anders

      Tak for kommentaren. Jeg håber du kunne bruge mit indlæg til noget godt 🙂

      Jesper Jarlskov

  2. Anders Anders

    Hej Jesper, fedt indlæg.
    Jeg har prøvet at gøre som beskrevet i dit indlæg, men kan ikke finde ud af hvad man skal gøre for at gennemføre app’en?

    Skal man uploade dine koder i en ekstern fil på egen server, og lade facebook kalde den?

    Ligeledes spørger den om: “Secure Page Tab URL” og jeg kan vælge herokuapp.com som er gratis.

    /Anders Lund

    • Hej Anders

      Jeg er glad for at mit indlæg kunne hjælpe dig! 🙂
      Du uploader appen til din webserver, og indsætter en link til dem i “Page Tab URL”, og til en https version i “Secure Page Tab URL” i din app settings.

      Jesper Jarlskov

  3. Anders Anders

    Hej Jesper,

    Super mange tak for dit hurtige svar.

    Kunne du fortælle hvordan jeg uploader din kode? Så vidt jeg kan læse mig til skal det være en SSL krypteret server, og ikke bare hvilken som helst tilfældig server.
    Findes der nogen gratis ssl server og hvordan uploader jeg så din kode/app’en på tilhørende server.

    /Anders Lund

    • Hej Anders

      Du uploader bare din app til din webserver med FTP eller hvad du normalt vil bruge til at lægge websider op med.
      Facebook har givet folk mulighed for at vælge at få alting serveret via HTTPS, det betyder at du skal have en webserver med SSL-certifikat hvor du kan servere din app fra, for at folk der har valgt HTTPS-versionen af Facebook også kan se den, ellers vil Facebook, så vidt jeg har forstået, ikke give adgang til din app for folk der har valgt ren HTTPS. Jeg kender ikke til nogen gratis webhosts der tilbyder SSL da der skal certifikatet selv ikke er gratis.

      Jesper Jarlskov

  4. Anders Anders

    Hej Jesper, tak for afklaringen.

    Jeg har nu fået siden til at vise sig i den korrekte “tab” men app’s funktion med at dele med vennerne og poste sig automatisk på væggen virker ikke, selvom jeg har indtastet min app id.

    Har jeg overset noget? 🙂

    • Hej Anders

      Har du læst sidste paragraf inden kodeafsnittet begynder? Jeg havde også problemer med at få de to ting til at virke, så indlægget indeholder en note til hvad jeg selv manglede at sætte op.

      Jesper Jarlskov

  5. Hej Jesper,

    Det er godt nok et gammelt indlæg, men jeg prøver alligevel. Vi skal til at lave nogle konkurrencer på Facebook med BredbaandsLuppen.dk, og vi har besluttet os for at gøre det via en app. Så langt, så godt.

    Der hvor den bliver sværere, er når vi også gerne vil hoste det på vores egen side. Er det på nogen måde muligt at hoste en Facebook konkurrence, der kræver et like, både på Facebook og via ens egen hjemmeside?

    Mvh. Andreas

  6. Hej Andreas

    Undskyld den lange svartid, jeg har af uvisse årsager ikke fået en mail om dit indlæg.

    Jeg har ikke selv eksperimenteret med det, men jeg kan ikke se at der skulle være noget i vejen for også at vise samme konkurrence på dit eget site. I den første bid kode importeres Facebooks funktionalitet, på samme måde som du vil gøre det normalt hvis du vil have en facebook like knap på dit site, så det ser jeg umiddelbart ikke noget problem i

    Jesper Jarlskov

  7. Der er en åbenbart en god grund til jeg køber Facebook konkurrencer ;-D

  8. joanna joanna

    jeg vil også prøve at kaste mig ud i det, ville bare høre om du ved om det er muligt at lave et “synes godt om” skin, så man først deltager hvis man har givet tumbs up?

  9. Hej Joanna

    Jeg mener at det tidligere har været muligt gemme ‘tabs’ på din Facebook page fra folk der ikke har liket, hvis det stadig er muligt er det jo en måde at gøre det på.
    Det er dog længe siden jeg har leget page-administrator så jeg er ikke helt sikker på mulighederne i øjeblikket.

    Jesper Jarlskov

  10. Jacob Jacob

    Hvis man slet ikke har forstand på sådan noget, vil man så stadig kunne lave sig egen app med noget alla “se hvilken hunderace du er ” hvor brugeren svarer på et par spørgsmål og så får et resultat afvide?

    • Hej Jacob

      Uden reel programmeringserfaring var det ikke noget jeg ville kaste mig ud i. Så er din tid nok brugt bedre ved at betale dig fra det.

Leave a Reply

Your email address will not be published. Required fields are marked *