Flytande Sharebar i WordPress

Ni har kanske lagt märke till att jag har en flytande sharebar till vänster om inläggen? Med flytande menar jag att den följer med när du som läser scrollar nedåt eller uppåt på sidan. På så sätt är de delningsmöjligheterna alltid tillgängliga och chansen till klick större. Det finns säkert något fiffigt plugin som gör detta men med lite css och php så är det fixat på noll tid.

I single.php eller om du kör TwentyEleven content-single.php slänger du in följande kod:

<div class="share-post">
   <a href="http://twitter.com/share" class="twitter-share-button"
      data-url="<?php the_permalink(); ?>"
      data-text="<?php the_title(); ?>"
      data-via="SebHallenius"
      data-count="vertical">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=60&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; margin-bottom:5px; margin-left: 2px; overflow:hidden; width:60px; height:60px"></iframe>
<g:plusone size="tall"></g:plusone>
</div>

Lägg till följande script i din footer.php för att knapparna ska dyka upp.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'sv'}
</script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Lägg in följande css i din style.css och modifiera efter dina behov.

.share-post {
background: #F9F8F8;
position: fixed;
float: left;
width: 60px;
top: 35%;
z-index: 99;
margin-left: -100px;
border: 1px solid #e7e7e7;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 10px;
}

Gillade du inlägget?

   
       

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *