• 2-klick Buttons sozialer Netzwerke

    by  • 28. Januar 2013 • Uncategorized • 0 Comments

    Jeder kennt sie, die Tweet-, Like- und +1-Knöpfe, die sich auf fast jeder Webseite tummeln. Vielleicht weniger bekannt, aber bereits durch das Anzeigen dieser „Buttons“, weiß das entsprechende soziale Netzwerk, auf welchen Seiten man sich so rumtreibt. Zumindest solange man gerade eingeloggt ist und die entsprechenden Cookies aktiv sind.

    Um den Besuchern ein wenig mehr Privatsphäre zu gönnen, hat die c’t das Projekt 2-Klick social share privacy ins Leben gerufen. Der Besucher muss nun aktiv den jeweiligen Knopf freischalten, um ihn zu benutzen. Alternativ kann sich der Besucher auch entscheiden, dass die Knöpfe immer aktiv sein sollen, ohne dass er sie extra freischaltet. Dafür muss er sich aber bewusst entscheiden.

    Lange Rede, kurzer Sinn – die Idee gefiel mir und ich wollte sie auf meiner Webseite umsetzen. Nun gibt es zwar ein, zwei Plugins, die das bereits machen, aber sie haben sich nicht so schön mit dem von mir werwendeten Theme – PressWork – integriert. Für PressWork gibt es bereits eine schöne Anleitung, wie man die Social Media Buttons integriert, so dass sie hübsch aussehen. Nämlich nicht ans Ende des Beitrags, sondern direkt darunter. Leider wurde das Projekt unlängst eingestellt und – noch schlimmer – auch die Webseite zeigt nur noch genau diese Information.

    Zum Glück gibt es aber das Webarchiv und es gibt somit auch eine Kopie der PressWork Dokumentation dort zu finden. Somit hatte ich also alle Informationen, die ich brauchte und entschied mich als Grundlage das Plugin wp-socialshareprivacy zu nehmen. An sich hätte das schon genügt für die Anzeige, aber ich wollte ja eine andere Position. Glücklicherweise besteht der eigentliche HTML-Code für die Anzeige nur aus der Zeile:

    <div id="socialshareprivacy"></div>

    Diese habe ich in der wp-socialprivacy.php auskommentiert. Somit wird zwar durch wp-socialshareprivacy der ganze Code eingebunden und man kann auch die komplette Konfiguration bequem vornehmen, die Anzeige passiert aber woanders.

    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    
            function add_content($content = '') {
                    global $Default_options;
     
                    $setting_options = get_option('wpssp_options' );
                    if ( $setting_options ) {
                            foreach ( array_keys($Default_options[services]) as $service ) {
                                    if ( !isset($setting_options['services_' . $service . '_status']) ) {
                                            $setting_options['services_' . $service . '_status'] = 'off';
                                    }
                            }
                            foreach ( $setting_options as $key => $value) {
                                    if ( isset($value) && strlen($value) ) {
                                            if ( preg_match('/^services_(facebook|twitter|gplus)_(.*)$/', $key, $matches ) ) {
                                                    $Default_options[services][$matches[1]][$matches[2]] = $value;
                                            }
                                            else {
                                                    $Default_options[$key] = $value;
                                            }
                                    }
                            }
                    }
                    $id = 'socialshareprivacy_' . md5(get_permalink());
                    // $content .= '<div id="'.$id.'"></div>';                $content .= "
                            <script type=\"text/javascript\">
                            (function(\$){
                                    var options = " . json_encode($Default_options) . ";
                                    options.cookie_domain = document.location.host;
                                    options.uri = '" . get_permalink() . "'
                                    $(document).ready(function(){
                                            \$('#$id').socialSharePrivacy(options);
                                    });
                            })(jQuery);
                            </script>
                    ";
                    $content .= '<!-- end wp-socialshareprivacy -->';
                    return $content;
            }

    Nun zum PressWork Teil. Zu Allererst sollte man in WordPress nicht im originalen Theme ändern, sondern man erstellt ein Child-Theme. Das hat den Vorteil, dass Änderungen durch Updates nicht überschrieben werden. Nun kann man sich streiten, ob das für PressWork noch nötig ist, da es ja vermutlich keine Updates mehr gibt.

    Für PressWork gibt es sogar eine eigene Anleitung. Im Prinzip muss man aber nur in wp-content/themes neben den presswork Ordner einen eigenen Ordner anlegen. Darin legt man eine Datei style.css, die minimal folgenden Inhalt hat:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    /*
     Theme Name: PressWork - Child theme
     Theme URI: http://presswork.me
     Description: A basic child theme for PressWork
     Author: c.bavota
     Author URI: http://bavotasan.com/
     Template: presswork
     Version: 0.1
     */
     
    @import url("../presswork/style.css");

    Dieses Child Theme wird jetzt in WordPress unter Themes angezeigt und kann ausgewählt werden. Danach legt man nach der Anleitung eine actions.php im Ordner an und realisiert damit die Anzeige der Buttons:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    < ?php
     
    function share_buts(){
    	$id = 'socialshareprivacy_' . md5(get_permalink());
    	$content .= '<div id="'.$id.'">';
            echo $content;
    }
    add_action('pw_single_post_bottom', 'share_buts');
     
    ?>

    Im Anschluss daran sind die Buttons da wo sie sein sollten, allerdings passt das Layout noch nicht ganz, da das CSS der Buttons nicht ganz sauber ist und teilweise von PressWork Einstellungen überschrieben wird. Dies könnte man im Plugin ändern, welches ja eh schon bearbeitet ist. Aber um für eventuelle Updates gerüstet zu sein, trägt man die entsprechenden Optionen lieber am Ende der style.css des Child-Theme ein:

    13
    14
    15
    16
    17
    18
    19
    
    .social_share_privacy_area ul {
    	list-style-type: none;
    }
    .social_share_privacy_area li {
      clear: none;
    	list-style-type: none;
    }

    Das Ergebnis kann man hier direkt unter dem Artikel bewundern und auch gern ausprobieren… 😉

    About

    Baujahr 1977, Leipziger, Diplom Informatiker, verheiratet, eine Tocher, ein Hund.

    Kommentar verfassen