Share Buttons nativ

Die meisten Social Media Dienste bieten Share-Buttons an, bei deren Verwendung beim Laden der Seite im Hintergrund weitere Requests ausgelöst werden. Das verursacht zum einen längere Ladezeiten der Seite, außerdem findet so meistens ein datenschutzrechtlich umstrittenes Tracking des Users ohne dessen Wissen statt. Die folgende Variante baut erst einen Request zum externen Dienst auf, wenn auf den Button geklickt wird. Die Integration erfolgt weitestgehend ohne Eingriffe in die Seite, da die Funktionalität nachträglich über jQuery an die Buttons gebunden wird. In diesem Beispiel wird die CSS Klasse "social-share" im HTML Markup als Selektor verwendet. Die zweite Klasse, z.B. "facebook" dient zur Unterscheidung der Buttons in der eigentlichen Share-Funktion.

HTML Markup

<a href="#" class="social-share twitter">...</a>
<a href="#" class="social-share facebook">...</a>
<a href="#" class="social-share googleplus">...</a>
<a href="#" class="social-share xing">...</a>

Die Javascript share-Funktion

function share(target) {  
    var page_url = encodeURIComponent(location.href);
    var page_title = encodeURIComponent(document.title);
    var share_url = '';
    switch(target) {
        case 'twitter':
            share_url = 'https://twitter.com/intent/tweet?url=' + page_url + '&text=' + page_title;
            break;
        case 'facebook':
            share_url = 'http://www.facebook.com/sharer/sharer.php?u=' + page_url + '&t=' + page_title;
            break;
        case 'googleplus':
            share_url = 'https://plus.google.com/share?url=' + page_url + '&t=' + page_title;
            break;
        case 'xing':
            share_url = 'https://www.xing.com/app/user?op=share;url=' + page_url;
            break;
        default:  
    }
    window.open(share_url, 'SocialMedia', '');
}

Binden der Funktion an die Buttons via jQuery

jQuery(document).ready(function($) {
    $('a.social-share').each(function(index) {
        $(this).on('click', function(event) {
            event.preventDefault();
            share($(this).attr('class').replace('social-share ', ''));
        });
    });
});