Thesis Tutorials: How to Add Floating Social Media Icons?

by Sathishkumar on September 19, 2010

As bloggers, we all know that having Social Media icons in our blog is a very important factor, since it will give readers the ability to share our contents, to the Social Media sites which in turn bring back more traffic to our blog. So, when adding the Social Media Icons set we need to choose the best location in our blog, because it should have to be easily visible and accessible to the readers.

thesis wordpress theme

Considering all the above facts, having Floating Social Media Icons set on the left side or right side of our blog page would be the best choice, since the icons will always be available on the screen when your readers visit the page.

Since I am using Thesis WordPress theme in this blog, the following is a tutorial on how to add Floating Social Media Icons in Thesis Powered WordPress blog. Just follow the steps given below to add the icons in your blog.

How To Add Floating Social Media Icons in Thesis WordPress Theme?

1. Login to your WordPress admin panel and click the Custom File Editor in Thesis options.

2. Now you will see the custom File Editor screen. In the drop down menu, select custom_functions.php and click Edit Selected File.

3. Add the following code in custom_functions.php and click the save button.

function floating_social_icons() {
if (is_single())
{ ?>
<div class="float-social-icon">
      <a href="http://twitter.com/techiemania" target="_blank" class="twitter">TechieMania on Twitter</a>
      <a href="http://www.facebook.com/pages/Techie-Mania/103130853069010" target="_blank" class="facebook">TechieMania Fan Page</a>
      <a href="http://www.youtube.com/sathishvaratharaj" target="_blank" class="youtube">TechieMania YouTube Channel</a>
</div>
<?php }
}
add_action('thesis_hook_before_header', 'floating_social_icons' );

The codes which I have given here are for the Twitter, Facebook and YouTube sites. If you want more, you can do that by placing the codes in between the two diversions. Also don’t forget to replace the profile links give here with your own link.

4. Now select custom.css in the drop down menu and click the Edit Selected File button.

5. Add the following code in custom.css and click the save button.

/*Floating Social Media Icons*/
.float-social-icon{ background: transparent; width: 3.2em; position: fixed; top: 40%; left: 0.25%; }
      .float-social-icon a { display: block; text-indent: -9999px; height: 32px; outline: none; }
      .float-social-icon .twitter { background: url('http://www.techiemania.com/wp-content/uploads/2010/09/twittericon.png') }
      .float-social-icon .facebook { background: url('http://www.techiemania.com/wp-content/uploads/2010/09/facebookicon.png') }
      .float-social-icon .youtube { background: url('http://www.techiemania.com/wp-content/uploads/2010/09/youtubeicon.png') }

The above code will fix this Floating social media icons set on the left side of your page. If you want to change it to the right side, replace the word left in the above code with right. Also, replace the image URL path given here with your image uploaded path.

Floating Social Media Icons

Do Check:

Thesis is a killer WordPress theme with a good list of features and SEO benefits. If you’ve yet to grab one, you can order one using the link below.

Get Thesis WordPress theme

That’s it. Now you have added a Floating Social Media Icons set in Thesis Powered WordPress blog.

Do let us know, if you face any problem, while adding this code to your Thesis powered WordPress blog. Also if you like this tutorial, do share and tweet about it.

View all posts by
Blog →

Follow Us On

@techiemania facebook

Article by Sathishkumar Varatharajan

Sathishkumar is an Online Marketer and a full-time Blogger.

Sathishkumar Has Written 634 Articles For TechieMania.com

  • http://lcd-plasma-tv-reviews.com/ Aaron

    Thanks Sathish. Very good and simple method for floating icons. I’ve done the same thing outside of Thesis as well, but it is easy to do with Thesis especially. Love the blog, and I’m subscribed :)

    • http://www.techiemania.com Sathish

      Hi Aaron,

      I am really Glad that you have liked it. And thanks for being our blog subscriber.

      Sathish

  • http://www.bayofblog.com vijay

    Excellent tutorial sathish, this will very useful for all thesis users…
    BTW : Bookmarked this post…

    • http://www.techiemania.com Sathish

      Hi Vijay,

      Thanks for bookmarking this post.

  • http://tripideas.org/ Slava

    Those things are quite annoying for visitor. Sometimes opening a site you see some “sticky” stuff at the side, at the bottom, some things pop-up in your face and you just close the site without even reading.

    • http://www.techiemania.com Sathish

      Hi Slava, Thanks for commenting here. What you have said here is true, but adding them will increase the chances of your content shared by your readers to the social networks. So I would prefer to have them :)

  • http://theglobalsolutionnetwork.com marx

    It’s now working on me. :( i followed all the instructions..

  • http://www.e-wali.com Ahmad Wali

    It is not working for me even I have copy pasted the same code and same images uploaded on your website. I tried on two of my blogs, but didn’t work. I also need to know how do I find affordable person to custom design a thesis them skin. I like your design and I have seen all the good thesis blogs using custom designs.

    • http://www.techiemania.com Sathish

      Hi Ahmad, I have used this code before and it worked fine for me. I don’t know what is wrong me but I am sure it will work good.

      Concerning the custom design for thesis, I can do it for you. I am a thesis customizer myself and you can check my portfolio here for thesis customizations. http://www.techiemania.com/portfolio

  • http://theglobalsolutionnetwork.com marx

    How to make two column teaser? here’s the website, theglobalsolutionnetwork.com

    tnx for the help :)

    • http://www.techiemania.com Sathish

      Hi Marx, we just need to add an updated code along with few hooks. Do you want me to do it for you?

  • http://theglobalsolutionnetwork.com marx

    Hmm, just tell me what is the code and where to be put, so that I can also learn to do that. :)

  • bakescake

    Hi – just tried this code and it did not work – functions page is fine – any ideas? validated css – would love this if it did! thanks

  • bakescake

    correction – it does work – but only on post pages – does not show up on category or pages – that was why I thought it wasn’t working – what code do I need to add so it works everywhere, all the time?

    thanks again!

  • Bobby Grierson

    Hi Sathishkumar

    I cannot get this to work on my pages like the post below. I’m using Thesis 1.8.4 and WP 3.3.1.

    Can you put the code that I need to get it to work here?

    Thank you and I really line your designs!

    Bobby

Previous post:

Next post: