Tutorials Social Warfare DSGVO-sicher

Social Warfare DSGVO sichere Share Buttons nachgebaut und voll Responsive [Update]

Social Warfare DSGVO sichere Share Buttons nachgebaut und voll Responsive

Eines der coolsten Share-Plugins ist Social Warfare. Doch es ist nicht DSGVO sicher. Wir bauen Social Warfare als DSGVO sichere Share Buttons nach.

Social Warfare ist eines der besten Share-Plugins für WordPress. Die coolste Funktion ist die Kombination von »normalen« Share Buttons unterhalb eines Artikels und einer »Floating Share Bar«, die immer am linken Rand eines Beitrags zu sehen ist, wenn die normalen Buttons nicht im Sichtfeld des Besuchers sind.

Suchmaschinenoptimierung

1.000 Seiten Praxiswissen und Profitipps zu Google
Dieses Buch sichert Ihnen ein Top-Ranking bei Google. Einsteiger und Fortgeschrittene finden gleichermaßen fundierte Informationen zu allen relevanten Bereichen der Suchmaschinen-Optimierung. Die 9. Auflage wurde ergänzt um viele neue Themen: SEO-freundliche Relaunches, Google Search Console und alternative Suchmaschinen usw...

Nur 49,90€

Auf Amazon kaufen

Beispiel im Screenshot: Share-Bar eingeblendet.

DSGVO sichere Share Buttons ohne Plugin: Highend und voll Responsive

Die Share Bar an der linken Seite. Sichtbar, solange die Buttons unterhalb des Artikels nicht angezeigt werden.

Beispiel im Screenshot: Buttons sichtbar, Share Bar ausgeblendet.

DSGVO sichere Share Buttons ohne Plugin: Highend und voll Responsive

Buttons eingeblendet, Share-Bar ausgeblendet.

Auf diese Weise sind die Share Buttons immer im direkten Blickfeld des Besuchers. Das wiederum steigert die Anzahl der Shares eines Artikels.

Wir bauen DSGVO sichere Share Buttons ohne Plugin nach

Bevor wir anfangen, solltest Du ein Child-Theme für dein aktives Theme erstellen, falls Du es noch nicht getan hast. Dann kannst Du auch gefahrlos Updates machen.

Damit die Buttons auch wirklich DSGVO sicher werden, muss leider auf die Anzeige der Shares verzichtet werden. Die Buttons zeigen also nicht an, wie oft ein Artikel bereits geteilt wurde.

Dafür kannst Du für die Buttons garantiert nicht abgemahnt werden. Denn es sind rein statische Links, die einfach nur auf die Seite mit der Teilen-Funktion des jeweiligen Social Networks weiterleiten.

Wir erstellen die Buttons für Facebook, Twitter, Pinterest, Xing und LinkedIn.

1

DSGVO sichere Share Buttons erstellen: Du brauchst Font Awesome

Fast jedes Theme nutzt heute den beliebten Icon-Font Font Awesome. Sollte Dein Theme das nicht tun, dann kannst Du Font Awesome ganz einfach DSGVO-sicher in Dein Theme integrieren.

Zuerst musst Du zur Website von Font Awesome und Dir den Icon-Font downloaden.

Zur Website von Font Awesome »

Dort gehst Du auf Download und lädst Dir die Version 4 herunter.

Der Download-Link der Version 4 von Fontawesome

Klick den richtigen Button. Nur in Version 4 sind alle Icons kostenfrei enthalten.

Danach entpackst Du den Zip-Ordner und lädst den Ordner fonts in das Verzeichnis Deines aktiven Themes hinein.

Aus dem Unterordner CSS nimmst Du das font-awesome.css und öffnest es in einem HTML-Editor. Hast Du noch keinen, lade Dir Brackets herunter. Ändere den oberen Bereich wie auf dem Screenshot ersichtlich:

Die Änderungen am font-awesome.css

Ein Klick öffnet die volle Auflösung.

Danach lade die Datei in den Theme-Ordner css hoch. Hat Dein Theme keinen Ordner namens css, erstelle einen.

2

DSGVO sichere Share Buttons erstellen: Die WordPress Funktionen

Um DSGVO sichere Share Buttons einsetzen zu können, brauchen wir zwei WordPress-Funktionen. Die erste zeigt die normalen Share Buttons an und die zweite dann die sticky Share-Bar an der linken Seite Deines Browser-Fensters.

Beide Code-Snippets kommen wieder in die functions.php Deines aktiven Themes.

Teil eins: Die normalen Share Buttons

<?php

// Ab hier kopieren

if ( ! function_exists( 'ah_static_sharebuttons' ) ) :
/**
 * Statische Share-Buttons unterhalb der Artikel  - Facebook, Twitter, Pinterest, Xing und LinkedIn
 * 
 */
function ah_static_sharebuttons() { 

global $post;
?>

<div class="swp_social_panel swp_flat_fresh swp_default_full_color swp_individual_full_color swp_other_full_color scale-100 scale-full_width swp_one" data-position="none" data-float="left" data-float-mobile="bottom" data-count="0" data-floatcolor="#ffffff">
<div class="nc_tweetContainer swp_facebook" data-network="facebook">
<a class="facebook nc_tweet" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow">
<span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-facebook" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>
<div class="nc_tweetContainer swp_twitter" data-network="twitter">
<a class="twitter nc_tweet" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-twitter" aria-hidden="true"></i><span class="swp_share">Twittern</span></span></span></span></a>
</div>
    
<div class="nc_tweetContainer swp_pinterest" data-network="pinterest">
<a href="//pinterest.com/pin/create/link/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&description=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow" class="nc_tweet"  title="Auf Pinterest teilen"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-pinterest-p" aria-hidden="true"></i><span class="swp_share">Pinnen</span></span></span></span>
</a>
</div>   
    
<div class="nc_tweetContainer swp_xing" data-network="xing">
<a href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo rawurlencode(get_the_title()); ?>;provider=<?php echo rawurlencode(get_bloginfo('name')); ?>" target="blank" rel="nofollow" class="nc_tweet"  title="Bei XING empfehlen"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-xing" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>

<div class="nc_tweetContainer swp_linkedin" data-network="linkedin">
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" target="blank" rel="nofollow" class="nc_tweet"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-linkedin" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>
</div>
<?php }
endif;

 

Teil zwei: Die sticky Share Bar

Die Share-Bar wird nicht auf der Startseite oder Blogseite angezeigt. Nur auf Seiten und auf Beiträgen.

<?php

// Ab hier kopieren

if ( ! function_exists( 'ah_static_share_aside' ) ) :
/**
 * Statische Share-Buttons als floating Social Bar an der linken Seite - Facebook, Twitter, Pinterest, Xing und LinkedIn
 * 
 */
function ah_static_share_aside() { 

    global $post;
    
    if ( ! is_front_page() ) :
?>

<div class="swp_social_panelSide swp_social_panel swp_default swp_default_full_color swp_individual_full_color swp_other_full_color slide swp_float_left swp_side_center scale-100 float-position-center-left swp_three" data-position="none scale-100" data-float="left" data-count="3" data-floatcolor="#ffffff" data-screen-width="900" data-transition="slide" data-float-mobile="bottom" style="top: 79px; left: 5px;">
<div class="nc_tweetContainer swp_facebook" data-network="facebook">
<a class="facebook nc_tweet" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow">
<span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-facebook" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>
<div class="nc_tweetContainer swp_twitter" data-network="twitter">
<a class="twitter nc_tweet" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-twitter" aria-hidden="true"></i><span class="swp_share">Twittern</span></span></span></span></a>
</div>
<div class="nc_tweetContainer swp_pinterest" data-network="pinterest">
<a href="//pinterest.com/pin/create/link/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&description=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow" class="nc_tweet"  title="Auf Pinterest teilen"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-pinterest-p" aria-hidden="true"></i><span class="swp_share">Pinnen</span></span></span></span>
</a>
</div>    
<div class="nc_tweetContainer swp_xing" data-network="xing">
<a class="xing" href="http://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo rawurlencode(get_the_title()); ?>;provider=<?php echo rawurlencode(get_bloginfo('name')); ?>" target="blank"  title="Bei XING empfehlen"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-xing" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>
<div class="nc_tweetContainer swp_linkedin" data-network="linkedin">
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" target="blank" rel="nofollow" class="nc_tweet"><span class="swp_count swp_hide" style="transition: padding 0.1s linear;"><span class="iconFiller"><span class="spaceManWilly"><i class="sw icon-linkedin" aria-hidden="true"></i><span class="swp_share">Teilen</span></span></span></span>
</a>
</div>   
</div>
<?php endif; }
endif;

3

DSGVO sichere Share Buttons erstellen: Das CSS und das JavaScript

Das CSS sorgt für die Darstellung, das JavaScript für die Effekte und die responsive Darstellung.

Du kannst Dir beide Dateien hier fertig als .zip herunterladen.

Zip-Datei herunterladen

Öffne den .zip Ordner und lade beide Dateien per FTP in Deinen Theme-Ordner hoch. Für eine bessere Übersicht kommt die CSS-Datei in einen Ordner namens css und die JavaScript-Datei in einen Ordner namens js.

Sind diese Ordner in Deinem Theme-Ordner noch nicht enthalten, erstelle sie.

4

Die CSS- und JavaScript-Datei laden

Dieser Code lädt auch die font-awesome.css Datei.

Kopiere den folgenden Code in die functions.php hinein:

<?php

// Ab hier kopieren
if ( ! function_exists( 'ah_load_share_files' ) ) :
/**
 * Lade die Share-Button Dateien
 * 
 * @author Andreas Hecht
 */
function ah_load_share_files() {
    
    // enqueue share css for static share buttons
    wp_register_style( 'share-css' );
    wp_enqueue_style('share-css', get_stylesheet_directory_uri() .'/css/share.css');
    
    wp_register_style( 'fontawesome-css' );
    wp_enqueue_style('fontawesome-css', get_stylesheet_directory_uri() .'/css/font-awesome.css');
    
    // enqueue share jsfor static share buttons
    wp_register_script( 'share-js' );
    wp_enqueue_script('share-js', get_stylesheet_directory_uri() .'/js/share.js');

}
add_action('wp_enqueue_scripts', 'ah_load_share_files');
endif;

5

Der Einbau der Share-Buttons in Dein Theme

Die Share Buttons

Den folgenden Tag setzt Du dorthin, wo die Share-Buttons erscheinen sollen. Die single.php wäre fast immer die richtige Datei. Kopiere den Code unterhalb von the_content(); hinein.

<?php ah_static_sharebuttons(); ?>

Beispiel:

An diese Stelle muss der Tag der Share-Buttons.

An diese Stelle muss der Tag der Share-Buttons.

Die Sticky Share Bar

Dieser Code kommt auch in die functions.php Deines Themes hinein. Er sorgt für die automatische Platzierung der Share-Bar an der linken Seite Deiner Website.

<?php

// Ab hier kopieren
if ( ! function_exists( 'ah_static_share_aside_load' ) ) :
/**
 * Funktion um die Sticky Share-Bar in den Footer zu laden
 * 
 * @author Andreas Hecht
 */
function ah_static_share_aside_load() {
    
    ah_static_share_aside();
}
add_action( 'wp_footer', 'ah_static_share_aside_load' );
endif;

Jetzt hast Du DSGVO sichere Share Buttons in Dein Theme eingebaut. Du erhälst exakt die Optik wie die Buttons von Social Warfare und auch die gleichen Animationen.

Natürlich habe ich ein bisschen geklaut bei Social Warfare, doch das darfst Du nicht verraten:-)

DSGVO sichere Share Buttons: Die Demo der Buttons und die responsive Ansicht

Wenn Du eine Demo sehen möchtest, dann kannst Du das auf dieser Seite tun. Ich verwende genau diesen Code hier in meinem Theme.

Responsive auf einem Smartphone sehen die Buttons so aus:

Einstieg in WordPress 5

Mit Peter Müller erstellen Sie Ihre eigene WordPress-Website
Sie planen eine eigene Website mit WordPress und suchen einen einfachen Einstieg? Dann liegen Sie mit dem neuen Buch von Peter Müller genau richtig. Er zeigt Ihnen, wie Sie mit WordPress eine eigene Webseite erstellen und veröffentlichen – auch ohne Vorkenntnisse. In einfachen Kapiteln lernen Sie WordPress als Redaktionssystem kennen und bauen Schritt für Schritt eine Onlinepräsenz auf.

Nur 24,90€

Auf Amazon kaufen

Die Buttons auf einem iPhone.

Andreas Hecht

Andreas Hecht

Er entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er SEO Experte und bringt Deine Website in die Top-Rankings von Google.

Das könnte auch interessant sein...

Suchmaschinenoptimierung

1.000 Seiten Praxiswissen und Profitipps zu Google
Dieses Buch sichert Ihnen ein Top-Ranking bei Google. Einsteiger und Fortgeschrittene finden gleichermaßen fundierte Informationen zu allen relevanten Bereichen der Suchmaschinen-Optimierung. Die 9. Auflage wurde ergänzt um viele neue Themen: SEO-freundliche Relaunches, Google Search Console und alternative Suchmaschinen usw...

Nur 49,90€

Auf Amazon kaufen

4 Kommentare Kommentar hinzufügen

  1. Hallo Dirk, ich wollte mal fragen, warum du Social Warefare nicht selbst auf dieser Seite benutzt? LG Karsten

  2. Schöner Tipp die Share-Buttons ohne Plugin zu realisieren. Aber wenn ich für die Icons die Fonts von fontawesome.com lade, dann ist das doch nicht wirklich was anderes, als die Google Fonts vom Google-Server zu laden oder?

    Auch da könnte man ja Daten sammeln. Kann aber natürlich auch sein, dass ich das komplett falsch verstehe…

    • Hallo Dirk,

      danke, dass Du mich darauf aufmerksam gemacht hast. Du hast natürlich recht, es ist nichts anderes. Ich überarbeite das Tutorial.

      • Prima, dann werde ich das mal so auf der einen oder anderen Seite von mir einbauen. Gerade die sticky Share Bar finde ich interessant. Mal schauen, ob es da mehr Aktivitäten der Nutzer gibt…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Pinnen
Teilen
Teilen