WordPress Floating Social Media Button

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.

• Is my site loading fast? I use this shared hosting
• Try my theme >

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.