How To Create Animating Social Media Widget In 5 Minutes

If you want to create social media subscription buttons / widget that load faster, looks good and have mouse hover animation effect, here is a fast way. You can do it within only 5 minutes and that also without any coding knowledge. Other than just good looks, it has SEO advantage. CSS Sprite animation is fast loading and Google loves the fast websites.

• Fast page loading
• Only one HTTP request
• Animation effect and attractive looks

If you have 5 icons, it means your browser calls 5 different http request to download the icons which is slow. But if you use the CSS Sprite, you only 1 image and a single http request saving your page loading time. Moreover it has good looks and animation effect. Here is my current social subscription buttons. Hover mouse and see the animation. (You can join also)

Count your time now

You need Icons: 

• You can download free icons from different websites or buy if you like premium icons. 
• I suggest you to go to Iconfinder for great free icons. Icons are nothing but png / jpg images of smaller size. 
• Choose icons of appropriate size. (48 x 48 is recommended)
• You can also resize the official logos of social website to fit your need.

CSS Sprite dimensions and combining images

• Go to http://instantsprite.com
• Note this: we are using Instantsprite only to combine the images and get the exact coordinates of every icon very easily.
• The actual CSS Sprite code is here.
• Click on 'Select multiple image files' option.
• Note that you should have 2 different images of every icon of same size. One will display and other will be displayed on mouse hover.
• Name the icons so that they can be listed sequentially. Eg. for twitter icons, you can name like 'twitter-48-colour.png' and 'twitter-48-black' and so on.
• Select all your images and click open to upload all the icons.
• You can rearrange the images as you want in first box 'thumbnails'
  
• In the options box, select offset : 10px, direction: vertical and file type: PNG. You are free to customize as you want.
• The combined sprite image is ready to download to your computer. Right click on the image and save it.
  
• Now upload the whole image to you image server. In case of Blogger platform, you can just save image as a new post. Copy the URL of image and insert the url in this code.
• Note that X and Y coordinates of every icon are given in the 'Usage' box of InstantSprite. 
• You have to replace the information in this code with your own icon dimensions.
• Description of the code: Height and width = 50px in line 5 and 6 is the size of icon in final display. You can change as you want and the size of icon you have added to the sprite.
• URL of image source. Insert replace the text with url of your combined image.
•  This is dimension of first facebook icon (continuous display)

        .toptrix a.facebook {background-position: 0px -58px;}

         

• Dimension for Facebook hover animation icon: 

.toptrix a.facebook:hover{background-position: 0px 0px;}

• Now look at the coordinates of your icons. There are given in the InstatntSprite usage box. Replace them with yours.
  
• You have to put all the icons coordinates as per your image.
• Now enter the URL of your social media pages at 'href' of every class.
• Create a new widget in blogger layout, paste the final code and test it. 

What type of social media subscription buttons do you have? Do they load faster? Is this tutorial useful and easy? Please leave a reply.