Floating Social Media for SMF

[Mick.]

Floating Social Media for SMF
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: http://idesign360.com/community/index.php/topic,255.0.html

Code Select Expand

<script src='http://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>

[petermichaelbauer]

Where do I paste this?

[Mick.]

If you use a portal, paste into an html block.

If not, open index.template.php and add it just before the </head>

[oyedepo1]

Works great but I don't want it by the left. How do I align it to the right?

[Mick.]

Works great but I don't want it by the left. How do I align it to the right?

In the code find:

Code Select Expand

float:left;

and replace left for right.

[tMicky]

thanks, your tutorials are awesome .

Do you have any more simple portal tricks, like how to get a really nice homepage.

kinda like this site - http://dev2.theforumguys.com/

[Kindred]

you think that is a good homepage?

Splash pages like that went out about 5 years ago....   Your homepage should have CONTENT

[tMicky]

you think that is a good homepage?

Splash pages like that went out about 5 years ago....   Your homepage should have CONTENT

I would add some more info, but just looking for a way to achieve something similar.

[Sakurachan]

you think that is a good homepage?

Splash pages like that went out about 5 years ago....   Your homepage should have CONTENT

Splash pages are still a thing for some people. 

[ApplianceJunk]

thanks, your tutorials are awesome .

Do you have any more simple portal tricks, like how to get a really nice homepage.

kinda like this site - http://dev2.theforumguys.com/

I had to click on four different things on that site before I could get it to do something, lol...

[tMicky]

How can one add an email button to the floating bar?

thanks

[kazi_shahin]

Thanks.

Its working but not properly.

Google +1 is missing.

[colin7291]

In Blogging Help | Tags: Floating Media, Facebook, Share, Twitter, Pininterest, Stumbleupon | Flag
It occurred to me once when I needed the same type of floating / static social media Icon (like facebook share , twitter retweet , pinterest, digg and etc) I used to have on my blogger on smf but couldn't find exactly what i needed. the modification (mod) that looks like it didn't have all the features i was looking for So I settled for this perfect code.

[platinummack]

Does this enable you to add your social profiles as the moderator or a way for forum users to share posts to "their" social media profiles? I'm looking for the latter