Facebook

Trotz Facebook Widgets eine valide Seite

28. Juli 2010
von

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

18 Kommentare zu „Trotz Facebook Widgets eine valide Seite
  1. Andre am 28. Juli 2010 um 14:15

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

  2. Paul am 28. Juli 2010 um 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.

  3. efi am 28. Juli 2010 um 16:19

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

  4. Thomas Bachmann am 28. Juli 2010 um 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.

  5. Christian Harms am 28. Juli 2010 um 17:53

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

  6. Stefan Rynkowski am 28. Juli 2010 um 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.

  7. Daniel S am 28. Juli 2010 um 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!

  8. SaHiB am 29. Juli 2010 um 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 :-P

  9. alexplus am 29. Juli 2010 um 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! :D

  10. still-learning am 30. Juli 2010 um 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/javascript-asynchron

  11. Interessierter am 4. August 2010 um 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!

    • Marcel Weber am 4. August 2010 um 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 am 11. August 2010 um 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.

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

  14. Jörn am 16. September 2010 um 20:14

    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 PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with mod_lcc. If not, see .

    */
    /** ensure this file is being included by a parent file */
    defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );

    class plgSystemPlg_fbjs_loader extends JPlugin{

    function onAfterRender()
    {
    global $mainframe;

    $appId = $this->params->get(‘appId’, ”);

    $buffer = JResponse::getBody();

    $customscript = ‘

    window.fbAsyncInit = function() {
    FB.init({appId: \”.$appId.’\', status: true, cookie: true,
    xfbml: true});
    };
    (function() {
    var e = document.createElement(\’script\’); e.async = true;
    e.src = document.location.protocol +
    \’//connect.facebook.net/en_US/all.js\’;
    document.getElementById(\’fb-root\’).appendChild(e);
    }());

    ‘;
    $pos2 = strpos($buffer, “” , $pos2);
    if($pos2 > 0 and $pos>0)
    {
    $buffer = substr($buffer, 0, $pos+1).$customscript.substr($buffer, $pos+1);
    JResponse::setBody($buffer);
    }
    return true;
    }

    }
    [/PHP]

    Es handelt sich um ein Joomla Plugin welches noch immer zwei Fehler im Validator verursacht. Wäre für Hilfe sehr dankbar

    VG
    Jörn

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!