Posting the html, css & javascript code for floating social icons shown in the attached image below. The code was created using this link but it didn’t work for Facebook. Pasting here for reference and later use. Someone with html, css and javascript knowledge may find it helpful.
Here’s the code
[html]
<html>
<head>
<title>Floating Social Icons, Facebook, Twitter, LinkedIn, Digg & Google Plus</title>
<!– The Javascript code to be put in <HEAD> section –>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=215612231865848";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<!– The css code to be put in <HEAD> section –>
<style type="text/css">
* html #ss-box{
position: absolute;
}
#ss-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:px;-moz-border-radius:px; -webkit-border-radius:px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#ss-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#ss-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<!– PAGE HTML STARTS. Vary for pages.. placing just for an example. Replace with your own HTML –>
<div style="width: 200px;
margin-left: 120px;
background: yellow;">
<ul>
<li><code>href</code> – the URL to like. The XFBML version defaults to the current page. </li>
<li><code>send</code> – specifies whether to include a <a href="http://developers.facebook.com/docs/reference/plugins/send/">Send button</a> with the Like button. This only works with the XFBML version. </li>
<li><code>layout</code> – there are three options.
<ul>
<li><code>standard</code> – displays social text to the right of the button and friends’ profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is ‘recommend’ by and increases by 60px if send is ‘true’. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos). </li>
<li><code>button_count</code> – displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels. </li>
<li><code>box_count</code> – displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.</li>
</ul></li>
<li><code>show_faces</code> – specifies whether to display profile photos below the button (standard layout only) </li>
<li><code>width</code> – the width of the Like button. </li>
<li><code>action</code> – the verb to display on the button. Options: ‘like’, ‘recommend’ </li>
<li><code>font</code> – the font to display in the button. Options: ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’ </li>
<li><code>colorscheme</code> – the color scheme for the like button. Options: ‘light’, ‘dark’ </li>
<li><code>ref</code> – a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
<ul>
<li><code>fb_ref</code> – the ref parameter </li>
<li><code>fb_source</code> – the stream type (‘home’, ‘profile’, ‘search’, ‘ticker’, ‘tickerdialog’ or ‘other’) in which the click occurred and the story type (‘oneline’ or ‘multiline’), concatenated with an underscore.</li>
</ul></li>
</ul>
</div>
<!– PAGE HTML ENDS. Vary for pages.. placing just for an example. Replace with your own HTML –>
<!–Social Icon HTML starts, place before body ending i.e. </BODY> tag. You may also put it in a different file and include the file in footer using programming language like php or perl–>
<div id="fb-root"></div><!– Required to load Facebook buttons –>
<div id="ss-box">
<div id="ssl-box">
<div id="icon_facebook">
<div class="fb-like" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true"></div>
</div>
<div id="icon_googleplus">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div id="icon_digg">
<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>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>
</div>
</div>
<!–Social Icon HTML ends, placed before body ending i.e. </BODY> tag –>
</body>
</html>
[/html]
