Floating social media share icons on floating style will bring more attraction on it. Here is the tutorial for how to add Floating Facebook Like, Tweet and Google+ in WordPress Thesis without Plugin.
This floating bar won’t display on home, category and archive page. Floating Social share bar will be displayed only on post page, that is single page.
Step 1: WordPress Admin -> Thesis (Left side) -> Skin Editor -> HTML Editor
Step 2: Click on Container, which is having columns and sidebar. Then give Hook Name as “floating”
Step 3: Directory -> wp-content ->thesis -> skins -> YOUR SKIN -> custom.php
I am using default “classic-r” skin, so directory path for me is Directory -> wp-content ->thesis -> skins -> classic-r -> custom.php
Step 4: Place the code in custom.php file
- if(is_single()) – this condition will check is this page single page or category page.
- get_permalink($post->ID) – this function will return the current post/article URL
- get_the_title($post->ID) – this function will return current post/article title
[code type=php]
function float() {
if(is_single())
{
?>
<div id=”floating-box”>
<div class=”twitter”><a href=”https://twitter.com/share” class=”twitter-share-button” data-url=”<?php echo get_permalink($post->ID); ?>” data-text=”<?php echo get_the_title($post->ID); ?>” data-count=”vertical”>Tweet</a></div>
<div class=”google”>
<g:plusone href=”<?php echo urlencode(get_permalink($post->ID)); ?>” size=”tall”></g:plusone>
</div>
<div class=”facebook”>
<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink($post->ID); ?>&width=300&height=258&colorscheme=light&layout=box_count&show_faces=true&border_color=%23ffffff&stream=false&header=false” scrolling=”no” frameborder=”0″ style=”border: none; overflow: hidden; width: 300px; height: 61px; display: inline; margin: 0 0 0 -2px;” allowtransparency=”true”></iframe>
</div>
<div class=”pin”>
<a href=”http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>” class=”pin-it-button” count-layout=”vertical”>Pin It</a>
</div>
</div>
<?php
}
}
add_action(‘hook_after_floating’,’float’);
[/code]
Step 5: WordPress Admin -> Thesis (Left side) -> Custom CSS
[code type=css]
#floating-box{
border: 1px solid #DDD;
background: #FFF;
float: left;
margin: 0 0 0 -95px;
padding: 2px;
position: fixed;
top: 255px;
z-index: 1;
width: 65px;
}
[/code]
Hi, Prasad.
Thanks for the tip. I used on my website
and everything worked.
Do you know how to make the button bar
float, for example on this site:
http://www.mmnexpert.com/trabalhar-empresa-multinivel-negocio-de-trouxa/
?
Thanks!