Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Trotz Facebook Widgets eine valide Seite

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.

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 15 Kommentare
Lesedauer: 2 Minuten
  • von Dr. Web Redaktion
  • 28. Juli 2010
Bookmarke mich
Share on pocket

pictibe – Werbeagentur & Marketingagentur

wolpersweb.de Webdesign & SEO

wp-agentur.de | WordPress-Agentur

Carmen Hurst | Webdesign

One Step Webdesign

Trend Maker Marketing - Webdesign Agentur Regensburg

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), ™

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.

Agenturpartner

netkin digital Marketing

Köln

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

WordPress Werkstatt

Freiburg im Breisgau

SEO-Sicht

Berlin

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Alle Agenturpartner

Jobs

Elektroinstallateur – Rechenzentrum

Karlsruhe

Media Manager in München

München

SEO Manager – Vollzeit

Remote

Texter / Junior Content Marketing Manager

Innsbruck

Business Development Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

15 Antworten zu „Trotz Facebook Widgets eine valide Seite“
— was ist Deine Meinung?

  1. Jörn sagt:
    16. September 2010 um 20:14 Uhr

    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

    Antworten
  2. Patrick sagt:
    11. August 2010 um 16:17 Uhr

    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.

    Antworten
    1. Marcel Weber sagt:
      11. August 2010 um 22:19 Uhr

      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/docs/reference/javascript/

      Oder es muss der iframe Code des Widgets anstelle von „“ eingefügt werden.

      Antworten
  3. Interessierter sagt:
    4. August 2010 um 17:24 Uhr

    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!

    Antworten
    1. Marcel Weber sagt:
      4. August 2010 um 23:37 Uhr

      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 😉

      Antworten
  4. still-learning sagt:
    30. Juli 2010 um 15:07 Uhr

    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

    Antworten
  5. alexplus sagt:
    29. Juli 2010 um 9:37 Uhr

    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! 😀

    Antworten
  6. SaHiB sagt:
    29. Juli 2010 um 1:41 Uhr

    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 😛

    Antworten
  7. Daniel S sagt:
    28. Juli 2010 um 23:27 Uhr

    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!

    Antworten
  8. Stefan Rynkowski sagt:
    28. Juli 2010 um 19:26 Uhr

    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.

    Antworten
  9. Christian Harms sagt:
    28. Juli 2010 um 17:53 Uhr

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

    Antworten
  10. Thomas Bachmann sagt:
    28. Juli 2010 um 16:32 Uhr

    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.

    Antworten
  11. efi sagt:
    28. Juli 2010 um 16:19 Uhr

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

    Antworten
  12. Paul sagt:
    28. Juli 2010 um 15:14 Uhr

    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.

    Antworten
  13. Andre sagt:
    28. Juli 2010 um 14:15 Uhr

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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.