Add Floating Social Media Buttons in WordPress Thesis without Plugin

By | December 24, 2013

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.

 

Floating Bar

Floating Bar

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
Custom.php Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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); ?>&amp;width=300&amp;height=258&amp;colorscheme=light&amp;layout=box_count&show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;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');

 

Step 5:  WordPress Admin -> Thesis (Left side) -> Custom CSS

Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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;
}

One thought on “Add Floating Social Media Buttons in WordPress Thesis without Plugin

Leave a Reply

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

tawse-noncreativity