A Guide to Social Media Floating Buttons

A Guide to Social Media Floating Buttons

The influence of Social Media within our society has gradually increased, to the point that any website lacking social media presence risks ... 02:11

The influence of Social Media within our society has gradually increased, to the point that any website lacking social media presence risks losing a significant amount of traffic. In order to increase visibility within social media, it is important to provide easy ways of social interactions through floating social media buttons.

This guide will provide step-by-step instructions of how to make a Floating Div containing social media buttons - similar to what is available on this website.

For this tutorial the following tools are going to be used.

• jQuery
• jQuery Waypoints
• HTML / CSS

Knowledge of the above will help you understand and tweak the end-result providing better over-all results in your integration.

1. Identify the html block next to which you would like to insert the social media buttons. In my case #content.
2. Open the CSS file and add a new rule to this html selector to make the position relative.
   

   position:relative;
   

   This will ensure that any children will always be relative to the position of this parent.
3. Open the html / template file, and append the following code at the bottom of your selector.
   

   
       
       
   
   Tweet
   
       
   
   
   
   
   
       
   
   
   
   
   
       
   
   
   
   
   
   
   
   

   This Will Insert the basic social media buttons - you can replace the content inside#SocialMedia as you please to suit your social media needs. For an easy selection you can copy this from a provider such as AddThis - where they provide a wide selection of social media buttons. If you do replace these take care of the social media scripts which are at the bottom.
4. Open up your CSS file again and add in the following rules
   

   #SocialMedia {
       position: absolute;
       //top is how far down you want your social media block to start from the start of the content block
       top: 70px;
       width: 60px;
       //margin-left should be the width of your #content area if it is to be aligned on the right + a small extra margin
       //if it is to be aligned on the left this should be -70px
       margin-left: 610px; 
       padding: 10px;
       //you can change the background to suit your needs
       background: rgba(255, 255, 255, 0.6);
       //border radius is optional and should be right/left according to the side
       border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
   }
   

   Once inserted this code will make your new social block stuck to the right-hand side. The css properties can be change as deemed necessary to fit the styling of your website and achieve the required positioning. By standard this block appears on the right but could be modified to appear on the left side. In case it doesn't appear in the right position; you might have to do some tweaks with the margin-left and top css properties.
5. This will however scroll outside of the visible area, once a user scrolls. This is where we will be adding some scripts. First Include the jQuery and Waypoints scripts. Note that you have to download the Waypoints script from the author's website.
   
   Then add the following code has to your javascript file or else contained within a tag in your html.
   

   jQuery(document).ready(function(){
       jQuery('#content').waypoint(function() {
           jQuery('#SocialMedia').toggleClass('fixed');
       });
   });
   

   I will explain what the above script does. First of all it waits for the document to be ready, to ensure that all the website has been loaded before we run anything else. The second line adds a call-back function when the #content block reaches the top of the page. This function just toggles the class fixed from our Social Media Button block.
6. Now we need to set our Fixed Style so that the Social Media block never goes outside of the visible area. Open once again the CSS file and below the previous block add the following.
   

   #SocialMedia.fixed {
       position: fixed;
   }
   

   It is important to note that this inherits from our previous CSS and if you would like to change some other properties you would have to override the same properties as before.

Now you can open up your website, and do any required modifications. Once you're happy with the result make sure you get plenty of visitors to interact with your new social media floating buttons. After a while come back and leave a comment with your feedback and experience of using Floating Social Media Buttons.