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.
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.
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.
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
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.
[button text=“Zur Website von Font Awesome »“ url=“https://fontawesome.com/v4.7.0/“ open_new_tab=“true“ style=“solid“ color=“green“]Dort gehst Du auf Download und lädst Dir die Version 4 herunter.
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:
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
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
Das CSS sorgt für die Darstellung, das JavaScript für die Effekte und die responsive Darstellung.
Sind diese Ordner in Deinem Theme-Ordner noch nicht enthalten, erstelle sie.
Download ZIP-Datei mit dem JS und CSS
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
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.
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:-)
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.
