Habs nachgebaut und es ging leichter als gedacht.
Hier mal ein Ausschnitt für die Facebook Komponente:
Dieses Skript kommt auf die erste Seite (in den body Tag):
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Dieser Abschnitt kommt auf jede intern verlinkte Seite (in den body
Tag):
<div id="SozialMedia"><div class="fb-like" data-
href="
http://google.com/" data-send="false" data-layout="box_count"
data-width="450" data-show-faces="false"></div></div>
Der CSS Abschnitt würde dann Beispielsweise so aussehen:
#SozialMedia {
position:fixed; top:45%; left:10px; width:74px; height:61px; z-index:2;
}
Die einzelnen "Plugins" für z.B. Facebook, Twitter, Google+ und co
müssen in diesem Beispiel in den "SozialMedia" Div eingefügt
werden.
z-index2 im CSS Abschnitt gibt an das Pop-ups (werden u.a.
Angezeigt wenn man bei Facebook gefällt mir anklickt) auf der 2ten Ebene als über dem eigentlichem Inhalt der Webseite angezeigt
werden. Dies soll verhindern das der "normale" Inhalt das Pop-up
überlagert.
Um den Schutz der Privatsphäre zu garantieren müsste jetzt noch
ein (Cookie basierter?) "Zwei-Klick-Mechanismus" entwickelt
werden...
Quelle:
Facebook Developers
Weitere Anregungen nehme ich gerne an :)
