Peruns Weblog - Webwork und Internet

Ich habe schon vor einiger Zeit über Frappr berichtet. Es handelt sich hierbei um einen Web 2.0-Dienst (die Hasser es Web 2.0-Wortes mögen mir verzeihen). Man kann eine Gruppe erstellen und dann können sich Leute die sich dieser Gruppe zugehörig fühlt eintragen. Dabei greift Frappr auf den Kartenbestand von Google Earth und somit können alle auch ihre exakte geographische Position angeben.

So weit, so gut. Nun wurde ich letztens von einem Kunden gebeten herauszufinden, wie schwer es ist eine Frappr-Karte in eigenes Weblog einzubinden. Das habe ich jetzt getan und bin um einiges schlauer als vorher. Und da dachte ich ich schreibe es hier nieder … evtl. interessiert es den einen oder anderen.

Wenn man wenig Wert auf sauberen (X)HTML-Code legt, dann ist es sehr einfach eine Karte von Frappr.com einzubinden, man muss nur folgenden exemplarischen Code auf einer Unterseite oder in einem Beitrag einbinden:

<div><embed quality="high" type="application/x-shockwave-flash" wmode="transparent" src="http://www.frappr.com/ajax/yvmap.swf" flashvars="host=http://www.frappr.com/[flashvars-Wert]" salign="l" align="middle" scale="noscale" width="500" height="300" ></embed><div><a href="http://visitor.frappr.com/?sig=visitor_map[...]" target=_blank><img src="http://frappr.com/i/gyo.gif" border=0/></a><a href="http://www.frappr.com/[Link zur Karte]" target=_blank><img src="http://frappr.com/i/s.gif" border=0/></a><a href="http://www.frappr.com/[...]" target=_blank><img src="http://frappr.com/dyn_map/350758/origin:other/p.gif" border=0/></a><a href="http://www.frappr.com/?a=feedback[...]" target=_blank><img src="http://frappr.com/i/h.gif" border=0/></a></div></div>

Den oberen Code generiert Frappr.com autmatisch wenn man eine bestimmte Karte auf seiner Website einbinden will. Das Problem an dem Code ist dann natürlich dass es von Seiten des Validators viele Fehlermeldungen hagelt, da Attribute und Elemente eingesetzt werden die nicht zum (X)HTML-Standard gehören. Im Grunde genommen kann man den oberen Code massiv kürzen

<div><object data="http://www.frappr.com/ajax/yvmap.swf" type="application/x-shockwave-flash" width="500" height="300">
<param name="movie" value="http://www.frappr.com/ajax/yvmap.swf" />
<param name="flashvars" value="http://www.frappr.com/[flashvars-Wert]" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="none" />
</object>
<p><a href="http://www.frappr.com/[Link zur Karte]">Link</a></p></div>

Und das Ergebnis schaut folgendermaßen aus. natürlich liegt es an dir wie und welchen Code du einbindest und was du kürzen willst.

Die obere Lösung habe ich auf IE 6, IE 7, SeaMonkey 1.1 und Firefox 2.0.0.2 getestet und so weit funktioniert es einbahnfrei. Einziges Manko: die Flash-Datei wird erst abgespielt nach dem sie vollständig heruntergeladen wurde. Es gibt als kein Streaming.

Verwandte Beiträge

• Internet Marketing Stammtisch Köln 2008 (6)
• Die Linkschleuder (2)
• Twitter-Counter: wieviele "Follower" hat man (4)
• Die Linkschleuder (7)
• Twitter und bloggen (15)
• Geld 2.0: Cover, Inhaltsverzeichnis und Website (20)
• Zahnbürste + Rasierer + Handy = Tchibo (9)
• Twitter: zwitschern bis der Arzt kommt (4)
• Virales Marketing mit Zahnbürste (18)
• Friendfeed (4)