Tutorials Social Warfare DSGVO-sicher

DSGVO sichere Share Buttons ohne Plugin: Highend und voll Responsive

Share Buttons DSGVO sicher ohne Plugin: Highend 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.

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 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 in Dein Theme integrieren.

Kopiere den folgenden Code in die functions.php Deines aktiven Themes hinein:

<?php
    
// Ab hier kopieren
if ( ! function_exists( 'ah_load_fontawesome' ) ) :
/**
 * Lade das asynchrone Font Awesome JavaScript
 * 
 * @author Andreas Hecht
 */

function ah_load_fontawesome() {
?>
<script src="https://use.fontawesome.com/666b9fe6d5.js"></script>    
<?php }
add_action( 'wp_head', 'ah_load_fontawesome' );
endif;

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 und LinkedIn
 * 
 * @author Andreas Hecht
 */
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 fa fa-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 fa fa-twitter" aria-hidden="true"></i><span class="swp_share">Twittern</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 fa fa-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 sticky Social Bar an der linken Seite - Facebook, Twitter und LinkedIn.
 * 
 */
function ah_static_share_aside() { 

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

<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 fa fa-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 fa fa-twitter" aria-hidden="true"></i><span class="swp_share">Twittern</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 fa fa-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

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');
    
    // 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 für die sticky Share-Bar in den Footer 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: DieDemo 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:

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 Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.

Das könnte auch interessant sein...

Das Perfmatters WordPress Performance Plugin macht dein WordPress raketenschnell

Auch Laien machen Ihre Website damit raketenschnell! Lies den Artikel dazu...

Schreibe einen Kommentar

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

Do NOT follow this link or you will be banned from the site!
Teilen
Teilen