IFrames in Facebook Fanpage Tabs

4. März 2010

Kommentiert: 9 | Gelesen: 167

Kategorien : Facebook, FBML / FBJS, Javascript

Thumbnail / Artikelbild für die Kategorie Facebook Apps

Facebook ist was den Einsatz von iframes auf Tabs von Fanpages angeht recht strikt – darf man einfach nicht!

[Anmerkung: Seite Ende März soll, das nicht mehr funktionieren, habe ich selber noch nicht getestet, bei der bestehenden App funktioniert es noch]

Da es aber für verschiedene Anwendungsfälle ganz praktisch wäre, wurde natürlich fleißig nach einer Möglichkeit gesucht iframes auf Fanpages einzubinden.

Und es gibt auch eine Lösung, nun genauer gesagt einen Workaround für dieses Problem:

Genau wie man onload events in JS / FBJS in onclick events beim Profil View umwandeln muss, verhält es sich auch beim Einsatz von iframes. Wenn die von Anfang an da sind, dann maulen die Sicherheitsrichtlinien von Facebook rum aber wenn da FBML durch eine Useraktion gesetzt wird – dann klappt es.

Wie geht das? In dem man ein onclick Event definiert und ein wenig FBML das wie folgt aussieht:

<fb:js-string var=”link_1″><fb:iframe width=”680″ height=”400″ frameborder=’0′ src=’http://geekvault.no5.at/blogloc/gmap_track.jsp?user=hkempfert’/></fb:js-string>

Unser Onclick Event führt folgendes aus:

outside_location.setInnerFBML(link_1);


Dadurch wird die von uns definierte fbjs variable link_1 mit den Angaben des iframes in das Ziel-DIV "outside_location" geschrieben und so der iFrame eingebunden.
Das ganze Code Beispiel findet ihr hier im Blog von Jesper und für SocialWayDown.org auf Facebook habe ich das dann gleich mal umgesetzt um Google Maps / BlogLoc per iframe einzubinden.

Als nächster Schritt ist dann geplant, die Stolpersteine Hamburg Karte auch als App in Facebook zu bringen.

Tagged | |

9 Kommentare zu: “IFrames in Facebook Fanpage Tabs”

  1. Leon sagt:
    18. Mai 2010 um 17:38

    Schade, irgendwie bekomme ich das Script nicht zum laufen :-(

  2. Sven sagt:
    13. Juli 2010 um 10:44

    mmmh. woran hakt es bei dir denn? ist eigentlich so bei 2 anderen seiten im einsatz.

    mal firebug oder konsole im chrome gecheckt?

  3. Frank Bärmann sagt:
    22. Juli 2010 um 21:34

    Kannste bitte noch nal erklären, wie bzw. wo man den onclick Event definiert? Alles in dem FBML Feld oder wo?

  4. Sven sagt:
    23. Juli 2010 um 11:23

    Hey Frank,

    bei mir handelt es sich um eine Facebook App, die auf einem Tab installiert worden ist, ob das auch mit einem FBML Feld geht (wenn ich das richtig verstehe machst du das so)
    weiß ich nicht.

    Aber ich schreibe noch mal nen “vernünftigen” Artikel um das zu erklären was ich da gemacht habe.

    Cheers
    Sven

  5. Ed sagt:
    6. August 2010 um 09:56

    hallo sven, das ist ein schöner tipp. leider funktioniert es bei mir nicht. ich muss dazu sagen, dass ich einsteiger bin. könntest du es daher bitte schrittweise erklären, wie du ein iframe eingebunden hast? das wäre echt super!!

    danke..Ed

  6. Sven sagt:
    6. August 2010 um 10:10

    Hi Ed,

    ich werde mich da mal ran setzten, hoffe es am WE zu schaffen.

    War ja schon anderen versprochen :)

    Gruß
    Sven

  7. Ed sagt:
    6. August 2010 um 11:19

    hi sven,

    super. vielen dank dir! ich bin gespannt. dann wärst du der einzige im www auffindbare, der für diese thematik eine nachvollziehbare lösung hätte.

    grüße..Ed

  8. Ed sagt:
    10. August 2010 um 09:47

    hi sven,

    gibt es schon evtl. einen neuen beitrag zum workaround, den ich noch nicht entdeckt habe?

    liebe grüße,
    Ed

  9. Sven sagt:
    18. August 2010 um 12:06

    Moin Ed,
    Ende der Woche setze ich mich ran, versprochen. Will das dann gleich “ordentlich” machen ;)

    Gruß
    Sven

Hinterlasse einen Kommentar



Kontakt


XING
facebook
twitter
flickr



Kategorien



Tag Cloud



Links