Google +1 Button mit jQuery nachladen
Na, auch gerade am Einbauen des Google +1 Button? In diesem Beitrag zeige ich Euch, wie Ihr den Google +1 Button mit jQuery nachladen könnt, um den Webseiten-Aufbau zu beschleunigen.
Nachdem ich bereits darüber gebloggt habe, wie man die Facebook Like Box mit jQuery nachladen kann, folgt hier die Beschreibung für den Google +1 Button.
Die Google Dokumentation für das normale Einbinden des Like-Buttons gibt es hier: Google-Dokumentation +1 Button
Google +1 Button nachladen
Voraussetzung ist natürlich, das jQuery in einer aktuellen Version bereits in Eure Webseite eingebunden ist.
Als erstes fügt Ihr in Eurer Seite einen Div-Container ein, an die Stelle, wo der Google +1 Button eingebunden werden soll. Beispiel:
<div id="google_pluseins"></div>
Diesen könnt Ihr später nach Belieben mit CSS formatieren.
Dann müsst Ihr eigentlich nur noch das JavaScript in Eure Seite integrieren, welche den Google +1 Button nachlädt. Dies könnt Ihr z.B. im <head> Bereich Eurer Seite tun. Das JavaScript sieht folgendermaßen aus:
<script type="text/javascript">
$(function(){
$(window).bind("load", function(){
$('#google_pluseins').html('<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang:\'de\'}</script><g:plusone size="medium"></g:plusone>');
});
})
</script>
Zugegeben, man könnte das noch weitaus eleganter lösen, aber ich möchte ja auch Spielraum für Verbesserungen lassen ;)
Google +1 Button und Facebook Like Box nachladen
Wenn Ihr jetzt z.B. bereits die Facebook Like Box mit jQuery nachladen lasst, könnt Ihr das natürlich kombinieren.
Zunächst müsst Ihr wieder die Div-Container in Eure Seite integrieren, wo Google +1 Button und Facebook Like Box hin sollen. Z.B.:
<div id="google_pluseins"></div>
<div id="facebook_likebox"></div>
Der zugehörige JavaScript Code, welcher am besten wieder im <head> Bereich Eurer Webseite steht, sieht dann so aus:
<script type="text/javascript">
$(function(){
$(window).bind("load", function(){
// Google +1 Button
$('#google_pluseins').html('<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang:\'de\'}</script><g:plusone size="medium"></g:plusone>');
// Facebook Like Box
$("#facebook_likebox").html('<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fandiministrator.de%2F&layout=standard&show_faces=true&width=250&action=like&font=verdana&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:80px;" allowTransparency="true"gt;</iframe>');
});
})
</script>
Also dann viel Spaß beim Einbau. Wenn Ihr Anregungen habt, gebt mir bescheid.
UPDATE
27.7.2011:
Google hat auf das Ladezeitproblem reagiert und bietet nun selbst eine asynchrone Variante des +1 Button an. Dazu müsst Ihr auf der Google Dokumentationsseite (geht derzeit nur auf der englischen Seite) den Link "Advanced options" aufklappen und "Asynchronous" auswählen. Natürlich auch alles andere wieder anpassen. Mit dem neuen Code könnt Ihr dann einfach den alten ersetzen.
Kommentare:
Tom - Mittwoch, 13. Juli 2011, 23:56
Hallo Andi,
herzlichen Dank für den tollen Artikel. Da ich kein JQuery-Fachmann bin, interessiert mich folgendes: Der Like und Google+ Button ist ja datenschutzrechlich sehr bedenklich. Ideal wäre es deshalb, wenn man die Buttons nicht sofort nach dem Laden der Seite, sondern z. B. erst nach dem Klick auf eine Grafik oder einen Textlink per JQuery nachladen könnte.
Leider komme ich da aber nicht weiter. Hättest Du denn vielleicht eine Idee?
Vorab vielen Dank!
Viele Grüsse
Tom
Mit etwas jQuery sollte das Nachladen kein Problem sein. Um rechtlich auf der sicheren Seite zu sein, müsste dann am besten ein Popup mit den Buttons aufgehen, nachdem der Benutzer dem Warnhinweis zugestimmt hat. Aber ob das dann noch jemand macht, ist fraglich ...
Einen Kommentar schreiben
Trackback-URL