Add floating social icons to Thesis WordPress

In this tutorial i will show you how to add floating social icons to Thesis WordPress .Copy and paste this code for the floating social icons into your Custom Functions.

Note: Always take a backup before any type of modification.

[php]

// Make the URL to share
if( is_singular() ) {
$url = get_permalink();
$text = the_title(”, ”, false);
} else if ( is_category() || is_tag() ) {
if(is_category() ) {
$cat = get_query_var(‘cat’);
$url = get_category_link($cat);
} else {
$tag = get_query_var(‘tag_id’);
$url = get_tag_link($tag);
}
$text = single_cat_title(”, false) . ‘ on ‘ . get_bloginfo(‘name’);
} else {
$url = get_bloginfo(‘url’);
$text = get_bloginfo(‘name’) . ‘ – ‘ . get_bloginfo(‘description’);
}

// Add social buttons to the theme using thesis hook

add_action(‘thesis_hook_after_content’, ‘show_social_buttons’, 99);

// Add google plus js to the head section of the theme

function google_plus_one_integration() {
?>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<?php
}
add_action(‘wp_head’, ‘google_plus_one_integration’);

// this creates your social icons

function show_social_buttons() {

// I want to show social icons in post and not in homepage

if ( is_singular() ){
?>

<div id="social-float-wrapper" >

<div class="smf-twitter">
<!– Twitter Code Goes Here –>
<a href="http://twitter.com/share" data-count="vertical" data-via="problogdesign" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div class="smf-facebook">
<!– Facebook Code Goes Here –>
<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
</div>

<div class="smf-plusone">
<!– Google +1 Code Goes Here –>
<!– Place this tag where you want the +1 button to render –>
<g:plusone size="medium" href="<?php echo $url; ?>"></g:plusone>
</div>

<div class="smf-stumbleupon">
<!– stumbleupon Code Goes Here –>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

<div class="smf-linkedin">
<!– linkedin Code Goes Here –>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>
</div>

</div><!– /social-float –>

<?php } }

[/php]

Now its time to do some css to float this social icons left of the website.Add this css to your custom.css

[php]
/**

* Floating Social Buttons

*/

#social-float-wrapper {
background-color: #FFFFFF;
border: 5px solid rgba(180, 180, 180, 0.7);
border-radius: 8px 8px 8px 8px;
left: 50px;
padding: 10px 5px;
position: fixed;
text-align: center;
top: 50px;
width: 55px;
}

.smf-twitter {
height: 62px;
margin-bottom: 10px;
}

.smf-facebook {
height: 60px;
margin-bottom: 10px;
}

.smf-plusone {
height: 60px;
margin-bottom: 10px;
}
.smf-stumbleupon {
height: 60px;
margin-bottom: 10px;
}
.smf-linkedin {
height: 60px;
margin-bottom: 10px;
}

[/php]

So now you are ready to add this nice social panel to your website.