Tagget med: App

Positioneret iframe

For nyligt stiftede jeg bekendtskab med et CMS-system, hvor det var muligt at klippe en iframe-ramme ud fra eksterne websites og indsætte i ens eget indhold. Det blev jeg nødt til at finde ud af hvordan var gjort, og det viste sig heldigvis at være ret simpelt at opsætte manuelt. Man skal blot lave et par nye div’er til ens css, som skal styre den indre og ydre del af iframen. Og herefter er der kun tilbage at opsætte selve iframen på ens side. Totalt oldschool, men det giver blandt andet god mening når man leger med Iframe App’s til Facebook.

Jeg har oprettet et eksempel på http://blågårdsagde.dk/tilsalg hvor jeg iframer indhold fra Boliga’s kortløsning, således at jeg kan vise de lejligheder der er til salg i lokalområdet uden selv at skulle lege direkte med data – jeg har selvfølgelig også lavet en iframe app på Blågårdsgade’s side på Facebook, nu jeg var i gang. Og ja, du kan iframe hvad som helst! Nedenfor kan du se hvordan jeg har kodet det pågældende eksempel.

Iframe kode

<div id=’ydrediv’>
<iframe src=”http://www.boliga.dk/kort.aspx?guid=53753711-69a6-408b-a246-55cff5fe10c3″ id=’indreiframe’ scrolling=no></iframe>
</div>

CSS

#ydrediv
{
width:500px;
height:720px;
overflow:hidden;
position:relative;
}

#indreiframe
{
position:absolute;
top:-380px;
left:-620px;
width:1280px;
height:1450px;
}

Tilføj iFrame tabs til din Facebook side (via apps)

For et par uger siden blev Iframe tabs introduceret til Facebook sider. Længe har det været sådan, at indhold i tabs har skulle opbygges via FBML-koder, hvilket jeg også tidligere har skrevet om. Men for få uger siden åbnede Facebook altså op for brugen af Iframes i tabs. Det betyder helt konkret, at du nu kan få stort set ALT placeret på din Facebook side. Umiddelbart er eneste begrænsning størrelsen på selve Facebook siden.

Opsætning af iFrame tabs kan udføres på flere forskellige måder, men jeg har valgt kort at gennemgå hvordan du gør, hvis du benytter en WordPress-løsning til opsætning af dit iFame’ede indhold. Men indholdet kunne i princippet opsættes på mange andre måder.

* Inden du følger nedenstående guide, er det vigtigt at du har opdateret din Facebook-side. Og nå ja, hvis du ikke allerede har en Facebook side skal du oprette en her.

——————

Opsætning af indhold
Her har jeg  valgt at benytte en WordPress-installation til opsætning af indholdet, da jeg har fundet (tak til @shevy) et lækkert plugin der specifikt er lavet til formålet. Fordelen er, at man på den måde kan styre både hjemmeside og ens Facebook side direkte fra én installation. Det bliver ikke nemmere. Desuden giver plugin’et nem mulighed for at opsætte lidt særskilt CSS – SMART! Du kan hente pluginet her. Husk at det indhold du opsætter skal kunne være inden for rammerne af hvad Facebook stiller til rådighed – hvis du ikke vil have scroll, betyder det omkring 510×650 pixel. Du kan dog også tvinge appen til at kunne håndtere højere elementer via et mindre script. Læs hvordan her.

Når pluginet er hentet og installeret er det blot at finde “facebook tabs” i din menu, tilføje en tab og begynde at opsætte indhold. Opsætning af indhold er som man kender det, ved hjælp af WordPress’s teksteditor. Det er altså nemt!

Eksempel på direkte link til indhold: http://blågårdsgade.dk/fbtab/butikker-i-gaden-2/

Lav en App
Nu er det til til at lave din app. Du udfylder alt relevant data, hvilket heldigvis er ligetil. Under fanen facebook integration”, skal man dog holde tungen lige i munden. Her skal man bruge et direkte link til det indhold man har opsat, og HUSKE at læse hvad der står med småt ude i højre side. Hvis du kan læse indenad er du hurtigt videre, og du har lavet din første app. De fleste fejl sker dog netop her, fordi man glemmer at læse hvilke link man skal opsætte (ja, jeg taler af erfaring).

Eksempel på app: http://apps.facebook.com/blaagaardsgade/

Tilknyt app til din side
Gå tilbage til oversigten over din app’s og vælg “application profile page”. Herinde skal du i venstre side finde linket “føj til min side”, vælge din side og vupti…din app er nu tilføjet din valgte side. Tilbage på din side skulle du nu gerne kunne se den nye tab, men dit opsatte indhold.

Eksempel på tab: http://www.facebook.com/Blaagaardsgade?sk=app_140096979337795

——————

Og ja, jeg kunne nok have skrevet en mere pædagogisk guide med billeder, pile og flere eksempler. Men nej, læs indenad og leg selv lidt med det. Og har du alligevel spørgsmål, så fang mig i kommentarfeltet nedenfor eller på http://askhybel.dk/facebook.