+ MENY
2011 jul 8
14

Visa olika material för fans och icke fans i en Facebook Iframe

När jag skrev min guide hur du bygger en facebook iframe fick jag en del frågor på hur man visar olika material för fans och icke fans i denna. I det här inlägget visar jag hur du kan göra detta.

Facebook Iframe och Gilla knappen

olika material för gillare och icke gillare

En bild från den kodgrund som du kan ladda ner längst ner i inlägget

När nu facebook verkar ha slopat fbml rutan och istället propagerar för Iframe lösningen så var det nog många som saknade möjligheten att kunna visa olika material för gillare och icke gillare till sin sida. Detta är också som så mycket annat inget som är lätt att hitta hjälp med från facebook developers som verkar slå nya rekord i rörighet vid varje ny uppdatering (eller så är jag vimsig).

Själva idén att visa olika material för olika personer hänger ihop med att kunna köra facebook ppc kampanjer och i dessa kunna skapa en gillare och sedan också förhoppningsvis en kund!. Processen är mycket populär bland amerikanska sajter där man gärna lockar med en gratis produkt/tjänst om man blir gillare och där denna sedan skall locka till ett köp av en produkt/tjänst som kostar pengar. Hur effektivt detta egentligen är i marknadsföringssammanhang lämnar jag öppet i detta blogginlägg, istället koncentrerar vi oss på den tekniska lösningen. Använd gärna kommentarerna här nedan för att diskutera saken.

Nu över till guiden….

Steg 1 – Skapa en facebook Iframe sida

Om du inte har skapat en grund för en facebook iframe sida tidigare så måste du först göra detta. Jag har tidigare skrivit en guide för dig som vill komma igång med detta här. Längre ner i det här inlägget har du även möjligheten att ladda ner färdig kod att jobba ifrån om du vill slippa det inledande arbetet.

Steg 2 – Använd rätt kod

Det tog ett tag innan jag hittade fram till rätt kod som lägger in en php if sats beroende på vilken typ av besökare det är. Jag vill alltså påpeka att jag inte skrivit koden själv, bara modifierat den till mitt egna sammanhang. Förslag på förbättringar tages självklart emot i kommentarerna. I alla fall så är the magic code snutt följande:

<?php$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
if (empty($data["page"]["liked"])) {
echo '<div id="fb-wrapper">Klicka gilla och se något annat</div>'; }
else {    echo '<div id="fb-wrapper">Nu är du ett fan</div>'; }
?>

För dig som blir osäker på koden här ovan så vill jag poängtera återigen att du kan ladda ner färdiga php och css filer som du kan utgå ifrån. Annars så är det egentligen bara att byta ut texterna ”klicka gilla och se något annat” och ”nu är du ett fan” mot ngt som du vill ha, en bild, en video eller vad det nu kan vara.

Steg 3 – Ställ in din facebook sida

Det kan också vara viktigt att poängtera att du bör ha rätt inställningar på din facebook sida. Du bör styra förstagångsbesökaren till din facebook iframe sida, annars kanske du går miste om att ge ett marknadsbudskap till dessa. Detta är dock enkelt att ställa in på sidan. Gå till ”Redigera sida” –> ”hantera behörigheter” –> Välj din välkommen sida som standarmålflik. Sedan kommer alla som ännu inte är fans att komma till denna sida

Resten är egentligen bara upp till dig själv och din egen vilja, kreativitet och vad som du tror fungerar för din marknad.

Ladda ner kod för att visa olika material för fans och icke fans

Jag har även skapat en mall för ändamålet som består av en php fil och tillhörande css och bilder. Om du vill ha något att utgå ifrån och modifiera så kan du ladda ner denna zip fil. Tänk på att du endast kan köra koden något haltande på en lokal server (tex xampp på windows eller mamp på MacOS). Gilla funktionen fungerar endast om den är inbäddad i en facebook Iframe.

Och om du har nytta av den här koden så vore det kul om du twittrade ut den eller delade den på facebook!

 

14 Kommentarer

  1. Jonas Lejon skriver:

    Tack! Kan vara användbart

  2. Simon skriver:

    Mycket användbart för mig .D

  3. Pernilla skriver:

    Kanonbra!
    Skulle man kunna få hjälp med hur man länkar till ny sida när man är fan (istället för att lägga till en mening som det är i exemplet).
    Har testat lite olika script men jag kan för lite för att få det att funka.
    Tack!!

  4. websimon skriver:

    Hej Pernilla,

    Där det bara står text nu kan du använda vilken html kod du vill istället. Om du vill ha en länk i din facebook Iframe istället så använder du bara vanlig html för en länk precis som du skulle göra när du kodar en egen hemsida. Du kan även lägga in bilder eller egentligen vilken html kod som helst.

    Hoppas att detta hjälper dig på vägen, annars får du gärna fråga igen.

  5. Kya skriver:

    Tack för tipset. Nu vet vi hur vi skall bygga upp egna FB-sidor smart.

    Tackar, igen.

  6. Andreas skriver:

    Vi får inte använda PHP på vår server… är det någon som har lösningen hur man gör detta med ett javascript istället? Vore väldigt tacksam för hjälp!

  7. Jonas skriver:

    Hej Simon.
    Laddade ner ditt exempel och har gjort om den så det passar till ändamålet.
    Vill dock ha en länk i texten som kommer upp efter man gillat sidan. Försökt med en vanlig html kod men funkar inte.
    Hur ska man göra?

    Tack för grymma tips!

    Ha en fin dag.

  8. websimon skriver:

    Hej, Det är antagligen att du glömmer att du behöver använda php för att peta ut länken? Dvs echo ’din länk i html’;

    • Jonas skriver:

      Okej, fick de å funka efter lite krångel. Måste ju säga jag inte är en fena på webkodning tyvärr.
      En snabb fråga till,
      Så som jag sett på många FB sidor så ligger/visas innehållet bakom en toning/spärr och efter ”Gillandet” så blir sidan aktiv.
      Har du någon kod på detta?

      Grym sida btw och tack för alla tips!

      • websimon skriver:

        Jag tror bara att det du menar vara en ”spärr” egentligen bara är en bild. När man väl gillat sidan så finns en fb:connection och du kan visa en php/html/javascriptsida som du vill.

  9. Lennart skriver:

    Tack för ett bra script!

    Jag har byggt ett litet formulär på iframe sidan.

    När man postar det formuläret så hinner scriptet inte läsa in om man gillat sidan eller ej.
    Då visas sidan för dom som inte gillat sidan även fast man just tryckt på gilla.

    Om man sedan laddar om sidan så visas rätt sida igen, sidan för dom som tryckt ”gilla”.

    Hoppas ni förstod vad jag menar.

    • websimon skriver:

      Hej Lennart, jag tror att jag förstår vad du menar. Det är väldigt svårt att svara på vad du har för problem där, skickar du formuläret med post eller get? skickas det med javascript php eller något annat? Eftersom du har en Iframe kan det ibland vara svårt att länka runt i Iframen mellan olika sidor. Själv har jag löst ngt liknande med ett javascript men tror att det kan vara lite annorlunda med det du gör…

Comment