Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Lazy Loading those 3rd Party Social Widgets slowing down your site (from html5rocks.com)
window.thirdParty = {
init: function() {
$('.share').before('<div class="share preview" onmouseover="thirdParty.load(this);"><img src="/static/images/share.png"></div>');
},
load: function(el) {
$(el).remove();
thirdParty.plus1();
thirdParty.twitter();
thirdParty.facebook();
$('.share').css('display', 'block');
},
facebook: function() {
$('li.facebook').not(':has("iframe")').html(function() {
var html = '<iframe src="//www.facebook.com/plugins/like.php?href='+
this.getAttribute('data-url') +
'&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like'+
'&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" '+
'frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;"'+
' allowTransparency="true"></iframe>';
return html;
});
},
twitter: function() {
$.ajax({
url : '//platform.twitter.com/widgets.js',
dataType : 'script', cache: true,
success : function() { twttr.widgets.load(); }
});
},
plus1: function() {
// https://developers.google.com/+/plugins/+1button/#async-load
window.___gcfg = { lang: document.documentElement.lang, parsetags: 'explicit' };
$.ajax({
url : '//apis.google.com/js/plusone.js',
dataType : 'script', cache: true,
success : function(){
gapi.plusone.go();
gapi.plus.go();
}
});
}
};
thirdParty.init();
<div class="share">
<ul>
<li class="googleplus"><div class="g-plusone" data-size="medium" data-count="true" data-href=%%URL_TO_SHARE%%"></div></li>
<li class="facebook" data-url="%%URL_TO_SHARE%%"></li>
<li class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-text="%%TWEET_TEXT%%" data-url="%%URL_TO_SHARE%%" data-lang="en" data-related="%%RELATED_ACCOUNTS%%">Tweet</a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.