Previously I wrote a quick Cool Mouse Hover Social Media Buttons for WordPress Blog tutorial. And yes, this is another cool mouse hover Social Media example which uses CSS Sprite.
Why Use CSS Image Sprite?
Every time you call an image with the CSS background-image selector an HTTP request is made. Put simply, the more HTTP requests you make the slower your site, and that can be disastrous for search engine rankings. The answer to this problem is the CSS Sprite.
A CSS sprite is a graphic which includes other graphics to be used (and re-used) on your site, so rather than using individual images each time you need to change a background with CSS, you use just one sprite. This reduces HTTP requests and keeps your site super fast.
Another must read: Implement Social Sharing Button
We will go over Two Methods.
- Method-1: Which we used until 08.31.2016.
- Method-2: Which I used on crunchify.com in 2015.
- Method-3: Use
fontawesome.io. Please follow FontAwesome detailed Tutorial.
Let’s get started:
Example-1
Step-1
CSS sprite image: https://crunchify.com/wp-content/icon/crunchify-follow-sprite.png. Download and put it under your theme’s /image/ folder. You will refer this in CSS file.
Step-2
Go to Widget Area and Add Text Widget and put below code. Change links accordingly.
<div class="sidebox sidebox-social"> <a class="sm-rss" href="https://crunchify.com/feed/" rel="external" target="_blank">RSS Feed</a> <a class="sm-goo" href="https://www.youtube.com/c/CrunchifyDotCom?sub_confirmation=1" rel="publisher" target="_blank">YouTube</a> <a class="sm-fac" href="https://www.facebook.com/Crunchify" target="_blank">Facebook</a> <a class="sm-twi" href="http://twitter.com/Crunchify" target="_blank">Twitter</a> <a class="sm-wor" href="http://profiles.wordpress.org/crunchify/" target="_blank">WordPress.org</a> </div>
Step-3
Go to theme’s style.css file and put below CSS for your better styling.
.sidebox-social {
padding: 0 0 5px 0;
}
.sidebox {
width: 100%;
overflow: hidden;
margin: 0px 0px 15px 0px;
min-width: 300px;
}
.sidebox-social a:link, .sidebox-social a:visited, .sidebox-social a:hover, .sidebox-social a:active {
float: left;
width: 32px;
height: 32px;
margin: 10px 15px 10px 12px;
padding: 0;
text-indent: -9999em;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
background-color: transparent;
background-image: url('images/crunchify-follow-sprite.png');
background-repeat: no-repeat;
}
.sm-rss {
background-position: 0 0;
}
.sm-goo {
background-position: 0 -32px;
}
.sm-fac {
background-position: 0 -64px;
}
.sm-twi {
background-position: 0 -160px;
}
.sm-wor {
background-position: 0 -192px;
}
That’s it. Now let’s move to 2nd example which I’m not using it right now but it works well also if you like.
Example-2
Step-1
CSS sprite image: https://crunchify.com/wp-content/icon/social-icons.png. You need this in CSS file. Put this image into theme’s /images/folder.
Step-2
Put this code where you want social icon to appear, i.e. Text Widget Area. Change links accordingly.
<ul id="social">
<li><a href="http://twitter.com/Crunchify" id="tw" rel="me" target="_blank">Twitter</a></li>
<li><a href="http://www.facebook.com/Crunchify" id="fb" rel="me" target="_blank">Facebook</a></li>
<li><a href="https://www.google.com/+CrunchifyDotCom" id="plus" rel="me author" target="_blank">Google+</a></li>
<li><a href="https://crunchify.com/feed/" id="rss" rel="me" target="_blank">RSS</a></li>
</ul>
Step-3
Put below css code to your WordPress style.css file:
/* Social Icons
------------------------------------------------------------ */
#social{
float: left;
margin: 22px 0 0 10px;
margin-left: 35px !important;
}
#social li {
float: left;
border-bottom: none !important;
list-style-type: none !important;
}
#social li a{
float: left;
height: 23px;
width: 23px;
text-indent: -9999px;
overflow: hidden;
background: url('images/social-icons.png');
}
#social #tw{
background-position: 0 0;
}
#social #tw:hover{
background-position: 0 -23px;
}
#social #fb{
background-position: -23px 0;
}
#social #fb:hover{
background-position: -23px -23px;
}
#social #rss{
background-position: -46px 0;
}
#social #rss:hover{
background-position: -46px -23px;
}
#social #plus{
background-position: -69px 0;
}
#social #plus:hover{
background-position: -69px -69px;
}
That’s it and you are all set.
Hi, another great tutorial, how to simplify in a smart way.
Thanks Felice.
OK I am about to give up, don’t have much hair left. 🙂 I followed your steps from example 1. While the sprite shows up, and the outbound links are correct. I get the same icon (Facebook) for all of my links. See this page for an example, under the TEST header in the sidebar https: //toledocomputerrepair. com/category/computer-software-sales/
Using latest version of WordPress, and Solostream WP Clear 3.x
Any ideas? I can’t figure it out using Firebug
Hi Nevis – I don’t see id=”fb”, id=”plus”, id=”tw” field added for each social media icon on your site. Could you double confirm?
Man, that was a FAST reply! I am sure you are correct. I however don’t see where the id= should be placed. In the widget area? Or should it go in the CSS section?
As you see it in step-2 above, try adding it to widget area.
Here are both sections of code
Below is placed in the custom.css which is called from style.css
.sidebox-social a:link, .sidebox-social a:visited, .sidebox-social a:hover, .sidebox-social a:active { float: left; width: 24px; height: 24px; margin: 10px 15px 10px 12px; padding: 0; text-indent: -9999em; box-shadow: 3px 3px 3px rgba(0,0,0,0.3); background-color: transparent; background-image: url('images/social-sprite.png'); background-repeat: no-repeat; } .sm-fac.png { background-position: -5 -5; } .sm-twi.png { background-position: -39 -5px; } .sm-goo.png { background-position: -73 -5px; } .sm-lin.png { background-position: -107 -5px; }Got it. Ignore my previous reply about ID tag as it was for Example-2. I debug little bit more for Example-1 and found custom CSS issue.
Any idea why you have
.sm-fac { background-position: -5 -5; }for .sm-fac?
It should be below as per tutorial.
.sm-fac { background-position: 0 -64px; }I used Stitches to generate my sprite, so in my not so clever thinking used their measurements. Changed all to your settings, cleared cache, and am still getting the same result. Using Firefox, will try in different browser.
OK tried Chrome, same result. All images regardless are FB images.
Hello App,
First, I would like to say thank you for putting this together.
Second, I am not seeing the social follow images appear on my website.
This is what I did:
I downloaded the image and placed in my image folder which is called “img”I got the css code and put it on my style sheet and changed the path to background-image: url(‘img/crunchify-follow-sprite.png’);
Then, I put the html code on one of my widgets but nothing is showing.
This is my website helpfulpost and I will also add a screen shot
I hope I get a reply from you
Hi Fabian – thanks for all detailed information. Can you try replacing it will complete path?
background-image: url('http:///wp-content/themes//img/crunchify-follow-sprite.png');Hi, thanks for the code. I’m trying to place the social icons on my wordpress site. However, I’m getting the “stair stepping” effect. Any ideas on how to solve this?
Thanks
Hi Gaston – could you please also share a screenshot?
Sure, here you go. I’ve only added Google and Facebook, but the “stair” effect goes down too when using twitter, rss and wordpress.
Hmm interesting. Not sure why it’s happening. Can you share your blog URL? I need to debug more.
This is great. And it has the benefit of actually working, which is more than I can say for many of the examples I found today when I went out hunting.
Some questions: I don’t understand #social { margin-left: 35px !important; }. Why does this need to be here? Why is it important? I had to get rid of it so that it would fit on my page. Ditto the 22px top margin on #social.
Your sprite code works fine without these margins, so why include them?
Hi Tim – you could safely ignore that. I believe, it was related to my theme (previous theme).
Thanks for sharing. You might want to change rel=”nofollow” to rel=”me” if it’s your own website profile. So google knows it’s your own twitter account for example.
Agree with you. Updated post.