Weil der Umgang mit Facebook und seinen social plugins noch nicht schwierig genug ist, habe ich mir in meiner grenzenlosen Vermessenheit gedacht, ich mache das Ganze noch eine Stufe schwieriger. Ich wollte, dass denen, die sich neu registrieren auf meiner Seite, das register plugin in einer Lightbox angezeigt wird. Ich muss völlig WAHNSINNIG gewesen sein, als ich diesen Plan gefasst habe.
Weil es das bisher beste Lightbox plugin ist, das mir je begegnet ist, habe ich mich für die jquery ColorBox entschieden. Die bringt eigentlich alle Features mit, die ich brauche, insbesondere die Möglichkeit, das Aussehen völlig an die eigenen Vorstellungen anzupassen. Ich habe also im header meiner Seite folgendes Script aufgerufen:
$(document).ready(function(){
$.colorbox({href: ‚register.html‘, opacity:0.6, onComplete: function(){ FB.XFBML.parse(); } });
});
Damit wird beim Laden der Seite direkt die ColorBox aufgerufen und darin wird die register.html angezeigt, die sieht folgendermaßen aus:
<div id="register">
<div width="500" height="300" fb_only="true" onvalidate="validate"
data-fields="[{'name':'name'}, {'name':'email'},
{'name':'agb', 'description':'Ich akzeptiere die AGB', 'type':'checkbox'}]"
data-redirect-uri="/register.php">
</div>
</div>Durch das asynchrone Laden des Contents muss man diesen Facebook Code neu parsen, dazu ist der onComplete Teil da: FB.XFBML.parse() stellt sicher, dass das registrieren Formular auch wirklich jedes mal angezeigt wird.
PS: was hier jetzt so leicht aussieht, hat mich in Wahrheit natrülich mehrere Stunden gekostet.