Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Marcel Weber 28. Juli 2010

Trotz Facebook Widgets eine valide Seite

An Facebook Widgets führt heut­zu­ta­ge fast kein Weg vor­bei. Spätestens wenn man mit sei­ner Seite bei Facebook ver­tre­ten ist, wer­den Facebook Widgets auf der eige­nen Website ein­ge­bun­den. Hier ein kur­zer Tipp, wie das am bes­ten funk­tio­niert.

Die Widgets sind schnell imple­men­tiert – mit einer Zeile HTML – wie Facebook wirbt: doch auf die ein­fa­che Implentierung folgt meist auch der Schrecken: Der einst vali­de Code ent­hält nun Fehler. Dabei ist es auch egal, ob das Widget per iFrame oder XFBML ein­ge­bun­den wird. Dieses Problem lässt sich aber sehr ein­fach behe­ben, indem man das Widget ein­fach per Javascript nach­lädt wenn die Seite (DOM) schon gela­den ist. Dadurch bekommt der Validator sei­nen kor­rek­ten Code und das Widget erscheint wie gewohnt auf der Seite.

Der ent­spre­chen­de Javascript Code ist schnell geschrie­ben; ich stel­le hier die Codezeilen mit jQuery sowie in rei­nem JavaScript vor, falls noch kein JavaScript Framework auf der Seite ein­ge­bun­den ist. Die Funktionsweise ist denk­bar ein­fach, der FBML-Code wird ein­fach nach­träg­lich in das Objekt mit der ID fb_­li­ke-box ein­ge­fügt.

Diese DOM Manipulation ist natür­lich auch mit ande­ren Frameworks rea­li­sier­bar.

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_­li­ke-box ein. Im Normalfall ist das Objekt ein DIV und muss vor­han­den sein;-). Der XFBML-Code muss natür­lich durch den ent­spre­chen­den Code des Widgets ersetzt wer­den. Ich habe hier den Demo-Code der Seite Lactose Free Milk ver­wen­det, da die­ser momen­tan in der Like Box Demo von Facebook erscheint.

Dieser Workaround zum Verstecken des nicht vali­den Codes vor dem Validator soll­te natür­lich nur ange­wandt wer­den, wenn man wie hier kei­nen Einfluss auf den Code hat.

(mm), (tm)

Marcel Weber

Student der Kommunikations- und Softwaretechnik

15 Kommentare

  1. Wie müß­te man fol­gen­den code abän­dern um das script nach­zu­la­den:

    [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 soft­ware: you can redis­tri­bu­te it and/or modi­fy
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, eit­her ver­si­on 3 of the License, or
    (at your opti­on) any later ver­si­on.

    mod_lcc is dis­tri­bu­t­ed in the hope that it will be use­ful,
    but WITHOUT ANY WARRANTY; wit­hout even the implied war­ran­ty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

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

    */
    /** ensu­re this file is being inclu­ded by a parent file */
    defi­ned( ‘_JEXEC’ ) or die( ‘Restricted access’ );

    class plgSystemPlg_fbjs_loader extends JPlugin{

    func­tion onAfterRender()
    {
    glo­bal $main­frame;

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

    $buf­fer = JResponse::getBody();

    $custom­script = ’

    window.fbAsyncInit = func­tion() {
    FB.init({appId: \”.$appId.’\’, sta­tus: true, coo­kie: true,
    xfbml: true});
    };
    (func­tion() {
    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)
    {
    $buf­fer = substr($buffer, 0, $pos+1).$customscript.substr($buffer, $pos+1);
    JResponse::setBody($buffer);
    }
    return true;
    }

    }
    [/PHP]

    Es han­delt sich um ein Joomla Plugin wel­ches noch immer zwei Fehler im Validator ver­ur­sacht. Wäre für Hilfe sehr dank­bar

    VG
    Jörn

  2. Bei mir funk­tio­niert es nicht. Wollte den Codeschnipsel grad pos­ten, wird aber durch die Kommentarfunktion abge­hackt. Hab das JS noch­mal extra in ein CDATA-Block gepackt.

  3. Auch wenn es nur ein Verstecken ist bin ich an der Umsetzung inter­es­siert. Leider habe ich noch nicht viel mit JS/jquery gear­bei­tet.

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

    Danke!

    • Ich gehe davon aus, dass auf dei­ner Seite jQuery nicht ein­ge­bun­den ist, des­halb kannst du ein­fach

      document.getElementById(“fb_like-box”).innerHTML = ’ ‘;

      am Ende dei­ner Seite ein­fü­gen. (Also in der .html Datei)

      Wenns nicht funk­tio­niert, ein­fach noch­mal mel­den ;-)

  4. Nur noch so ein­ge­wor­fen, nach­dem ich mich erst seit kur­zem ernst­haft mit Javascript beschäf­ti­ge (und im Rahmen des­sen u.a. auch mit der Verbesserung von Ladeperformance bzw. Script-Aufbau).

    Hat das nachräg­li­che ein­fü­gen von Facebook-Iframes und ande­ren Social-Media-Stuff / Add-This-Buttons per Javascript (also eben nicht schon hart im HTML-Code) nicht auch zusätz­lich den Vorteil, dass Verzögerungen / Blocking beim Seiten-Ladevorgang ver­mie­den wer­den, Stichwort asyn­chron?

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

  5. Muss mich mei­nen Vorrednern eben­falls anschlie­ßen – die Seite wird damit kein Mµ vali­der, weil der Validator den tat­säch­li­chen Code nicht zu Gesicht bekommt.

    Da kann man ja gleich die gan­ze Seite per JS nach­la­den. Nie wie­der feh­ler­haf­te Seiten! :D

  6. kann mich da Paul nur anschlie­ßen – nur schö­ner Schein ohne Nutzen für den User.
    Aber, in Zeiten wo man als Webmaster (even­tu­ell sogar ver­trag­lich) gezwun­gen ist, sei­nem Kunden vali­den Code zu lie­fern, ist der Validator das Maß aller Dinge.
    muss geste­hen, daß auch ich schon 1–2x in die “Nachlade” Trickkiste gegrif­fen habe um die eine oder ande­re kom­fort-Funktion ein­zu­bau­en und trotz­dem den grü­nen Balken zu sehen…

    Für Facebook wär’s mir das aber nicht wert – auch ich wür­de hier ein­fach nen Link set­zen und der Datenkrake so ein Schnippchen schla­gen :-P

  7. Es muss wirk­lich eine ver­nünf­ti­ge Alternative her. iFrames sind ver­al­tet, und die XML Tags machen es auch nicht bes­ser. Schade dass es kei­ne rei­ne JS-Lösung gibt. Traurig, dass Facebook iFrames anbie­tet. Hallo, 1996!

  8. Im Grunde wirk­lich nur ein ‘Versteckspiel’ vor dem Validator.
    Ich habe es auch mit einem Icon gelöst, jedoch gibt es auch eini­ge Leute, die wirk­lich ger­ne Widgets ein­bau­en, da muss natür­lich eine Alternative her. Und da den­ke ich, ist die­ser klei­ne ‘Trick’ für den Anfang zunächst nicht schlech­ter als ein nicht vali­der Code.

  9. Spannend, per document.write den (X)HTML Validator aus­trick­sen, was für ein Schwachsinn!

  10. Ich hal­te es sinn­vol­ler nur ein klei­nes Facebook Icon mit Link auf die Profilseite ein­zu­bet­ten. Denn durch das ein­ge­bun­de­ne Facebook JavaScript kann Facebook eini­ges über die Nutzer der Seite her­aus­fin­den.

  11. Und was ist gegen xmlns:fb=“http://www.facebook.com/2008/fbml” ein­zu­wen­den?

  12. Damit ver­arscht man schlicht nur den Validator. Sonst hat es kei­nen Nutzen, oder über­se­he ich den Vorteil? Valider wird die Seite dadurch auch nicht – es kommt nur etwas Overhead dazu.

  13. Gut beschrie­ben.
    Hätt ich auch mal sel­ber drauf kom­men kön­nen :-| hab damit auch schon geha­dert…

Schreibe einen Kommentar zu still-learning Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.