CSS Social Sharing Buttons

In today’s tutorial, we’re going to take a look at how to create social sharing buttons with CSS and HTML. As you know, each social media platform has it’s own sharing button, that use an html tag with a few attributes and JavaScript. Now, if u add 3-4 of these buttons to your websites, that means an extra 3-4 JavaScript files, which means more HTTP requests when the page is loading, and this results in slower page load time.

Luckily most of the social media sites also offer a link that can be populated manually to share the content. And that’s what we’re going to use now. We’ll build some custom html buttons, and style them with CSS, to give it the proper color, and using font-awesome, we’ll add some icons to the buttons as well.

Throughout this tutorial, I’ll show you how to create buttons that u can add below/above your article. And also, a way to create floating social share buttons, that have a fixed position and move as you scroll down on the page.

Normal Social Sharing Buttons

The HTML

The first step is of course to create the buttons. Below, you can see the HTML structure of the buttons, as well as the font-awesome icons that we’re using.

<!-- Facebook Share Button -->
<a class="btnz share facebook" href="#"><i class="fa fa-facebook"></i> Share</a>
<!-- Googple Plus Share Button -->
<a class="btnz share gplus" href="#"><i class="fa fa-google-plus"></i> Share</a>
<!-- Twitter Share Button -->
<a class="btnz share twitter" href="#"><i class="fa fa-twitter"></i> Tweet</a>
<!-- Stumbleupon Share Button -->
<a class="btnz share stumbleupon" href="#"><i class="fa fa-stumbleupon"></i> Stumble</a>
<!-- Pinterest Share Button -->
<a class="btnz share pinterest" href="#"><i class="fa fa-pinterest"></i> Pin it</a>
<!-- LinkedIn Share Button -->
<a class="btnz share linkedin" href="#"><i class="fa fa-linkedin"></i> LinkedIn</a>
<!-- Buffer Share Button -->
<a class="btnz share buffer" href="#"><i class="fa fa-share-square-o"></i> Buffer</a>

Since there’s no buffer icon in the font-awesome pack at the moment, I simply added a share icon.

The CSS

After we have our html ready, let’s add some CSS to make them look like buttons, and give them the proper social media colors. You can find the brand colors for almost all of the social media platforms here – brandcolors.net

.btnz {
    display: block;
    float: left;
    padding: 10px 15px;
    border:none;
    background-color: #ececec;
    text-decoration: none;
    font-size: 18px;
    color: #FFF;
}
.btnz:hover {
    color: #efefef;
}

And now, to color them:

.facebook {
    background-color: #3b5998;
}
.gplus {
    background-color: #dd4b39;
}
.twitter {
    background-color: #55acee;
}
.stumbleupon {
    background-color: #eb4924;
}
.pinterest {
    background-color: #cc2127;
}
.linkedin {
    background-color: #0077b5;
}
.buffer {
    background-color: #323b43;
}

And after this, you should have something that looks like the following:

Flouting Social Sharing Buttons

To create floating social sharing buttons, we’ll use the same buttons, with a little modification. We’ll remove the text from them and leave the icons only, and also put them in a container.

The HTML

<!-- Floating Share Buttons Container -->
<div class="socialfloat">
    <!-- Facebook Share Button -->
    <a class="fbtn share facebook" href="#"><i class="fa fa-facebook"></i></a>
    <!-- Google Plus Share Button -->
    <a class="fbtn share gplus" href="#"><i class="fa fa-google-plus"></i></a>
    <!-- Twitter Share Button -->
    <a class="fbtn share twitter" href="#"><i class="fa fa-twitter"></i></a>
    <!-- Stumbleupon Share Button -->
    <a class="fbtn share stumbleupon" href="#"><i class="fa fa-stumbleupon"></i></a>
    <!-- Pinterest Share Button -->
    <a class="fbtn share pinterest" href="#"><i class="fa fa-pinterest"></i></a>
    <!-- LinkedIn Share Button -->
    <a class="fbtn share linkedin" href="#"><i class="fa fa-linkedin"></i></a>
    <!-- Buffer Share Button -->
    <a class="fbtn share buffer" href="#"><i class="fa fa-share-square-o"></i></a>
</div>

The CSS

.socialfloat {
    display: block;
    position: absolute;
    left: 0;
    top: 200px;
    z-index: 9999;
}
.socialfloat .fbtn {
    width: 50px;
    height: 50px;
    display: block;
    color: #fff;
    text-align: center;
}
.socialfloat .fbtn i {
    font-size: 30px;
    line-height: 50px;
}

And at this point, your buttons should look like the following:

Adding the Sharing Links

Now that we have our buttons ready, all we need to do is add the sharing links. Below I’ve collected the links for the following social media sites: Facebook, Google Plus, Twitter, Stumbleupon, Pinterest, LinkedIn and Buffer

Facebook

The Facebook share link is pretty easy, it only requires the URL of the page you want to share.

@YOU-URL - The url of the web page you want to share

http://www.facebook.com/sharer/sharer.php?u=YOUR-URL

Google Plus

The Google Plus share link is easy as well, since it only needs an url.

@YOU-URL - The url of the web page you want to share

https://plus.google.com/share?url=YOUR-URL

Twitter

For twitter, we need a short description, the URL and the twitter username we want to share it with.

@YOU-URL - The url of the web page you want to share
@YOUR-TEXT - A short description/title
@TWITTER-HANDLER - Twitter Username

https://twitter.com/intent/tweet?text=YOUR-TEXT&url=YOUR-URL&via=TWITTER-HANDLER

Stumbleupon

For Stumbleupon, we need the url of the page, and the title of the page.

@YOU-URL - The url of the web page you want to share
@YOUR-TITLE - The title of the web page

http://www.stumbleupon.com/submit?url=YOUR-URL&title=YOUR-TITLE

Now, since pinterest is an image based social platform, we need a bit more information about the page. Such as an image, description and url.

@YOU-URL - The url of the web page you want to share
@YOUR-DESCRIPTION - A Description of the page.
@YOUR-IMAGE-SOURCE - The link to the image that represents the page. ( Features image )

http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=YOUR-IMAGE-SRC

Buffer

Buffer is pretty easy as well, only requires an URL and a short description or title.

@YOU-URL - The url of the web page you want to share
@YOUR-TEXT - A short description/title

https://buffer.com/add?text=YOUR-TEXT&url=YOUR-URL

Buffer is pretty easy as well, only requires an URL and a short description or title.

@YOU-URL - The url of the web page you want to share
@YOUR-TITLE - The Title of the Page

http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&source=YOUR-URL

Now that we have the sharing links all we need to do is add them to your buttons, and replace the YOUR-URL with the page url and so on.

Buffing it up with a bit of jQuery

I know I said at the beginning of the tutorial that using JavaScript will slow the load speed, but, I’m more then sure that your project already has a jQuery library included so what we’re going to do won’t do any harm.

For now, when we click the buttons, they’ll open up a new tab in the browser in order to handle the sharing. But, with a bit of jQuery we can make it so a new window pops up, for easier sharing.

<script type="text/javascript">
    jQuery(document).ready(function($) {
   $('.share').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});
</script>

After you added the code above, into the footer of your pages, and you have jQuery included, when ever someone clicks the sharing buttons, a new small window will popup to share the content.

Also, check out my other tutorials where I show you how to add social share count to sharing buttons.

I hope this tutorial helps you create your own social sharing buttons. You can tinker around with these and come up with nice design and what not. If you have any questions or suggestions, feel free to leave a comment down below!