Fixierte Sharebox mit CSS und JQuery realisieren

Vielen dürfte eine kleine Box mit Buttons zum Teilen von Inhalten auf Twitter, Facebook oder Google+ links des eigentlichen Inhalts sicherlich schon mal auf diversen Blogs begegnet sein.
Für alle, die sich darunter nichts vorstellen, hier mal ein Screenshot von Mashable.com, auf dem eine solche Box zu sehen ist:

Das tolle bei Mashable ist, dass diese mit dem Inhalt mitscrollt. Man hat also immer die entsprechenden Teilen-Buttons direkt zur Verfügung. Das erhöht die Chance, dass diese auch genutzt werden, sicherlich ein gutes Stück weit. Denn bekanntlich will man es als Leser so bequem wie möglich haben und nicht endlos scrollen und suchen müssen, bis man die entsprechenden Buttons findet. Mag zwar sein, dass der ein oder andere sogar noch Links per Hand kopiert (mache ich selbst teilweise auch noch so), aber die Chance dürfte doch unweit geringer sein.
Insofern ist eine Implementierung der Teilen-Buttons in einer immer sichtbaren Box am linken Contentrand gewiss eine tolle Lösung.

In diesem Artikel möchte ich vorstellen, wie man eine solche umsetzen kann.

Als Inspirationsquelle dient dabei folgender englischsprachige Artikel: http://www.simplebloggertutorials.com/2010/07/add-floating-share-buttons-like.html

Vorabinformationen

Als Ausgangslage dient ein HTML-Gerüst der folgenden Art: Ein Layout mit Header, 960px weitem und zentriertem Hauptteil sowie einem Footer, der sich über die gesamte Seitenbreite erstreckt. Ich nehme hier nur minimale optische Anpassungen vor, damit der Code übersichtlich bleibt.

Das HTML-Gerüst

< !DOCTYPE html>
<html>
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
	<title></title>
 
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	< ![endif]-->
 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
 
</head>
 
<body>
 
	<header>
	</header>
 
	<div id="site_wrap">
 
		<!-- hier kommt spaeter die sharebox hin -->
 
		<section>
		</section>
	</div> <!-- end site_wrap -->
 
	<footer>
	</footer>
 
        <!-- hier kann man z.b. spaeter die javascript-dateien verlinken -->
 
</body>
 
</html>

Die dazugehörige CSS-Definitionen: style.css

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td, input, textarea { margin: 0; padding: 0; }  
 
 
body {
	font-size: 100.1%;
	margin:0px;
	padding:0px;
	background-color:#fff;
}
 
 
header {
	background-color:#000;
}
 
 
#site_wrap {
	margin:0px auto;
	width:960px;
	font-size:0.8em;
	background-color:#e1e1e1;
}
 
 
footer {
	background-color:#000;
}

HTML-Code

Nun kommen wir zum Einbau der eigentlichen Sharebox. Dazu fügen wir den nachfolgenden Code nach … ein.

<!-- fixed scrolling sharebox -->
<div id="sharebox">
 
<div class="share"> <p align="center"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="blogexperiment3">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </p></div>
<div class="share"> <p align="center"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'de'} </script> <g:plusone size="tall"></g:plusone> </p></div>
<div class="share"> <p align="center"><iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:80px;" allowTransparency="true"></iframe></p> </div>
 
</div> <!-- end sharebox -->

Hier sind nun die Buttons von Twitter, Facebook und Google+ eingebunden. Den Code für die Buttons findet sich auch auf den jeweiligen Seiten. Wer obigen Code kopiert, sollte beachten, dass dort bei Twitter-via zum Beispiel der Twitteraccount dieses Blogs eingetragen ist. Für die URL, die für den Facebook-Button benötigt wird, kommt ein kurzer PHP-Code zum Einsatz, der jedoch nur für WordPress-Themes funktioniert.

CSS-Code

Im Folgenden nehmen wir nun die Ausrichtung mittels CSS-Definitionen vor.

 
/* Sharebox */
 
#sharebox {
float: left;
margin-left: -115px;
width:100px;
position: absolute;
padding:2px;
background:#e1e1e1;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
 
#sharebox .share {
padding: 4px;
}

Die Box wird also mehr oder weniger einfach nach links weg aus dem Contentbereich verschoben.
Diese Sharebox wird sich allerdings noch nicht mitbewegen. Diesen Effekt könnte man recht einfach dadurch erreichen, dass man position:absolute einfach durch position:fixed austauscht. Problem ist aber, dass die Sharebox dann auch in den Footerbereich hineinläuft, was wir aber nicht wollen. Also geht es im folgenden nun an eine Umsetzung mithilfe von JQuery.

JQuery-Code: sharebox.js

$(document).ready(function() {
 
/* Sharebox */
 
  var $sharebox   = $("#sharebox"),
  $window    = $(window),
  offset     = $sharebox.offset(),
  bottomPos =  $sharebox.parent().height(),
  topPadding = 15;
 
  $window.scroll(function() {
     if ($window.scrollTop() > offset.top && $window.scrollTop() < bottomPos) {
	$sharebox.stop().animate({
		 marginTop: $window.scrollTop() - offset.top + topPadding
	});
     } else {
	$sharebox.stop().animate({
		 marginTop: 0
	});
    }
  });
 
}); // document ready

Hier wird nun jeweils die aktuelle Fensterposition mit der Position der Box verglichen und diese entsprechend verschoben. Allerdings nur so lange, bis das Ende des Elternelements (parent) erreicht ist, welches hier dem div mit der id=”site_wrap” entspricht.

Dieses Skript muss nun natürlich noch in die HTML-Datei verlinkt werden, damit der Code auch ausgeführt werden kann. Beispielsweise nach dem Footer:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="sharebox.js"></script>

Fertig!



Hat dir dieser Artikel gefallen? Abonniere doch unseren RSS-Feed und bleibe über alle weiteren Updates auf dem Laufenden!



Hinterlasse eine Antwort