How to Add Floating Social Media Buttons in Thesis

Having Floating Social Media Icons set on your blog either on the left or right side of the page would be a good choice, since the icons will always be available on the screen when your readers visit the page.

Here are the instructions on how to accomplish this:

First thing first: Backup your current custom_functions.php & your Custom.css files before making any changes.

1.-Open your Dashboard go to –>Thesis –>Thesis Custom File Editor–>custom/custom_functions.php.

2- Copy the following php code and paste inside your custom_functions.php file.

function Sidebar_social_icons() {
if (is_single()) { ?>
<div id="Sidebar">
<div>
<script type="text/javascript">
tweetmeme_source = 'jrmarketingtips';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div>
<script>var fbShare = {
url: <?php the_permalink() ?>,
size: 'large',
badge_text: 'fff',
badge_color: '3b5998',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>
<div>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div>
<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></a>
</div>
</div>
<?php }
}
add_action('thesis_hook_before_header', 'Sidebar_social_icons' );

3.-Make sure you change the tweetmeme_source = ‘jrmarketingtips’; including yours instead.

4.-Save the file.

5.-Now select the custom.css file in the drop down menu, and click Edit Slected File button.

6.-Add the following code:

#Sidebar {
background-color:#fff;
border:1px solid #ccc;
bottom:50px;
left:30px;
position:fixed;
}

#Sidebar .float {
padding:5px;
}

7.-Save the file

Now you can see this code in action on my blog!