How to Add Floating Feedback Social Bookmarking Icons in Thesis Theme

We know social book marking icons of a blog gives more traffic towards the site. So when we add social book mark icons we need to consider the location in your webpage. It should be easily visible to all of our visitors. Here we have some tutorials regarding how to add social bookmark icons in sidebar, at bottom of the post and etc.

In this video tutorial deals about how to add floating type book marking icons. Floating type means the book mark icons are fixed on the particular part whether it is left side or right side. But it should be always available on the screen when you visit your site.

You can fix the position where you want your floating icons in your side. This below video gives the detailed explanation about how to create floating feedback social book marking icon on left and right side of the web page.

Add floating bookmark icons on side of web page

To add floating bookmark icons copy and paste the following code in custom_funcions.php file.

/***************************************************************/
/* FLOATING SOCIAL icons ON SIDE OF SITE  */

function floating_icons() { ?>
<div id="bookmarks">
<a href="http://twitter.com/fourblogger" id="twitter" target="_blank" title="Follow @fourblogger on Twitter">Follow @fourblooger on Twitter</a>
<a href="http://feeds2.feedburner.com/fourblogger" id="rss" target="_blank" title="Subscribe to Fourblogger via RSS Email">Subscribe to Fourblogger via RSS Email</a>
<a href="http://www.fourblogger.com/contact-us" id="email" title="Contact Us">Contact Us</a>
<a href="http://www.youtube.com/user/fourblogger"" id="youtube" title="Subscribe to Fourblogger youtube channel" target="_blank">Subscribe to Fourblogger youtube Channel</a>
<a href="http://www.facebook.com/people/Pascal-Sundhar/100000574445431" id="facebook" title="Share on facebook" target="_blank">Share on facebook</a>
<br /><br />

</div>
<?php }

add_action('thesis_hook_before_header', 'floating_icons');

The above code I have added twitter, rss, contact us, youtube and facebook icons. If you want you can add more links. If you don’t want any link just remove it from the list. And  also you should replace your social book mark links in the above code.

To paste the above code in custom_functions.php file use ftp which is the safest way.

The path is public_html/fourblogger.com/wp-content/themes/thesis_16/custom/custom_function.php.

Once you added the code in custom_functions.php. You need to upload your bookmark icon image in to custom images folder.

Now you should copy and paste the below code in custom.css file.

/* SAVE THIS IN CUSTOM.CSS FILE */
.custom #bookmarks {background: transparent; width: 3.1em; position: fixed; top: 35%; right: 0.55%;}
.custom #bookmarks a {display: block; text-indent: -9999px; height: 3.1em;}

.custom #bookmarks #twitter {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Twitter1.png')}
.custom #bookmarks #rss {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Feed1.png')}
.custom #bookmarks #email {background: url('http://fourblogger.com/wp-content/uploads/2009/12/fourblogger.png')}
.custom #bookmarks #youtube {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon1.png')}
.custom #bookmarks #facebook {background: url('http://fourblogger.com/wp-content/uploads/2009/12/FaceBook1.png')}

The above code you can fix your position to left or right, and place location by changing the top:35%; . Replace the background url path as your bookmark icon image uploaded path.

To paste the code in custom.css file use the below path. goto wordpress dashboard. A then Thesis options/custom file editor/custom.css. paste the code and save it. Now check your site you have your floating social bookmark icons like the below image.

Floating Feedback icons

Share your experience in comment section.

For more checkout our all Thesis theme tutorials..

{ 53 comments… add one }

Leave a Comment

  • LiLu January 13, 2010, 8:32 AM

    Got this to work on a site I’m working on (http://caviandra.com), but for some reason, the facebook icon won’t show up. I’ve checked everything a million times to make sure it’s correct and the other three (twitter, rss, email) are all working just fine… ???

    Reply
  • LiLu January 13, 2010, 8:33 AM

    Btw, genius! Sorry. Just frustrated. 😉

    Reply
  • Peter January 31, 2010, 11:01 AM

    Thanks for this tutorial.

    I followed every step and even found another tutorial with the same solution but it doesn’t work for me…for some reason my icons appear in the content section of the page above the header. Do you have any idea why that should be?

    Note: I changed this to see if would make a difference: add_action(‘thesis_hook_after_header’, ‘floating_icons’);

    Thanks for any help!

    Reply
    • Suresh January 31, 2010, 11:46 AM

      Hai peter,
      I saw your site.. I think you have missed to place the first two lines of custom.css code as we mentioned in the post that’s why icons appearing above header..
      copy and paste the custom.css code again, it will work fine… also you can use before header or after header hook.. you can change top:35%; in custom.css to fix the position of icons.

      Reply
      • Thomas September 2, 2010, 10:31 PM

        Hello,

        I followed the tutorial but the icons don’t appear and the text shows up just blow the header instead of the sides. http://www.virtualloscabos.com

        Reply
    • Suresh January 31, 2010, 10:24 PM

      I checked your site.. paste the below two lines in custom.css file..floating icons appear in right side..

      .custom #bookmarks {background: transparent; width: 5em; position: fixed; top: 35%; right: 0.55%;}
      .custom #bookmarks a {display: block; text-indent: -9999px; height: 3.1em;}
      if you have problem contact via gtalk..

      Reply
  • Peter January 31, 2010, 10:46 PM

    Thanks very much for getting back to me and I have tried adding the code you sent me., which is also the code on the site and as I said it does nothing…(except crop the icons!). Really, I think there must be a bug in my system but I have send you the .custom and the custom_functions files and I can’t see what the conflict is / might be. Can you? I’m free to talk on Gmail / Skype but there’s nothing I’m doing wrong at my end as all I am doing is copying and pasting. There must be a conflict within the CSS file. I’m not good at CSS but I can cut and paste! :o)

    Reply
    • Suresh January 31, 2010, 10:54 PM

      In your custom.css the below line is missing i saw it via firebug..
      .custom #bookmarks {background: transparent; width: 5em; position: fixed; top: 35%; right: 0.55%;}
      that’s why i told u to contact via gtalk chat.. check your custom.css file the above line available or not?..

      Reply
  • Peter January 31, 2010, 11:20 PM

    Hi I tried replying to your email but I’m not sure if it’ll reach you. Thanks for the persisting with me. The code is in the file but I guess something else in the .custom files is preventing it from loading hence Firebug not noticing it. I have tried to access gtalk but I’m a mac so I need to download an intermediary piece of software. I’ll try calling you in due course. Thanks again. Pete

    Reply
    • Suresh January 31, 2010, 11:24 PM

      contact via contact form.

      Reply
  • Peter February 1, 2010, 12:15 AM

    I can’t get Gtalk to work. I’m having a bad day. I’ve set up a test account for you to have a look at the code in Wordpress is that’s possible.

    Thanks again for you assistance and I hope it’s something simple!

    Peter

    Reply
    • Pascal February 1, 2010, 12:27 AM

      i cant access your site without admin rights . so you have to provide username and password with admin role. then only i can access thesis options..

      Reply
      • Pascal February 1, 2010, 10:50 AM

        Hi peter,
        To solve your problem in custom.css find the below two lines and delete it..

        SOCIAL BOOKMARK ICONS
        Floating Icons

        To adjust the width change .custom #bookmarks width 3.1em into 5.1em

        Reply
  • Tim February 1, 2010, 4:35 AM

    I looooove all the videos you guys are doing and this will be one of my top visited sites so thank you!

    I wanted to use larger floating media icons so I created larger media icons (50x50px) and adjusted your width and height parameters in the css code from 3.2em to 5.1 to accommodate this and added a no-repeat for the icons as well. There are a few issues I’m having, and they are different in different browsers. I’d loooooove some help or insight if you could at all help!

    EXPLORER: the email icon isn’t showing up and my logo in my header is now not showing up either.

    FIREFOX: the email icon AND the facebook icon are not showing up (yes, the facebook icon is showing up in Explorer, but not in Firefox), and the image sizes are still the smaller 32×32 instead of the 50×50 that you can see in Explorer. In Firefox, however, the logo shows up.

    Any help would be greatly apperciated!

    Reply
    • Pascal February 1, 2010, 10:37 AM

      The problem is due to you are missing small word in custom.css
      you are missing this part of the code {background:

      To solve this find the below code in custom.css
      .custom #bookmarks #email url(/wp-content/themes/thesis_16/my_images/email.png) no-repeat}

      and replace with the below code

      .custom #bookmarks #email {background:url(/wp-content/themes/thesis_16/my_images/email.png) no-repeat}

      Now you will get the email and facebook link also in all browser…

      Reply
  • Tim February 1, 2010, 12:13 PM

    Pascal,

    Thank you thank you! You are right on the money. Great post on this!

    Do you know what the issue might be with it creating my logo not to show up in the header? Maybe it has to do with the larger icons somehow, but I really need them that size as many of my readers will be older and their visioin not the greatest!

    Thank you Pascal!

    Reply
    • Suresh February 1, 2010, 12:35 PM

      hai Tim,
      larger icons not a problem.. I think the logo image background url path or image name is the problem.
      I placed your logo image url in address bar it wont shown any image.. check your logo uploaded path(logo background url). if you have problem contact via gtalk..

      one more thing replace the comment line for floating icons in custom_function.php file which shown in the header section of your site….

      Reply
  • Peter February 2, 2010, 2:26 AM

    Hi Pascal,
    thanks very much for your email and I’m sorry I’ve not been able to get back to you sooner.

    I’ve now given you Admin access to my blog (please use it carefully!) and I’d love it if You could review my css and resolve the outstanding issue.

    Username: MFH
    Password: fourblogger

    Thanks very much,

    Pete.

    Reply
    • Pascal February 2, 2010, 7:08 AM

      hi peter just now i finished your problem. now you can see your site. it will work perfectly.

      Reply
  • Peter February 2, 2010, 7:56 AM

    Pascal, you are a life saver!

    Thanks you so much for you help I was (and still am) really struggling to get along with CSS, I only hope that one day it will all suddenly click into place….until then it’s great to have the support of people like yourself.

    Best wishes, Pete

    Reply
  • Lezlie February 12, 2010, 9:32 PM

    Thank you so much for all of your hard work. I saw a review on your e-book and began working through it. It is a MUCH needed resource.

    I’m having a problem with this. I’m not getting the icons to appear. Period.

    I’ve followed the instructions; checked/double-checked everything in the custom.css; and custom_functions.php; I’ve read through the issues on this … I can’t figure out what’s wrong.

    Can you please help me?

    Reply
    • Pascal February 12, 2010, 10:22 PM

      i saw your site, i didn’t find any custom_functions.php code. so you have to check once again, incase you got any problem, contact us via g-talk

      Reply
  • Tony M February 14, 2010, 1:00 AM

    I am using the Cute Profiles plugin for this, however I was recently on another blog that had a cool “Tweeted” image on the side as well. I didn’t know exactly how to add that but this tutorial should lead me the right way.

    Awesome, I just found this Thesis section and am loving it.

    Reply
    • Pascal February 14, 2010, 9:32 AM

      Glad you help this tutorial in right way.

      Reply
  • Carl March 4, 2010, 1:52 AM

    These are great tutorials. Thank you. I am trying to replace the html icons with php code, but it’s not working. I wanted to have the box display facebook, buzz, digg, and twitter share buttons similar to mashable. any help? thanks.

    Reply
  • sajjad May 4, 2010, 11:41 AM

    Dear Sir, I add the floating social bookmark icon in my site with help of your post. Its working fine with IE 7, 8 and fire Fox but its not working in IE 6. Floating bar comeing above header. Please give me a solution.

    Reply
    • Suresh May 4, 2010, 6:36 PM

      hai sajjid,

      IE 6 is very old version.. so we don’t worry about this…

      Reply
  • Federico Iglesias May 13, 2010, 10:41 PM

    Hello. I wonder if you have this feature for Joomla

    Reply
    • Pascal May 13, 2010, 11:06 PM

      I haven’t used Joomla. So i am not sure about that.

      Reply
  • Will May 17, 2010, 12:29 AM

    I have tried various ways of doing this, although not your code specifically. In all cases when my site is viewed on a small screen, like a netbook computer or an older monitor, the icons are on top of the content area. On widescreens they are fine. Does your method account for smaller screen widths?

    Reply
    • Suresh May 17, 2010, 4:50 PM

      hai will,

      In custom.css code change the top 35% to 40 or 45% . I think it will fine..

      Reply
  • Will May 19, 2010, 9:51 AM

    Thanks Suresh, but I think I have not been clear in the description of the problem. By on top I mean overlaying and blocking the content area. They are not too high up on the page, but too far in because on the small screens there does not seem to be enough screen area on the side for the icons. So they overlay the content area, blocking the words.

    I am thinking this is a theme issue rather than an issue with the icon code, but I am just not sure and have not been able to fix it.

    Reply
    • Suresh May 19, 2010, 1:14 PM

      hai will,

      I cant figure out your problem exactly. can you give me your site name?..

      Reply
  • Brett McKay May 31, 2010, 11:47 PM

    Two questions:

    1. What would I need to put in the custom function so the buttons only appear on posts and not on the homepage?

    2. I’ve added the Facebook Share Button but for some reason the number of shares doesn’t show up. It’s just blank. If I put the share button in the post itself, then the number of shares appear. Any idea what might be causing this?

    Reply
    • Suresh June 2, 2010, 10:48 PM

      hai brett,

      In your custom function code after the function name.. use if (!is_home()&&is_single()) {

      2. once again replace the code for facebook button…

      Reply
  • Zac Archuleta June 19, 2010, 6:00 PM

    Instead of the icons being in a pillar form/vertical,
    how do i make them flat/horizontal? I really like
    this feature….hope someone can help. :)X

    Reply
    • Pascal June 20, 2010, 10:48 AM

      I will do one tutorial very soon for your requirement.

      Hope it will help you a lot.

      Reply
  • Zac Archuleta June 24, 2010, 4:58 PM

    one more question…anyway i can make the icons fixed so they don’t scroll with the screen?

    Reply
    • Pascal June 25, 2010, 5:14 AM

      I saw your site. Now it’s working.

      Reply
      • Zac Archuleta June 29, 2010, 8:05 PM

        I apologize…I meant that i wanted the icons to be able to scroll. So they’ll stay in the exact spot they are in when i scroll up and down.

        .custom #bookmarks {background: transparent; width: 3.1em; position: scroll; top: 2.5%; right: 17%;}
        .custom #bookmarks a {display: block; text-indent: -9999px; height: 3.1em;}

        .custom #bookmarks #twitter {background: url(‘http://fourblogger.com/wp-content/uploads/2009/12/Twitter1.png’)}
        .custom #bookmarks #myspace {background: url(‘http://img.photobucket.com/albums/v685/reliance1185/myspaceicon.png’)}
        .custom #bookmarks #facebook {background: url(‘http://fourblogger.com/wp-content/uploads/2009/12/FaceBook1.png’)}
        .custom #bookmarks #youtube {background: url(‘http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon1.png’)}

        .custom #bookmarks {
        z-index: 150;
        }

        Reply
  • Patti September 12, 2010, 1:24 PM

    Thank You for this tutorial on floating social media icons.

    I have read and read everything on here but I continue to have difficulty with the facebook icon not showing on my webpage. I am using Chrome and have checked it in IE..no icon

    Thanks for looking and your advice

    Reply
  • Surabhi October 1, 2010, 12:08 PM

    Hi Suresh,

    If i have a put a floating button that says “click here for a free quote” in a floating button format, what should be the procedure?

    I would appreciate if you could give me the code for that.

    thanks a lot in in advance for the help.

    Best Regards

    Reply
  • Jish October 24, 2010, 11:25 AM

    I have searched hi & low to find the code in my header so that I can change the links to properly link to our social networking pages. Is there anyway that you can help?? I looked over all the notes that you stated to get “clues” as to which file folder it might be in, but no look using php, css, xml or xhtml…I just can not find the code.

    Please advice or assist!

    Reply
  • neha October 30, 2010, 9:15 PM

    Hey Suresh, thanks for such a nice tutorial..I jus wanted to ask one thing, in my thesis theme, why I am not getting any options under my thesis options. It shows only thesis options and nothing else…like designing options etc.
    Like I want to edit sidebars, how do I do that, there are no options availiable..
    thanks in advance and please reply…

    Reply
  • neha October 30, 2010, 9:47 PM

    hi there, I added these codes but it is not showing upp..please help.

    Reply
  • Revitol April 19, 2011, 3:29 PM

    thanks. worked a treat. and I’ve adapted it for other things too – looks really cool

    Phil

    Reply
  • Cheri Peoples November 18, 2011, 10:33 PM

    I have added in all of the code, changed the links and img but it is not showing up,
    I tried removing my wrap image but still nothing. I have tried changing the positioning 3.1 to (1.1, 5.1, and 10.1) still not showing up. Any suggestions?

    Cheri

    Reply
    • Suresh November 19, 2011, 1:01 PM

      Hai Cheri Peoples,

      reduce the image size from 460 x 460px to 45 x 45 px..

      You will get it..

      Reply
  • sid March 23, 2012, 4:22 AM

    This looks bad on iPad or any resolution that is small. The icons mash up against the rest of the blog making the posts unreadable. On a a larger resolution, it looks fine. Any help?

    Reply
  • ruby May 29, 2012, 10:28 PM

    Hello, I pasted the code exactly and changed only the side from right to left. Nothing is showing up for me at all. Any idea what I’m missing? Thanks!

    Reply