Trotz Facebook Widgets eine valide Seite

An Facebook Widgets führt heutzutage fast kein Weg vorbei. Spätestens wenn man mit seiner Seite bei Facebook vertreten ist, werden Facebook Widgets auf der eigenen Website eingebunden. Hier ein kurzer Tipp, wie das am besten funktioniert.

Die Widgets sind schnell implementiert – mit einer Zeile HTML – wie Facebook wirbt: doch auf die einfache Implentierung folgt meist auch der Schrecken: Der einst valide Code enthält nun Fehler. Dabei ist es auch egal, ob das Widget per iFrame oder XFBML eingebunden wird. Dieses Problem lässt sich aber sehr einfach beheben, indem man das Widget einfach per Javascript nachlädt wenn die Seite (DOM) schon geladen ist. Dadurch bekommt der Validator seinen korrekten Code und das Widget erscheint wie gewohnt auf der Seite.

Der entsprechende Javascript Code ist schnell geschrieben; ich stelle hier die Codezeilen mit jQuery sowie in reinem JavaScript vor, falls noch kein JavaScript Framework auf der Seite eingebunden ist. Die Funktionsweise ist denkbar einfach, der FBML-Code wird einfach nachträglich in das Objekt mit der ID fb_like-box eingefügt.

Diese DOM Manipulation ist natürlich auch mit anderen Frameworks realisierbar.

jQuery

jQuery("#fb_like-box").append(' <fb:like-box profile_id="185550966885"></fb:like-box> ');

JavaScript

document.getElementById("fb_like-box").innerHTML = ' <fb:like-box profile_id="185550966885"></fb:like-box> ';

Die Codezeilen fügen jeweils das Facebook Widget in das Objekt mit der ID fb_like-box ein. Im Normalfall ist das Objekt ein DIV und muss vorhanden sein;-). Der XFBML-Code muss natürlich durch den entsprechenden Code des Widgets ersetzt werden. Ich habe hier den Demo-Code der Seite Lactose Free Milk verwendet, da dieser momentan in der Like Box Demo von Facebook erscheint.

Dieser Workaround zum Verstecken des nicht validen Codes vor dem Validator sollte natürlich nur angewandt werden, wenn man wie hier keinen Einfluss auf den Code hat.

(mm), ™

Student der Kommunikations- und Softwaretechnik

Sortiert nach:   neueste | älteste | beste Bewertung
Andre
Gast

Gut beschrieben.
Hätt ich auch mal selber drauf kommen können :-| hab damit auch schon gehadert…

Paul
Gast

Damit verarscht man schlicht nur den Validator. Sonst hat es keinen Nutzen, oder übersehe ich den Vorteil? Valider wird die Seite dadurch auch nicht – es kommt nur etwas Overhead dazu.

efi
Gast

Und was ist gegen xmlns:fb=“http://www.facebook.com/2008/fbml“ einzuwenden?

Thomas Bachmann
Gast

Ich halte es sinnvoller nur ein kleines Facebook Icon mit Link auf die Profilseite einzubetten. Denn durch das eingebundene Facebook JavaScript kann Facebook einiges über die Nutzer der Seite herausfinden.

Christian Harms
Gast

Spannend, per document.write den (X)HTML Validator austricksen, was für ein Schwachsinn!

Stefan Rynkowski
Gast

Im Grunde wirklich nur ein ‚Versteckspiel‘ vor dem Validator.
Ich habe es auch mit einem Icon gelöst, jedoch gibt es auch einige Leute, die wirklich gerne Widgets einbauen, da muss natürlich eine Alternative her. Und da denke ich, ist dieser kleine ‚Trick‘ für den Anfang zunächst nicht schlechter als ein nicht valider Code.

Daniel S
Gast

Es muss wirklich eine vernünftige Alternative her. iFrames sind veraltet, und die XML Tags machen es auch nicht besser. Schade dass es keine reine JS-Lösung gibt. Traurig, dass Facebook iFrames anbietet. Hallo, 1996!

SaHiB
Gast

kann mich da Paul nur anschließen – nur schöner Schein ohne Nutzen für den User.
Aber, in Zeiten wo man als Webmaster (eventuell sogar vertraglich) gezwungen ist, seinem Kunden validen Code zu liefern, ist der Validator das Maß aller Dinge.
muss gestehen, daß auch ich schon 1-2x in die „Nachlade“ Trickkiste gegriffen habe um die eine oder andere komfort-Funktion einzubauen und trotzdem den grünen Balken zu sehen…

Für Facebook wär’s mir das aber nicht wert – auch ich würde hier einfach nen Link setzen und der Datenkrake so ein Schnippchen schlagen :-P

alexplus
Gast

Muss mich meinen Vorrednern ebenfalls anschließen – die Seite wird damit kein Mµ valider, weil der Validator den tatsächlichen Code nicht zu Gesicht bekommt.

Da kann man ja gleich die ganze Seite per JS nachladen. Nie wieder fehlerhafte Seiten! :D

still-learning
Gast

Nur noch so eingeworfen, nachdem ich mich erst seit kurzem ernsthaft mit Javascript beschäftige (und im Rahmen dessen u.a. auch mit der Verbesserung von Ladeperformance bzw. Script-Aufbau).

Hat das nachrägliche einfügen von Facebook-Iframes und anderen Social-Media-Stuff / Add-This-Buttons per Javascript (also eben nicht schon hart im HTML-Code) nicht auch zusätzlich den Vorteil, dass Verzögerungen / Blocking beim Seiten-Ladevorgang vermieden werden, Stichwort asynchron?

Link zum Thema: http://molily.de/weblog/javascript-asynchron

Interessierter
Gast

Auch wenn es nur ein Verstecken ist bin ich an der Umsetzung interessiert. Leider habe ich noch nicht viel mit JS/jquery gearbeitet.

Kann mir einer sagen, was ich in den HTML-Code und was in eine .js-Datei schreiben soll?

Danke!

Patrick
Gast

Bei mir funktioniert es nicht. Wollte den Codeschnipsel grad posten, wird aber durch die Kommentarfunktion abgehackt. Hab das JS nochmal extra in ein CDATA-Block gepackt.

trackback

[…] more: Trotz Facebook Widgets eine valide Seite | Facebook, HTML, Javascript, jQuery, Widgets | Dr. Web Mag… Tags: facebook, jquery, […]

Jörn
Gast
Wie müßte man folgenden code abändern um das script nachzuladen: [PHP] <?php /** * @Copyright Copyright (C) 2010- Md. Afzal Hossain * @license GNU/GPL http://www.gnu.org/copyleft/gpl.html **/ /* This file is part of mod_lcc. mod_lcc is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. mod_lcc is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR… Read more »
wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen