How To Add Cool Floating Social Icons in Thesis WordPress Blog

Social networking is the backbone of every blog. There cannot be a successful blog without the back up of social media and all those people who tweet, stumble, facebook share, etc. your blog posts.

Putting social media icons on a blog makes it convenient for the readers to bookmark, share and save the article. For instance there are social sharing buttons at the bottom and (right) side of the posts in this blog. This is to make it easier for the readers to share and/or bookmark a blog post if they find it useful and interesting.

On the other hand, in this post, I am talking about sticky social icons that make it easier for people to follow or friend you on a social profile. I repeat- these are not sharing buttons that I am talking about in this post.

Well here is a screen shot of what you’d get if you follow the instructions in this post.

So these are icons that stick to the side (left or right, as you choose) of your thesis wordpress blog. They are called floating or sticky icons because they are just there even if you scroll down and all the content goes up and down.

In this illustration I have used 4 icons on the left of my site. The icons are Twitter, Facebook, Google Buzz, which lead to my profile page in the respective social media and the fourth icon is my site feed.

You can actually use as many icons as you wish, but since this is a floating icon on the side it is better to keep the number less so that your thesis blog doesn’t look cluttered.

Before starting to work on your floating icons, you have to find the icons that match your theme and to your taste. You can google for “social media icons” or “social media buttons” to find excellent and cool packs of icons. Choose a set from that. And, it will be better if the icons are neither too big nor too small. In this blog I have used 50X50 icons.

Go to WordPress Dashboard and on the left click “Add New” under “Media” tab and upload the icons you are going to add in the sidebar one by one. Add necessary alt tags and don’t forget to copy the url of the image file and then click save. Put the urls in a text file. You will need them later.

Paste the following code in custom_functions.php

Click the Big Ass Save Button.

As you can see, I have defined the function “floating_icons” and have specified the job of the function. It basically creates clickable image icons. All the icons are packed inside a <div> which is of class “bookmarks”. The styling for this class will be done in the next step in custom.css.

And, all the individual clicakble icons are assigned separate classes, namely twitter, facebook etc. whose styling also will be dealt in the next step.

Now make sure that you replace the “title” and the anchor text to something else of your choice (that is, don’t use my name ). Inside the quotes of href=”" you have to specify the url of your profile page of that particular social media.

The rel=”nofollow” makes the hyperlinks of the icons no follow, thus not wasting your link juice and target=”_blank” makes the target page to be opened in a new tab, thus not making your visitors to leave your site.

This step is for styling all the classes mentioned in custom.css of your Thesis theme.

Paste the following code in custom.css

Click the Big Ass Save Button.

The first two lines style the main bookmark class. Since my icons are 50X50 I have set width and height to be 50. Top 45% specifies the position of the icons from the top. In this blog I have used 45%. It depends on the height of your header and also where you want your icons to be. If you change “left” to “right” you can have the icons on the right side of your blog.

The last 4 lines are for styling the individual buttons inside the main “bookmark” class. All you have to do is to insert the url of the corresponding image files which you saved in a text file in Step 2.

All done. Now if you visit your blog, you should see the floating icons on the side.

Let me know if you have any difficulties in doing this.

What? You haven’t got Thesis Theme yet? Click here to get this rocking theme and rock the blogosphere! Find All Answers runs on this awesome theme.

Tagged as: customize, Facebook, FLOATING ICON, floating icons, social icons, social profile, Thesis theme, Twitter, wordpress

Article by JaneSheeba

+Jane is the founder of Problogging Success. She is an expert blogger, consultant, freelance writer and blog designer. Don't forget to get your hands on two FREE Ebooks she offers.

Jane has written 271 awesome posts for Problogging Success.