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..
Related Tutorials:
- How to Add Social Bookmarking Icons in widgetized Header of Thesis Theme
- How to add Social Bookmark Icons at Right Side of the Post in Thesis Theme
- How to add your social bookmark icon into Thesis theme
- How to Add Social Bookmark Button Links inside Posts in Thesis
- How to Add Background Image for Sidebar Heading in Thesis Theme
{ 51 comments… read them below or add one }
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… ???
Btw, genius! Sorry. Just frustrated.
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!
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.
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
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..
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!
)
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?..
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
contact via contact form.
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
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..
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
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!
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…
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!
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….
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.
hi peter just now i finished your problem. now you can see your site. it will work perfectly.
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
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?
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
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.
Glad you help this tutorial in right way.
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.
hai carl,
In mashable there is no floating bookmarking icons. where you need bookmark icons in sidebar or in post except?
Not on the sidebar or the post except. I want the icons floating on the right of the pages. On mashable, they are on the left of the post pages but they are not free floating. Example: http://mashable.com/2010/03/03/conans-tweet-team/
Thanks Suresh.
hai carl,
i give you the tutorial how to add bookmarking icons right side of the post. This tutorial help you to place boookmark icons in left side of the teaser box by changing the hook and some css according to your site..
http://fourblogger.com/how-add-social-bookmark-icons-right-side-post-thesis-theme/
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.
hai sajjid,
IE 6 is very old version.. so we don’t worry about this…
Hello. I wonder if you have this feature for Joomla
I haven’t used Joomla. So i am not sure about that.
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?
hai will,
In custom.css code change the top 35% to 40 or 45% . I think it will fine..
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.
hai will,
I cant figure out your problem exactly. can you give me your site name?..
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?
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…
Instead of the icons being in a pillar form/vertical,
X
how do i make them flat/horizontal? I really like
this feature….hope someone can help.
I will do one tutorial very soon for your requirement.
Hope it will help you a lot.
one more question…anyway i can make the icons fixed so they don’t scroll with the screen?
I saw your site. Now it’s working.
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;
}
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
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
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!
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…
hi there, I added these codes but it is not showing upp..please help.
thanks. worked a treat. and I’ve adapted it for other things too – looks really cool
Phil
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
Hai Cheri Peoples,
reduce the image size from 460 x 460px to 45 x 45 px..
You will get it..