Tagget med: Iframe

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;
}

Fra idé til liv = 45 min!

Gik en tur, fik en idé, stressede over ikke at kunne få den ud inden lørdagsøl og vupti – 45 minutter efter havde jeg en løsning parat. Når idéen er god er 45 minutter åbenbart rigeligt, og denne idé er både god og med perspektiver. Eller også motiveres jeg bare kraftigt af tanken om øl! Er halvt på vej ud af døren, så bær over med stavefejl, sjusk og vrøvl…

Som så mange gange før, er der tale om mit site http://blågårdsgade.dk – det gælder om at have altid at have en legeplads i nærheden, hvis man godt kan lide at lege! Helt konkret har jeg denne gang leget med siden Gadens Stemme inde på blågårdsgade.dk – en side der egentlig bare er ét stort Facebook kommentarfelt hvor man kan skrive om hid og did. Desværre bliver siden ikke benyttet som jeg havde håbet på. Der er til gengæld godt gang i Blågårdsgade’s Facebook-side, som snart er oppe på 2000 “synes godt om”. Tænkte derfor, at det ville give mening hvis man kunne hive Gadens Stemme ind på Facebook-siden. Så det har jeg gjort…

Gadens Stemme på blågårdsgade.dk: http://blågårdsgade.dk/gadens-stemme/

Gadens Stemme på Facebook-siden: http://www.facebook.com/Blaagaardsgade?sk=app_114580175282893

Den faste læser ved, at jeg påbegyndte lidt leg med Iframe app’s i denne uge. De tidligere app’s har dog alle været bygget envejs – denne app er lidt anderledes! Lige meget om man skriver på Facebook-siden eller direkte på blågårdsgade.dk, bliver kommentaren nemlig delt begge steder. Og URL’en der efterfølgende deles på ens Facebook-væg går strategisk nok til http://blågårdsgade.dk/gadens-stemme/. Samlet skulle det gerne booste antallet af kommentarer på Gaden Stemme.

Jeg burde nok skrive en guide, men den der bærer viljen skal nok bare høre idéen og/eller se lidt kode. Derfor…

KODE:
<div id=”fb-root”></div><script src=”http://connect.facebook.net/da_DK/all.js#appId=138924429453036&amp;xfbml=1″></script><fb:comments xid=”9SOy7F4z89qlYx9_post703″  numposts=”4″ width=”520″ publish_feed=”true” simple=”true” css=”http://xn--blgrdsgade-25ab.dk/wp-content/plugins/facebook-comments-for-wordpress/css/facebook-comments-hidelike.css?2″ url=”http://xn--blgrdsgade-25ab.dk/gadens-stemme/”></fb:comments>

Kommentar til koden: Jeg har måtte opsætte lidt hurtig/særskilt CSS til kommentarfeltet som du kan se – ellers fik jeg vist “likes”. Det fungerede ikke, da likes gik til url’en = http://blågårdsgade.dk/fbtab/gadens-stemme-2 (læs denne guide for at forstå hvorfor). Facebook cacher din CSS, hvilket er grunden til ?2 - og sidste detalje, for at kunne sammenflette kommentarsporet skal du kopiere xid og app-id fra det kommentarsport du vil benytte til formålet. Så er du kørende.

Har du spørgsmål er du selvfølgelig velkommen til at skrive en kommentar nedenfor, eller fange mig på askhybel.dk/facebook. Lige meget om det er af teknisk eller strategisk art – er jo egentlig webstrategisk rådgiver, har bare et lettere nørdet sind ;)

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.

Geo Gearløs

I dag kom Locationlab med en mindre rapport om danskernes geo-parathed. Spændende læsning, der fik det indre legebarn frem i mig. For hvad bliver det næste på inden for geolokation? Bliver fremtiden flere hjemmesider ala Foursquare, Gowalla og Facebook Places eller skal vi have fat i noget helt andet? Jeg er spændt, og har endnu til gode at se den helt nytænkende model.

Indtil da kan man jo altid bruge tiden på at lege videre med eksisterende løsninger. I dag blev det Foursquare og Google Latitude. Jeg er ikke koder, så intet revolutionerende her – blot en lille deler.

Foursquare til Google Map

  • Besøg din foursquare feedside. Højreklik på RSS-linket og kopier linket.
  • Gå ind på Google Maps and indsæt linket i søgefeltet og tryk enter.
  • Embed og vupti
  • Google Latitude til Google Map

  • Gå til http://www.google.dk/latitude/apps/badge og opret et ofentligt placeringsemblem
  • Embed og vupti
  • Både Google Latitude og Foursquare findes som app til iPhone og Android. Næste legetime har i øvrigt fokus på samlinger af rss-feeds i kortvisninger. Benytter her Xfruits, som absolut kan anbefales.