Today I want to show You how to reconstruct the AddThis social plugin that can be bought (for 10$/month) on AddThis.com. It's a fancy plugin with really nice effects and real-time statistics of your site's social impact, that's why It costs 10$/month. If You like the graphic of this plugin, want to know ho to re-create and use It on your site this is your way. In this post we only cover the HTML/CSS/JS side of this plugin, if You want some more, please visit AddThis.com.
social-box can be styled to float left or right, to set a margin or to do the hell You want. The nested divs, named social-container, contain (oh, really?) an anchor and another div filled with all the necessary parts of the specific social plugin (in the example I simply put some dots there). This can be very different from plugin to plugin. Google Plus plugin needs a div and a script tag, LinkedIn plugin needs two script tags while Facebook only a single div. Let's be easy, I intentionaly omit this part. We'll cover it in a second moment. Let's be focused on the structure. Here is:
As I previously mentioned the social-box div contains many divs called social-container, one for each sharing button You want to add. The structure is simple and easy to maintain: there's the icon of the social network wrapped in an anchor with a href="#" and the div that contains all the necessary code to make the social plugin work. To easily understand what I'm talking about here is an example, filled with the Facebook button code (the easiest one, the others mess around with the code highlighter plugin running on my site:
Note the margin of every social button. They are all the same except for the gplus-button (margin-rigth). It depends on Google and if You add other buttons, like the pin button You will probably face a problem like this.
If You want to try it, You can share my post using it! And if You want to donwload and use on your site here is the GitHub repository for this plugin. Happy sharing!
lucazpf/addThis-social-plugin GitHub repo
The Markup
Our plugin is basically a main div named social-box with some other div nested, in this example I've inserted 4 buttons, which means 4 divs. You can add all the buttons You want.social-box can be styled to float left or right, to set a margin or to do the hell You want. The nested divs, named social-container, contain (oh, really?) an anchor and another div filled with all the necessary parts of the specific social plugin (in the example I simply put some dots there). This can be very different from plugin to plugin. Google Plus plugin needs a div and a script tag, LinkedIn plugin needs two script tags while Facebook only a single div. Let's be easy, I intentionaly omit this part. We'll cover it in a second moment. Let's be focused on the structure. Here is:
As I previously mentioned the social-box div contains many divs called social-container, one for each sharing button You want to add. The structure is simple and easy to maintain: there's the icon of the social network wrapped in an anchor with a href="#" and the div that contains all the necessary code to make the social plugin work. To easily understand what I'm talking about here is an example, filled with the Facebook button code (the easiest one, the others mess around with the code highlighter plugin running on my site:
Please notice - The class facebook-like is named wrong. The real name is fb-like but with the correct name it would appear the facebook button, not the code.
The styles
In the CSS file I set some properties like the size of the icons, the position of the plugin (on my site is floating right) and some workaround for the social button. Every button is managed different and it's very easy to need some workaround to make all coherent. Important for the plugin effect is that every social button (fb-button, twitter-button etc etc...)is initially not displayed. They will appear by clicking on the icon thanks to jQuery.
.social-box {
clear: both;
}
.social-box img {
height: 25px;
margin-right: 10px;
width: auto;
}
.social-container {
float: left;
}
#fb-button, #twitter-button, #gplus-button, #in-button {
display:none;
}
#fb-button {
float:right;
margin-left:-6px;
margin-right:10px;
margin-top:3px;
}
#twitter-button {
float:right;
margin-left:-6px;
margin-right:10px;
margin-top:3px;
}
#gplus-button {
float:right;
margin-left:-6px;
margin-right:-20px;
margin-top:3px;
}
#in-button {
float:right;
margin-left:-6px;
margin-right:10px;
margin-top:3px;
}
Note the margin of every social button. They are all the same except for the gplus-button (margin-rigth). It depends on Google and if You add other buttons, like the pin button You will probably face a problem like this.
The magic
With a simple jQuery function You can toggle the view of the button, simply by clicking the icon and the relative social button will appear. You can play with the toggle effect to make this plugin a little more fancy
$(document).ready(function() {
$('#in').click(function() {
$('#in-button').fadeToggle("fast");
});
});
$(document).ready(function() {
$('#gplus').click(function() {
$('#gplus-button').fadeToggle("fast");
});
});
$(document).ready(function() {
$('#twitter').click(function() {
$('#twitter-button').fadeToggle("fast");
});
});
$(document).ready(function() {
$('#fb').click(function() {
$('#fb-button').fadeToggle("fast");
});
});
If You want to try it, You can share my post using it! And if You want to donwload and use on your site here is the GitHub repository for this plugin. Happy sharing!
lucazpf/addThis-social-plugin GitHub repo
X
THE END
THE END