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 hookadd_action(‘thesis_hook_after_content’, ‘show_social_buttons’, 99);// Add google plus js to the head section of the themefunction 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 iconsfunction show_social_buttons() {// I want to show social icons in post and not in homepageif ( 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&href=<?php echo urlencode($url); ?>&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&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.