Addthis à la Heise

Kommentieren Sep 13 2011

 

Facebook macht ja leider was es will ( Aber da die Benutzer ohne viel nachzudenken mit laufen…. ). Nun hat das deutsche Recht leider ein Problem mit der Art und Weise wie Facebook mit den Daten umgeht.

Daher hat sich der Heise Verlag für die eigene Webseite was überlegt.

Nun kann man sich die Idee kopieren und bei sich einbauen. Was aber wenn man leider schon andere Social-Share-Dienste verwendet ?

Bei der Verwendung von Addthis habe ich nun eine Lösung gefunden die das Verhalten nachbaut.

Hier ist der HTML Teil der beim ersten Aufruf der Seite geladen wird.




    

    

    

    

    

    





    

    




Wie man sieht gibt es zwei “Blöcke”. Der Erste ist der normale Addthis Teil, der die gängigen Icons anzeigt.
Der zweite Block beinhaltet erster mal nur zwei Icons die man anklicken kann. Diese Aktion wir via Javascript hinzugefügt.

Dazu kommt noch ein wenig jQuery:

$(window).load(function() {

    $("#socialMediaExtended").click(function() {

        var url = "/getSocialBarExtended";

            

        $.ajax({

            url: url,

            cache: false,

            success: function(html) {

                $('#socialFrame').html(html);

                addthisInit();

            }

        });

    });

    

    addthisInit();

});



function addthisInit() {

    var addthisScript = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';

    if(window.addthis) {

        window.addthis = null;

    }

    $.getScript(addthisScript, function() { addthis.init(); });

}



Wenn die Seite geladen wurde, wird mit der Funktion “addthisInit” das JavaScript von Addthis geladen. Wichtig dabei ist der Parameter “#domread=1” am Ende der URL. Damit wird der erste Block mit den Addthis Aktionen hinterlegt und kann verwendet werden.

Wenn man nun in dem zweiten Block auf ein Icon klick wird der AJAX Aufruf ausgeführt. Das was dabei zurückkommt wird in das Element mit der ID “socialFrame” rein geschrieben. Wobei der bestehende Inhalt überschrieben wird.


    

    



Nach dem der Inhalt geladen worden ist, wir die Funktion “addthisInit” erneut aufgerufen und Addthis neu geladen und somit werden die neuen Buttons eingebunden und funktionieren.

Auf diese Weise werden die IFrames der Anbieter (Facebook, Google etc.) nur auf Wunsch geladen.

Bei Fragen einfach fragen ;-)