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), ™
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
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.
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.
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!
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 ;-)
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
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
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
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!
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.
Spannend, per document.write den (X)HTML Validator austricksen, was für ein Schwachsinn!
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.
Und was ist gegen xmlns:fb=“http://www.facebook.com/2008/fbml“ einzuwenden?
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.
Gut beschrieben.
Hätt ich auch mal selber drauf kommen können :-| hab damit auch schon gehadert…