Customize addThis

by Robert Herring

HTML

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50bd330b4fbbfeb2"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_pinterest_share"></a>
    <a class="addthis_button_more"><i class="fa fa-share-alt fa-2x"></i></a>
</div>
<!-- AddThis Button END -->

CSS

* {
    margin:0;
    padding:0;
}
.addthis_toolbox {
    margin: 15px;
}
.addthis_toolbox a {
    height: 32px;
    width: 32px;
    overflow: hidden;
}
.addthis_button_more {
    background: #749EAC;
    color: #fff;
}
.addthis_button_more i {
    height: 32px;
    width: 27px;
    padding: 3px 0;
    font-size:1.6em;
    text-align:center;
    overflow: hidden;
}

JavaScript

var addthis_config = {
    ui_click: true 
} 

// Do this when the AddThis API is ready
function addthisReady(evt) {
    // Place the color of your website here.
    var websiteColor = "#749EAC";

    // This changes the color once the "addThis" buttons have been loaded    
    $('.addthis_toolbox > a').find('span').css("background-color", websiteColor);
}

// Listen for the ready event
addthis.addEventListener('addthis.ready', addthisReady);

$('.addthis_toolbox > a').hover(function() {
    $('.addthis_toolbox > a').not(this).stop().fadeTo( "fast" , 0.3);
}, function() {
    $('.addthis_toolbox > a').not(this).stop().fadeTo( "fast" , 1);
});