How to create Floating Social Media Button without plugin using wordpress 3.0.1 Twenty Ten theme
In today tutorial we are going to add some code in your post page that will show nice fade in and fade out on mouse effect and also valid xhtml.
If you use other theme than Twenty Ten, it will work the same, by pasting the code in single.php as well.
We will have buttons of Digg, StumbleUpon, Facebook, Google Buzz, and of course Twitter.
I choose only Google Buzz and Twitter for this blog because it slows down my site’s speed due to connecting to these social bookmarking servers.
So let’s start it!
1. Go to your dashboard/appearance/editor
2. Look for single.php file. Most theme have this file.
3. Now find this line: </div><!--.entry-content--!>
Below that code, there is a code: <?php if (get_the_author_meta
Paste this code (in .txt file) between those two codes. (see image)
4. Click “Update File”.
5. Now we look for stylesheet, style.css file.
6. Right in the very bottom, paste this code:
/*float social media buttons*/
#floating-menu{background-color:#fff;border:1px solid #ccc;position: fixed; left: 50%; top: 342px; margin-left:-554px; z-index:100;}
#floating-menu .float-title{padding:1px 3px;}
#floating-menu .float-title a{color:#000;text-decoration:none}
7. Click “Update File”. This css style was made for Twenty Ten, it means, if you use another theme, you can change the top and margin left position accordingly.
That’s it. If you want to avoid using those many buttons, you can delete any codes you don’t want to appear, example, if you delete this code;
<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a></a>
</div>
The digg button won’t show up.
Also important to Check in W3C validator if your document valid, it should pass, if not, then it can be caused by other things.
Reasons why i do not want to use any plugin for this, because i am reducing plugins usage to optimize my site loading speed plus plugin can cause error codes.
This video is fantastic and this site through give the information about the how to improve your own site.
Thank you for your nice comment Stephen.
great tutorial, thanks for sharing, this helps for the bloggers who are not good at html and css to understand.
Thank you Kbharath!
I hope the same too.
Thanks Kimi for leading me here. I’ll try to install this on a dummy site first to see if I don’t mess it up 🙂 If it all works out dandy, I’ll risk it on my Thesis theme. After a while, I got somewhat familiar with the custom_functions.php of it and I am always “afraid” to mess with it. I do backup everything first though just to make sure I have a “wayback” machine if needed, lol. Thanks again.
Hey DiTesco!
LOL, yes, i always use dummy site too to try stuff, best is to install wp locally, quick links:
Window users: https://www.wpvidz.com/install-wordpress-locally-windows/
Mac users: https://www.wpvidz.com/install-wordpress-locally-mac/
Cheers!
Kimi.
good article thanks for sharing
Thanks for sharing. i will try it on my site.
Thanks! It took me a few minutes!
I used it on Twenty Eleven and it worked!
Hi Sueli!
Welcome to this blog, I have seen it, very nice indeed!
Thanks for coming accross and leaving commment
Kimi.
Thanks alot, that really great work, thanks :))