Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

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 Tacos and Pizza.


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




Latest Discussions

Join the conversation

Our Most Popular Features