How to load AddThis with jQuery
I recently noticed that AddThis Social Buttons plugin adds about 300KB to my site and moreover it adds 2-3 seconds for loading my page. So how to load AddThis Social Media plugin with jQuery in a background and not to add odd weight to your page? Not a big deal at all! Just read carefully this article.
Add this CSS into HEAD section of your page:
<![CDATA[
<style>
.share-buttons-div {
width: 48px;
left: -50px;
display: block;
position: fixed;
top: 25%;
transition: left 0.5s ease 0.5s;
}
.share-buttons-div-visible{
left:-2px!important;
}
#share-buttons-div .addthis_toolbox a span {
width: 48px;
height: 48px;
background-position: 50% center;
}
</style>
]]>
Add this HTML to your page before closing BODY tag:
<![CDATA[
<div id="share-buttons-div" class="share-buttons-div" >
<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_linkedin"></a>
<a class="addthis_button_google_plusone_share"></a>
</div>
</div>
]]>
Add this script after the mentioned above html to your page:
<![CDATA[
<script>
jQuery(document).ready(function(){
var tm = window.setTimeout(function(){
jQuery.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53xxxxxxxxxxxxx")
.done(function() {
addthis.toolbox('.addthis_toolbox');
});
jQuery('.share-buttons-div').addClass('share-buttons-div-visible');
clearTimeout(tm);
}, 3000);
});
</script>
]]>
How it works
The HTML code will add a container for your Social buttons and the CSS code will fix this buttons on the left side of your page. After your page is loaded jQuery code adds AddThis javascript to your site in 3 seconds. After this code is loaded it executes addthis.toolbox('.addthis_toolbox') which adds these Social buttons.
"//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53xxxxxxxxxxxxx" - go to www.addthis.com and get your code for the buttons
Joomla Articles
