How to Add Floating Social Media Buttons in Thesis

by Jenny

in Wordpress Tips

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!

Leave a Comment

Previous post:

Next post: