XHTML 1.0 Strict - Facebook >I Like Button< integrieren?

[mana]

Liebe Profis,

wie integriere ich den Facebook "i Like Code" richtig.


(Mit Facebook 7 Fehler im W3C …)


(Ohne Facebook-Code 0 Fehler …)

Was mache ich hier falsch?

Vielen Dank, Martin

Ps: Bei mir funktioniert es mit Facebook-Code auf Firefox, Chrome, Camino, OmniWeb, SeaMonkey und WebKit. Opera stellt den Facebook-Code nicht schön dar. Wie es am Explorer aussieht weiß ich nicht da ich auf Mac arbeite … iPhone, iPad, Mobile habe ich auch noch nicht getestet. Die Seite geht zwar frühestens im Herbst online und ist teilweise noch im Layout, doch es wäre schön schon jetzt zu wissen was ich da falsch mache? Nochmals vielen Dank für Euere Hilfe.

 

[vitus37]

Hallo mana,

der von Facebook zur Verfügung gestellte Code ist leider schlichtweg kein valides HTML, darum wurde die Sprache des Codes auch clever „(X)FBML“ genannt.

Webbrowser versuchen jeden beliebigen Code zu interpretieren - so gut wie möglich. Sollte es nicht gerade der <IE6 sein, sollte der „Gefällt mir“-Button überall funktionieren.

In HTML 4 Transitional wäre das Einbinden durch ein iFrame noch möglich.

Gruß

 

[mana]

Schade um den schönen "Valides XHTML - W3C" Button …

Vielen Dank, Martin

 

[Degers]

Hier wird erläutert wie der Button valid eingebunden werden kann, ob es in XHTML Strict auch valide ist habe ich noch nicht getestet.

 

[vitus37]

In Strict sind iFrames nicht mehr erlaubt. Man könnte jedoch versuchen den Button durch JavaScript in die Seite zu setzen, anstatt in den HTML-Code selbst. .html() – jQuery API

 

[mana]

Hallo Degers,

vielen Dank für Deine Antwort. Wenn ich das so mache, spuckt mir der W3C Validator 4 statt wie vorher 7 Fehler aus. Alle auf den Facebook-Code bezogen. Dafür ist der Facebook-Senden-Button nicht mehr da (nur mehr der iLike-Button). Also auch nicht wirklich besser – trotzdem vielen Dank …

 

[Degers]

Meinst du dass rechts der Buttonbereich abgeschnitten ist? Das liegt einfach an der Breitenangabe im Div.
Ersetze

<iframe src="http://www.facebook.com/plugins/like.php?href=WEBSEITE-URL
&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=recommend
&amp;font=verdana&amp;colorscheme=light&amp;height=25" scrolling="no"
frameborder="0" style="border:none; overflow:hidden;
width:100px; height:25px;"></iframe>

durch

[html]<iframe src="http://www.facebook.com/plugins/like.php?href=WEBSEITE-URL
&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=recommend
&amp;font=verdana&amp;colorscheme=light&amp;height=25" scrolling="no"
frameborder="0" style="border:none; overflow:hidden;
width:130px; height:25px;"></iframe>

oder eine andere Breitenangabe.
Ideal ist das allerdings wirklich nicht, eine andere Lösungsmöglichkeit wurde ja bereits erläutert, ich bin aber auch weiter auf der Suche.

 

[mana]

Hallo Degers,

das mit der Breite war mir schon klar … daran lag es nicht … Trotzdem, wenn da einer eine coole Lösung hätte wäre das schon toll. Denn eigentlich hätten wir uns ja den W3C Button verdient … Vielen Dank für Deine Antwort und alles Gute bei Deiner Suche … Ich bin mir sicher das interessiert einige …

 

[vitus37]

Versuche mal das hier, könnte klappen:

<script type="text/javascript">
	document.write(' [...FB-Button-Code...] ');
</script>

Füge es an der Stelle im HTML-Doc ein, wo der Button hin soll und ersetze [...FB-Button-Code...] durch den Button-Code, den dir Facebook generiert hat.

Gruß

 

[mana]

Du meinst so?

<script type="text/javascript">
document.write('<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=165716193489331&amp;xfbml=1"></script><fb:like href="http://www.kinder-ebooks.com/" send="true" width="450" show_faces="false" font="arial"></fb:like>');
</script>

Habe es versuch – will aber nicht …

Trotzdem vielen Dank, Martin

 

[vitus37]

Hab jetzt selbst nochmal etwas damit herumgespielt und es funktioniert so:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=165716193489331&amp;xfbml=1"></script>
<script type="text/javascript">
document.write('<fb:like href="http://www.kinder-ebooks.com/" send="true" width="450" show_faces="false" font="arial"></fb:like>');
</script>

Dürfte valide sein.

 

[mana]

Mit dem Code spuckt der W3C-Validator 7 Fehler aus – alle auf den Facebook-Code bezogen …

Trotzdem Danke, Martin

 

[mermshaus]

document.write packt das Problem allerdings nicht gerade an der Wurzel. Das sorgt in der Theorie lediglich dafür, dass der „falsche“ Code dem Validator verborgen bleibt, da er erst dann hinzugefügt wird, wenn JavaScript läuft.

Ich habe mit Facebook nichts am Hut, aber das „fb:“-Präfix scheint mir ein XML-Namespace zu sein.

- Namensraum (XML)

Theoretisch müsste sich die Namespace-Definition in das Dokument einbinden lassen. Analog zu etwa:

- https://developer.mozilla.org/en/svg_in_html_introduction

Aus dem Kopf kann ich allerdings nicht sagen, ob es dabei irgendwas zu beachten gibt (zum Beispiel, dass das Dokument als XML-MIME-Type ausgeliefert werden muss oder so).

 

[mana]

Hallo Mermshaus,

vielen Dank für Deine Antwort. Funktionieren tut der Code von Vitus einwandfrei (mit >i Like< + >senden< Button) – nur auslesen tut der W3C-Validator den Code leider nicht … Der W3C-Validator spuckt die selben 7 Fehler aus wie mit normalem (X)FBML-Code – alle auf den Facebook-Code bezogen … Trotzdem Danke für Deine Hilfe, Martin

 

[mana]

Also ich habe inzwischen an die zehn Codes rund um den Facebook-Code-(X)FBML gebaut.
W3C valides XHTML 1.0 strict spuckt keiner aus …

na, ja – was soll's … Ich brauch das eh erst im Herbst – vielleicht gibt es bis dahin einen neuen Code.

Nochmals vielen Dank an alle … Martin