Floating Facebook, Twitter, Google+ to your SMF.

Written by Mick in Tutorials on 30 Sep 2011



Why do we need these social media Facebook, Twitter, Google +1, Digg, StumbleUpon buttons? Social media is a great way to drive more traffic to your sites. Get these buttons means that you will have a better chance to make your site become popular. In this tutorial I will show you the way to add floating buttons to your smf forum. All you need to do is following these simple steps:

Create a top HTML block using your favorite portal and activate. Yes, that simple.

Demo: Share

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

<style>
#floatingbuttons {
      background:#F9F9F9;
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));
      background:-moz-linear-gradient(top, #fff, #F9F9F9);
      border:1px solid #ccc;
      float:left;
      padding:0 0 3px 0;
      position:fixed;
      bottom:15%;
      left:0;
      z-index:10;
      border-radius:5px 5px 5px 5px;
      box-shadow:2px 2px 5px rgba(0,0,0,0.3);
}
#floatingbuttons .floatbutton {
      float:left;
      clear:both;
      margin:5px 4px 0 4px;
}
.addbuttons {
     clear:both;
     text-align:center;
     padding-top:5px;
}
.addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
     color:#000;
     background:none;
     font-family:arial, sans-serif;
     display:block;
     font-size:9px;
     font-weight:bold;
     text-decoration:none;
     line-height:11px;
}
.addbuttons a:hover span {
    color:#fff;
    background:none;
    text-decoration:underline;
}
</style>
<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script>
<!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

<div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='stumbleupon'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='floatbutton' id='digg'><a class="DiggThisButton DiggMedium"></a></div>
<div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div></div>
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

6 Comments

I have recently found out that using this social block was making my site laggy and was wondering if anyone else has experienced the same?
#2
Quote from: saffz on 28 Oct 2011
I have recently found out that using this social block was making my site laggy and was wondering if anyone else has experienced the same?

It works fine for me :P
#3
I take it back Mick I have had it running on my topsite and its works a treet Thanks
Apologies for my previous post.  :-[
#5

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.