Dr.Web - Das Online Magazin für Seitenbetreiber

Trotz Facebook Widgets eine valide Seite

von Marcel Weber
28.07.10
Facebook, HTML, Javascript, jQuery, Widgets
15 Kommentare

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), (tm)

Über Marcel Weber

Student der Kommunikations- und Softwaretechnik Website. Weitere Beiträge für Dr. Web: 9

15 Kommentare zu “Trotz Facebook Widgets eine valide Seite”

15 Kommentare

1

Andre
28.07.2010 14:15
Gut beschrieben.
Hätt ich auch mal selber drauf kommen können hab damit auch schon gehadert...

Antwort
2

Paul
28.07.2010 15:14
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.

Antwort
3

efi
28.07.2010 16:19
Und was ist gegen xmlns:fb="http://www.facebook.com/2008/fbml" einzuwenden?

Antwort
4

Thomas Bachmann
28.07.2010 16:32
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.

Antwort
5

Christian Harms
28.07.2010 17:53
Spannend, per document.write den (X)HTML Validator austricksen, was für ein Schwachsinn!

Antwort
6

Stefan Rynkowski
28.07.2010 19:26
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.

Antwort
7

Daniel S
28.07.2010 23:27
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!

Antwort
8

SaHiB
29.07.2010 01:41
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

Antwort
9

alexplus
29.07.2010 09:37
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!

Antwort
10

still-learning
30.07.2010 15:07
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/javasc

Antwort
11
Interessierter
4.08.2010 17:24
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!

Antwort
- Marcel Weber
  August 4th, 2010 23:37
  Ich gehe davon aus, dass auf deiner Seite jQuery nicht eingebunden ist, deshalb kannst du einfach
  
  document.getElementById("fb_like-box").innerHTML = ' ';
  
  am Ende deiner Seite einfügen. (Also in der .html Datei)
  
  Wenns nicht funktioniert, einfach nochmal melden
12
Patrick
11.08.2010 16:17
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.

Antwort
- Marcel Weber
  August 11th, 2010 22:19
  Das Problem hat sich ja mittlerweile erledigt. Aber falls sonst noch jemand Probleme mit dem Script hat:
  
  Um fbml verwenden zu können, muss das JavaScript SDK von Facebook eingebunden werden. http://developers.facebook.com
  
  Oder es muss der iframe Code des Widgets anstelle von "" eingefügt werden.