wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials WordPress Floating Social Media Button

Tutorials

WordPress Floating Social Media Button

Last updated on February 18, 2017
Posted on September 28, 2010

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 >

End Result.

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.

button code floating plugins without

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← WordPress Ban IP Address
→ The Best Autoblog Plugin WordPress

Comments

  1. Stephen Fleming says

    September 29, 2010 at 6:45 am

    This video is fantastic and this site through give the information about the how to improve your own site.

    • Kimi says

      September 29, 2010 at 7:19 am

      Thank you for your nice comment Stephen.

  2. kbharath says

    October 6, 2010 at 10:17 am

    great tutorial, thanks for sharing, this helps for the bloggers who are not good at html and css to understand.

    • Kimi says

      October 6, 2010 at 1:49 pm

      Thank you Kbharath!

      I hope the same too.

  3. DiTesco says

    December 17, 2010 at 3:01 pm

    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.

    • Kimi says

      December 18, 2010 at 7:16 am

      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.

  4. Vinay says

    June 11, 2011 at 1:54 pm

    good article thanks for sharing

  5. Deepika says

    June 24, 2011 at 8:39 am

    Thanks for sharing. i will try it on my site.

  6. Sueli says

    August 26, 2011 at 5:02 am

    Thanks! It took me a few minutes!
    I used it on Twenty Eleven and it worked!

    • Kimi says

      August 26, 2011 at 6:55 am

      Hi Sueli!

      Welcome to this blog, I have seen it, very nice indeed!

      Thanks for coming accross and leaving commment

      Kimi.

  7. Waseem says

    October 31, 2011 at 5:43 pm

    Thanks alot, that really great work, thanks :))

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept