Skip to content

Instantly share code, notes, and snippets.

@yasuoza

yasuoza/index.html

Created July 1, 2012 06:38
Show Gist options
  • Save yasuoza/3027177 to your computer and use it in GitHub Desktop.
Save yasuoza/3027177 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy social button loading
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Lazy share button</title>
</head>
<body>
<h3>MouseOver below this label.</h3>
<h4>URL: <a href="http://jquery.com">http://jquery.com</a></h4>
<div class="lazy-share-widget" id="sharing-ENTRY_ID" style="height:460px;width:320px">
<!-- facebook & twitter & linkedin & g+ -->
<div id="fb-newshare-ENTRY_ID"></div>
<div id="tweet-newshare-ENTRY_ID"></div>
<div id="linkedin-newshare-ENTRY_ID"></div>
<div><span id="gplus-newshare-ENTRY_ID"></span></div>
<div><span id="hatena-newshare-ENTRY_ID"></span></div>
<a href="http://jquery.com" title="jQuery" id="headline-ENTRY_ID" ></a>
</div>
<!-- JavaScript libraries -->
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js?ver=3.5-alpha#xfbml=1'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src="js/lazy_sb.js"></script>
</body>
</html>
Raw
lazy_sb.js
/**
* Asyncronous social button loading
* Refference: https://gist.github.com/3027177
*
* 2012 Yasuharu Ozaki.
* MIT License.
*/
jQuery(function($) {
$('div[id^="sharing"]').on('mouseenter', function(event) {
var $this = $(this),
loadedClassName = 'lz-loaded';
if ($this.hasClass(loadedClassName)) {
return;
}
$this
.unbind(event.type)
.addClass(loadedClassName);
var id = $this.attr("id").slice(8);
var permalink = $('#headline-' + id).attr("href");
var title = $('#headline-' + id).attr("title");
var fb_str = '<fb:like href="' + permalink + '" layout="button_count" send="false" show_faces="false"></fb:like>';
var twitter_str = '<span style="float:left;width:100px;margin-right:5px;"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=' + encodeURI(permalink) + '&amp;text=' + encodeURI(title) + '&amp;via=techcrunch" style="width:130px; height:20px;" allowTransparency="true" frameborder="0"></iframe></span>';
var linkedin_str = '<scr' + 'ipt id="inshare-' + id + '" type="in/share" data-url="' + permalink + '" data-counter="right"></scr' + 'ipt>';
var hatena_str = '<a href="http://b.hatena.ne.jp/entry/' + encodeURI(permalink) + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + encodeURI(title) + '" data-hatena-bookmark-layout="standard" title="Add this entry to hatena bookmark"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="Add this entry to hatena bookmark" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>';
$('#sharing-' + id).css('background', 'none');
$('#fb-newshare-' + id).removeClass('facebook').css('width', 'auto').html(fb_str);
FB.XFBML.parse(document.getElementById('fb-newshare-' + id));
$('#tweet-newshare-' + id).css('width', '110px').removeClass('twitter').html(twitter_str);
$('#gplus-newshare-' + id).parent().removeClass('gplus');
if (typeof (gapi) != 'object') {
jQuery.getScript('http://apis.google.com/js/plusone.js', function() {
gapi.plusone.render('gplus-newshare-' + id, {"href": permalink,"size": 'medium'});
});
}
else {
gapi.plusone.render('gplus-newshare-' + id, {"href": permalink,"size": 'medium'});
}
$('#linkedin-newshare-' + id).css('width', '110px').removeClass('linkedin').html(linkedin_str);
if (typeof (IN) != 'object') {
jQuery.getScript('http://platform.linkedin.com/in.js');
}
else {
IN.parse(document.getElementById('linkedin-newshare-' + id));
}
$('#hatena-newshare-' + id).removeClass('hatena').html(hatena_str);
});
});
@yasuoza
Copy link
Author

yasuoza commented Jul 1, 2012

Lazy share button (jQuery plugin)

About

Load share button asyncronously.
This plugin may be useful in a page which have many entries and
social buttons such as site top and news top page.

Demo.

This code is derived from TechCrunch.

How to use

  • Load jquery.js(latest version is highly recommended)
  • Load lazy-sb.js
  • Set share information HTML tags like following.
  • Replace ENTRY_ID with entry specified id.
    <div class="lazy-share-widget" id="sharing-ENTRY_ID" style="height:460px;width:320px">

      <!-- facebook & twitter & linkedin & g+ -->
      <div id="fb-newshare-ENTRY_ID"></div>
      <div id="tweet-newshare-ENTRY_ID"></div>
      <div id="linkedin-newshare-ENTRY_ID"></div>
      <div><span id="gplus-newshare-ENTRY_ID"></span></div>
      <div><span id="hatena-newshare-ENTRY_ID"></span></div>

      <a href="http://jquery.com" title="jQuery" id="headline-ENTRY_ID" ></a>
    </div>

License

MIT.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment