Add Cool floating share buttons to left of thesis theme using thesis hooks

Gowtham V
2 Min Read

Hai everyone.Here is a Thesis Customization post on how to add a floating share buttons to the left side of the template in thesis theme 2.0.

If you want to add share buttons to your thesis teaser box(home page) do read this post Share buttons to thesis teaser box

Follow these simple steps to add floating share buttons to your thesis theme

1.Open your custom_functions.php file which is located in /public_html/wp-content/themes/thesis_18/custom using an FTP client like filezilla

floating-share-buttons

2.Copy the below php code and paste it in your custom_functions.php file and save it.(Do change the word in bold to your site name before saving)

function Sidebar_social_icons() {
if (is_single()) { ?>
<div id=”floating-count”>
<div>
<g:plusone></g:plusone> <br/>
<script type=”text/javascript”>
tweetmeme_source = ‘mytechshout‘;
</script>
<script type=”text/javascript” src=”https://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=”https://widgets.fbshare.me/files/fbshare.js”></script>
</div>
<div>
<script src=”https://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 = ‘https://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.This code will add a facebook,twitter and Stumbleupon social share buttons,if you wanted to add other share buttons just paste their code in between the  starting and ending of the script and div tags.

4.Now add the below css code to the custom.css file of thesis theme  and save it

#floating-count{border:1px solid #ddd;background:#fff;float:left;margin:0 0 0 -95px;padding:2px;position:fixed;top:255px;z-index:1;width:60px;}

5.You have done it!!!.Now the floating social buttons will be added to your theme.

Hope you have successfully added them.If you have any problems adding the social share buttons,feel free to contact us via comment or mail.Follow us to receive updates about thesis theme customization.We have posted about many topics about thesis customization,you can have a look at it here-Thesis tutorials

Share This Article
4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *