Vor Kurzem bin ich bei Torben auf den Artikel Ladezeit: Facebook Like-Button per jQuery nachladen gestoßen. In dem Artikel erklärt er, wie man Facebook’s Like-Button mit ein paar Schnipseln Javascript erst nach dem vollständigen Laden der übrigen Inhalte einbindet. Dadurch verbessert sich die Ladezeit und damit die Bedienbarkeit der Website erheblich, da der Like-Button beim Aufruf Unmengen an Quellcode nachlädt.
Die von Torben vorgestellte Lösung funktioniert problemlos, wenn man nur 1 Like-Button (oder auch Tweetbutton) auf der Seite hat. Bei der von mir vor Kurzem vorgestellten Variante, bei der Facebook- und Twitter-Buttons auf der Indexseite des Blogs unter jedem Artikel angezeigt werden sollen, funktioniert dies jedoch nicht. Der Grund: hier müssen für jeden Artikel die Permalinks ermittelt werden, um sie dem jeweiligen Skript (Facebook oder Twitter) als Parameter mitzugeben. Um die Permalinks während dem Ablauf des Loops zu ermitteln und sie für die spätere Einbindung über jQuery bereitzustellen, muss Torbens Lösung noch ein wenig erweitert werden. Torben war so freundlich und hat mich bei der Erweiterung seiner Lösung unterstützt.
Und so geht’s!
1. jQuery und Skript in header.php einbinden
Sofern die jQuery-Bibliothek nicht bereits aus anderen Gründen im Head eingebunden ist, kann diese direkt über Google eingebunden werden. Zusätzlich werden 2 Arrays erstellt, um die Permalinks für die spätere Verwendung zu speichern. Im zweiten Skript wird der Browser angewiesen, die Buttons erst zu laden, nachdem der übrige Inhalte geladen ist. Den Code für die Facebook- und Twitter-iframes soll sich das Skript aus der Datei ajax.php holen, die im Stylesheet-Verzeichnis liegt. Das Ganze sieht dann wie folgt aus und muss irgendwo innerhalb des <head>-Tags eingefügt werden:
<!-- Sharebuttons erst nach Content laden -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">var facebook_links = new Array();var twitter_links = new Array();</script><script type="text/javascript">$(function(){ $(window).bind("load", function(){ $(".sharebuttons").each(function(index){ var sb = $(this); $.get('<?php bloginfo('stylesheet_directory'); ?>/ajax.php', { fb: facebook_links[index], tw: twitter_links[index] }, function(data){ $(sb).append(data); }); }); });})</script><!-- Ende: Sharebuttons erst nach Content laden -->2. Teilen-Buttons in loop.php und single.php einfügen
In den Dateien loop.php und single.php wird nun an der gewünschten Stelle der Container für die 2 Buttons eingefügt, am Besten direkt nach dem Container mit dem Content (<div class=”entry-content”>). Jetzt werden die iframes natürlich nicht direkt geladen, sondern lediglich die Permalinks ermittelt und an die Arrays übergeben :
<div class="sharebuttons"> <script type="text/javascript"> facebook_links.push('http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=false&width=450&action=like&colorscheme=light&height=21'); twitter_links.push('http://platform.twitter.com/widgets/tweet_button.html?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&count=horizontal&lang=de&via=dein-twitter-name'); </script></div><!-- .sharebuttons" -->3. ajax.php erstellen
Zu guter Letzt benötigt man nun noch die oben bereits erwähnte Datei ajax.php, die man im gleichen Verzeichnis wie das Stylesheet ablegt. Die Datei enthält nun die eigentlichen iframes, die nach dem Laden der Seite mit den Permalinks aus den Arrays gefüllt und innerhalb des Containers <div class=”sharebuttons”> in den Templates loop.php und single.php eingefügt werden. Folgendes steht in der Datei:
<div class="twitter"><iframe class="twitter-share-button twitter-count-horizontal" src="<?php echo $_GET['tw']; ?>" style="width:120px; height:20px;" allowtransparency="true" frameborder="0" scrolling="no" title="Diesen Artikel twittern"></iframe></div><div class="facebook"><iframe src="<?php echo $_GET['fb']; ?>" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></div>Hier noch ein Schnipsel CSS, damit die Buttons ordentlich nebeneinander dargestellt werden:
*Sharebuttons*/.sharebuttons { clear: both; margin: 10px 0; }.sharebuttons .twitter { float: left; }Und wenn man alles richtig gemacht hat, erscheinen die zwei Buttons wie hier unter dem Artikel. Aber eben erst, wenn die Website vollständig geladen ist. Der Effekt ist auf der Indexseite gut zu beobachten.
An dieser Stelle nochmals vielen Dank an Torben für sein Engagement.