Statische Social Share Buttons für Divi und Enfold

social float bar

Artikel wurde aktualisiert am 26.10.2016

Ich habe in den letzten Wochen einige Social Share Plugins für WordPress ausprobiert. Hauptsächlich sollte das Script auch eine vertikale social float Bar darstellen können. Da hab ich auch einige Plugins gefunden. Zwei davon hatte ich länger als zwei Wochen getestet. Leider haben all diese Plugins den Aufbau meiner Seite merklich verschlechtert. Es wurden einfach zu viele Javascript und CSS Files geladen. Teilweise waren die Plugins auch schon veraltet und nicht mehr gewartet. Also hab ich mich entschlossen, mir selbst eine Lösung zu basteln.
Die folgende Lösung ist aber nicht unbedingt für blutige Anfänger gedacht. Was CSS ist und wie du die URL für ein Bild einfügst, solltest du schon wissen.

Zielsetzung

Ich möchte statische soziale Share Buttons in meine Blogs einbauen, die lediglich aus einem Anchor Tag und einem Icon bestehen. Große JS und CSS Dateien sind tabu. Dadurch soll die Seite nicht weiter verlangsamt werden.
Noch mal Kurz:

  • Social Share Bar
  • Statisch und ohne große JS und CSS Dateien
  • Einfach in WordPress und anderen Seiten nutzbar
  • Dienste: Facebook, Twitter, Google+ und Pinterest

Da ich die Template Files immer gerne unangetastet lasse, gebe ich den Code mittels Hook an der passenden Stelle im WordPress Theme aus. Es folgt hier ein Beispiel für das beliebte Enfold Theme und für das ebenfalls sehr beliebte und unzählige male verkaufte Divi Theme von ElegantThemes.
Darunter findest du auch noch eine Variante, die du direkt in dein Template File einfügen kannst, falls du für dein Theme keinen passenden Hook findest.

Social Buttons für das Enfold Theme

Beim Enfold Theme nutze ich den „ava_after_main_menu“ Hook, um die Social Buttons einzufügen.
Folgender Code muss in deine functions.php deines Enfold Themes oder Child Themes:

/* Social float bar*/
function j0e_social_float_bar() {
	echo '<script>
	function PopupCenter(pageURL, title,w,h) {
	var left = (screen.width/2)-(w/2);
	var top = (screen.height/2)-(h/2);
	var targetWin = window.open (pageURL, title, \'toolbar=no, status=no, menubar=no, width=\'+w+\', height=\'+h+\', top=\'+top+\', left=\'+left);
	} 
	</script>
	<strong data-avia-icon-tooltip="<br />Teile diesen Beitrag<br />" class="teile">Teile mich</strong>
	<div class="social-float pos-left icon show shadow radius">
		<a href="javascript:void(0);" title="Bei Facebook empfehlen" onclick="PopupCenter(\'https://www.facebook.com/sharer/sharer.php?u='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&t='.rawurlencode(strip_tags(get_the_title())).'\',\'Facebook\',550,370);" rel="nofollow"><div class="sidebar-content ico-facebook"></div></a>
		<a href="javascript:void(0);" title="Bei Twitter empfehlen" onclick="PopupCenter(\'https://twitter.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&text='.rawurlencode(strip_tags(get_the_title())).'&via=slotnerd&hashtags=slotcar\',\'Twitter\',550,330);" rel="nofollow"><div class="sidebar-content ico-twitter"></div></a>
		<a href="javascript:void(0);" title="Bei Google+ empfehlen" onclick="PopupCenter(\'https://plus.google.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'\',\'Google+\',550,630);" rel="nofollow"><div class="sidebar-content ico-google-plus"></div></a>
		<a href="javascript:void(0);" title="Bei Pinterest empfehlen" onclick="PopupCenter(\'http://pinterest.com/pin/create/button/?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&media='.urlencode(wp_get_attachment_url(get_post_thumbnail_id($post->ID))).'&description='.rawurlencode(strip_tags(get_the_title())).'\',\'Google+\',550,630);" rel="nofollow"><div class="sidebar-content ico-pinterest"></div></a>
	</div>';
}
add_action('ava_after_main_menu', 'j0e_social_float_bar');

Social Buttons für das Divi Theme

Beim Divi Theme greife ich auf den „the_content“ Filter zurück. Dieser ist bei jedem WordPress Theme nutzbar.
Dieser Code muss in deine functions.php deines Divi Themes oder Child Themes:

/* Social float bar*/
function j0e_social_float_bar($content) {
	$content.= '<script>
	function PopupCenter(pageURL, title,w,h) {
	var left = (screen.width/2)-(w/2);
	var top = (screen.height/2)-(h/2);
	var targetWin = window.open (pageURL, title, \'toolbar=no, status=no, menubar=no, width=\'+w+\', height=\'+h+\', top=\'+top+\', left=\'+left);
	} 
	</script>
	<strong class="teile" title="Teile diesen Beitrag">Teile mich</strong>
	<div class="social-float pos-left icon show shadow radius">
		<a href="javascript:void(0);" title="Bei Facebook empfehlen" onclick="PopupCenter(\'https://www.facebook.com/sharer/sharer.php?u='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&t='.rawurlencode(strip_tags(get_the_title())).'\',\'Facebook\',550,370);" rel="nofollow"><div class="sidebar-content ico-facebook"></div></a>
		<a href="javascript:void(0);" title="Bei Twitter empfehlen" onclick="PopupCenter(\'https://twitter.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&text='.rawurlencode(strip_tags(get_the_title())).'&via=slotnerd&hashtags=slotcar\',\'Twitter\',550,330);" rel="nofollow"><div class="sidebar-content ico-twitter"></div></a>
		<a href="javascript:void(0);" title="Bei Google+ empfehlen" onclick="PopupCenter(\'https://plus.google.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'\',\'Google+\',550,630);" rel="nofollow"><div class="sidebar-content ico-google-plus"></div></a>
		<a href="javascript:void(0);" title="Bei Pinterest empfehlen" onclick="PopupCenter(\'http://pinterest.com/pin/create/button/?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&media='.urlencode(wp_get_attachment_url(get_post_thumbnail_id($post->ID))).'&description='.rawurlencode(strip_tags(get_the_title())).'\',\'Google+\',550,630);" rel="nofollow"><div class="sidebar-content ico-pinterest"></div></a>
	</div>';
	return $content;
}
add_filter('the_content', 'j0e_social_float_bar');

Social Buttons direct ins Template File

Den folgenden Code musst du direkt in dein Template File kopieren. Je nach Theme vielleicht in die header.php oder single.php.
Mit leichten Änderungen kannst du den Code auch in anderen CMS nutzen.

<script>
	function PopupCenter(pageURL, title,w,h) {
	var left = (screen.width/2)-(w/2);
	var top = (screen.height/2)-(h/2);
	var targetWin = window.open (pageURL, title, 'toolbar=no, status=no, menubar=no, width='+w+', height='+h+', top='+top+', left='+left);
	} 
</script>
<strong class="teile" title="Teile diesen Beitrag">Teile mich</strong>
<div class="social-float pos-left icon show shadow radius">
		<a href="javascript:void(0);" title="Bei Facebook empfehlen" onclick="PopupCenter('https://www.facebook.com/sharer/sharer.php?u='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&t='.rawurlencode(strip_tags(get_the_title())).'','Facebook',550,370);" rel="nofollow"><div class="sidebar-content ico-facebook"></div></a>
		<a href="javascript:void(0);" title="Bei Twitter empfehlen" onclick="PopupCenter('https://twitter.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&text='.rawurlencode(strip_tags(get_the_title())).'&via=slotnerd&hashtags=slotcar','Twitter',550,330);" rel="nofollow"><div class="sidebar-content ico-twitter"></div></a>
		<a href="javascript:void(0);" title="Bei Google+ empfehlen" onclick="PopupCenter('https://plus.google.com/share?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'','Google+',550,630);" rel="nofollow"><div class="sidebar-content ico-google-plus"></div></a>
		<a href="javascript:void(0);" title="Bei Pinterest empfehlen" onclick="PopupCenter('http://pinterest.com/pin/create/button/?url='.urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'&media='.urlencode(wp_get_attachment_url(get_post_thumbnail_id($post->ID))).'&description='.rawurlencode(strip_tags(get_the_title())).'','Google+',550,630);" rel="nofollow"><div class="sidebar-content ico-pinterest"></div></a>
</div>

CSS Formatierungen

Egal welche der drei obigen Varianten du nutzt, diesen CSS Code musst du in das „Quick CSS“ Feld von Enfold, in das „Custom CSS“ Feld von Divi, oder in deine styles.css kopieren. Erst damit werden die Buttons auch richtig in deinem Theme positioniert und angezeigt. Von Theme zu Theme musst du vielleicht noch Anpassungen vornehmen. Auf jeden Fall solltest du aber die Links zu den vier Icons anpassen.

/* BEGIN SOCIAL SIDEBAR CSS */
.social-float {
position: fixed;
z-index: 2000;
top: 198px;
margin-left: -55px !important;
line-height: 1em;
}
.teile {
position: fixed;
z-index: 2000;
top: 261px;
margin-left: -129px !important;
line-height: 1em;
}
.social-float a {color:#fff !important;}
.social-float a:hover {text-decoration:none !important;}
.pos-left.show .sidebar-content:hover {width:64px;}
.icon .sidebar-content {width:32px;height:32px;margin-bottom:6px;}
.pos-left.icon .share-button, .pos-right.icon .share-button {width:64px;height:32px}
.icon .sidebar-content, .icon-text .sidebar-content {background-position:center center;background-repeat:no-repeat}
.ico-facebook {background-color:#3d5999;background-image:url("/wp-content/themes/enfold/icons/facebook.png")}
.ico-twitter {background-color:#00aced;background-image:url("/wp-content/themes/enfold/icons/twitter.png")}
.ico-pinterest {background-color:#d73532;background-image:url("/wp-content/themes/enfold/icons/pinterest.png")}
.ico-google-plus {background-color:#bd301c;background-image:url("/wp-content/themes/enfold/icons/google-plus.png")}
.pos-left.radius .sidebar-content {
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px}
.pos-left.shadow .sidebar-content {
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
-moz-box-shadow:inset 0 -4px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);
}
.pos-left.radius .sidebar-content {
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-khtml-border-radius:3px}
.pos-left.shadow .sidebar-content {
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
-moz-box-shadow:inset 0 -4px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);
}

 


Mit leichten Änderungen machst du aus der vertikalen Leiste auch schnell eine horizontale Leiste, für über oder unter dem Post.

Icons

Die vier Icons kannst du hier downloaden. Einfach mit der rechten Maustaste rauf klicken und „Bild speichern unter..“ wählen. Du kannst aber auch ganz andere Icons nutzen.
Facebook Icon Twitter Icon Google+ Icon Pinterest Icon

Zusammenfassung

Wie die Social Floating Bar aussieht, siehst du hier live auf j0e.org. Ich nutze genau diesen Code auch auf meinen eigenen Seiten.
Ein paar kurze Zeile Javascript habe ich dann doch genutzt, damit das Share Fenster in einem praktischen Popup geöffnet werden kann. Das beeinträchtigt aber weder die Ladezeit, noch den Seitenaufbau.
Mir gefällt an der Lösung die einfache Anpassbarkeit. So ist dieses Script praktisch universal für social sharing buttons einsetzbar.

Viel Spaß damit!

Verfasst in: WordpressTags: , ,

Willst du an der Diskussion teilnehmen?


Kommentar verfassen

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

Kommentar *

Name *
E-Mail *
Webseite