Social media is a big deal to almost every company. With proper branding you can turn a social media account into an enormously marketable asset. This is why large companies such as Facebook can attract so many investors - because people want to connect and share information digitally. But a regular-old embedded social media sharing button can get rather stale, so I say we spice things up a bit.
Social Media Mistakes And How To Avoid Them [Free Ebook]
By clicking the button you agree to the Privacy Policy and Terms and Conditions.
In this social media sharing bubbles tutorial I'd like to demonstrate how to create a popup bubble with social media widgets. The bubble is displayed through jQuery and can hold any number of widgets from Twitter, Instagram, Facebook, YouTube, etc. Take a peek at my live demo to see the final design in action.
Live Demo - Download Source Code
Getting Started
First create a new HTML document and make folders for the CSS and JS files. My stylesheet is named styles.css but choose any filename you like. Also grab a local copy of jQuery and include that into the header as well.
Social Media Popup Bubbles - Template Monster Demo
Inside the page body things get a little messy. I have a single outer container with the ID #wrapper centering all the content. Then I've created an overall container for the social media links using the class .social-links. Each link is actually a social media icon from the free Metro Uinvert icon set.
Since the icon links are positioned next to each other I have them floating within the .clearfix container. This is very important to ensure that further page content is cleared properly.
Social Media Sharing Bubbles
Look at each individual section and you'll notice two classes on each container. For example the first Twitter widget has a class of .glyph and .twitter. The glyph class sets a general default for each link such as padding and spacing. The secondary class is used to impose a specific link background icon.
The .glyph container has two separate items. First is the popup div which is originally hidden from the page. This uses the class .bubble and is found alongside an anchor link with no text. These links use a background icon to represent social media websites and the icon color changes while hovering.
One other thing you might notice is the addition of a .wide class on the Facebook bubble. Since the "Like" button is kinda long I created two different popup bubble classes - one that's regular-sized and another that's slightly wider. If you want to increase the size you can always recreate your own extended popup backgrounds.
Designing with CSS
Moving onto CSS I'll explain how the page is organized and positioned. All images are stored within the "css" folder because each one is used as a CSS background. This makes resource management a whole lot easier in the long run.
To get started I'm using a slightly customized CSS reset from the Eric Meyer template. For the body background I'm using the Cream Dust tile from Subtle Patterns.
/** page structure **/
#wrapper {
display: block;
max-width: 700px;
min-width: 350px;
margin: 0 auto;
padding: 20px 0;
}
/** social links **/
.social-links {
display: block;
width: 250px;
padding-top: 100px;
margin: 0 auto;
}
The outer wrapper should be self-explanatory as a general container. The inner .social-links container houses the link icons and centers them on the page.
.glyph {
display: block;
position: relative;
float: left;
width: auto;
height: auto;
margin-right: 2px;
padding: 3px 6px;
height: 35px;
width: 52px;
}
.glyph.active {
background: url('bubble-sm.png');
background-position: -9px 40px;
}
.glyph .bubble {
display: none;
width: 140px;
height: 89px;
position: absolute;
margin: 0;
text-align: center;
background: url('bubble-sm.png');
padding: 20px 20px;
bottom: 35px;
left: -9px;
cursor: pointer;
}
.glyph .bubble.wide {
width: 160px;
left: -6px;
background: url('bubble-wide.png');
}
Now when it comes to the .glyph class there's a lot to consider. Notably I'm using relative positioning because the glyphs need a particular spacing and the inner popup bubble is positioned absolutely. Having this popup bubble located relative to the icon glyph is the easiest solution.
If you check out the general .bubble class you'll notice I'm using a background image for the drop shadow effect. This is easier because CSS would force a solid rectangle which means hovering next to the link would also open the menu. Instead I have the image split into two areas so the link icon and the popup window meet to create a seamless BG.
.glyph a {
display: block;
position: relative;
height: 33px;
width: 40px;
}
.glyph.twitter a {
background: url('twitter-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.twitter.active a {
background: url('twitter@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.twitter .bubble {
padding-top: 28px;
padding-left: 24px;
}
.glyph.facebook a {
background: url('facebook-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.facebook.active a {
background: url('facebook@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.facebook .bubble {
padding-top: 30px;
}
.glyph.dribbble a {
background: url('dribbble-grey@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
top: -4px;
left: -1px;
}
.glyph.dribbble.active a {
background: url('dribbble@2x.png');
background-repeat: no-repeat;
background-size: 33px 28px;
}
.glyph.dribbble a.dbfollow {
width: 85px;
height: 36px;
background: url('db-follow-grey@2x.png');
background-repeat: no-repeat;
background-size: 84px 35px;
}
.glyph.dribbble a.dbfollow:hover {
background: url('db-follow@2x.png');
background-repeat: no-repeat;
background-size: 84px 35px;
}
.glyph.dribbble .bubble {
padding-top: 30px;
padding-left: 30px;
}
Lastly we come to the icon styles which are created using specific classes. Each icon style has two different effects: the original icon and the hovered icon. The hover effect just adds color into the icon but it's still located in the exact same spot.
Also I'm using @2x retina images so each icon should look crisp on Retina MacBooks and Hi-DPI smart devices.
Animating with jQuery
Moving back into the HTML file I've added a small block of JavaScript at the bottom of the document. Everything is written in jQuery and uses the .on() event handler function.
$(function(){
$('.glyph').on('mouseover', function(e){
$(this).addClass('active');
$(this).find('.bubble').css('display','block');
}).on('mouseleave', function(e){
$(this).find('.bubble').css('display','none');
$(this).removeClass('active');
});
});
By creating a selector from the .glyph class I can run a function on each icon. With jQuery I can actually chain two functions together - one on mouseover and the other on mouseleave.
So when the user hovers onto an icon we give that div the .active class. Divs love active classes.
This should replace the grayscale background icon with a fully-colored version. Then using the .find() method I'm selecting the first child with a class of .bubble and forcing a display: block onto the element.
Once the user's mouse leaves the icon or popup bubble then both of these actions are reversed. So the .active class is removed and the bubble is once again hidden from the page. This effect could be accomplished using pure CSS3 but it wouldn't have as much support in older browsers. I really like the jQuery solution and it works perfectly.
Closing
The popup bubble effect is quite enjoyable and it works great in almost any type of website from portfolios to major corporations. The goal is to save space on the screen and offer more than just a link to your social profile. If the user wishes to click the link icon they can check your profile - but in this case the user is given an option of sharing your content as well. Feel free to download a copy of my source code and see if you can fit this into any future web design projects.
Want to find some other web development tutorials, check out freshDesignweb tuts section.