Floating Facebook, Twitter, Google+ to your SMF.

Mick in Tutorials on Sep 30, 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>






Tagged with: facebook twitter google + script 


Mick

Mick G

  idesignsmf.com

    

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 and has a weakness for Pizza.

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,211 SMF owners prefer our themes



6 Comments

Thanks it works great  :D
1

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

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

Demo added.  ;)
4

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

Cool!
6








  Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.