Tagged linkedin

Lazy-load a LinkedIn Sharing button after the JavaScript window.load event

Adding social networking sharing buttons to your site has become almost a ubiquitous step in Web development, to the point when some designers have stopped thinking about the performance impact of rendering multiple buttons via JavaScript while a page is still loading. The delay might not be noticeable for, say, 1 or 2 buttons, but when you’re rendering multiple buttons per page (when you have a button to share individual Tweets on a page, for example), it can get out of hand (turns out JavaScript crashing the browser creates a user-unfriendly experience for most people).

The solution is to lazy-load the buttons when you need them, either when a user clicks to expose a previously hidden div, or at the very least after the window.load JavaScript event, to prevent slowing your pageload times down. Here’s an example of a simple way to lazy-load a LinkedIn Share button on window.load:

First, include the necessary scripts (LinkedIn’s in.js and jQuery). You can do this in the footer if you want…after all, you’re not doing anything with them until much later in JavaScript-time:



Next, add some jQuery in a script tag that looks for any script tag with a type of ‘unparsed-IN/Share’ (the name doesn’t matter, as long as it’s NOT IN/Share, since the whole point here is you don’t want the in.js script to parse the tag). Depending on the size of your DOM, you may want to be more specific with your jQuery selector…a div or a section of content is fine, and you can bind to a click event, a scroll event, or whatever else you’d like to initiate the parsing of your LinkedIn buttons:

 jQuery(window).load(function(){
    jQuery('body').find('script[type="unparsed-IN/Share"]').each(function(){
      jQuery(this).attr('type', 'IN/Share');
      IN.parse(document); //you can also use getElementById('id') in place of document here
    });
  });

Finally, you just need to add LinkedIn sharing tags in the following manner. The key here is to change the JS script type from IN/Share to unparsed-IN/Share (or whatever you chose in the jQuery above), which will cause the tag not to be rendered when in.js is loaded, allowing you to control with the JS when the tag is actually parsed, using IN.parse (which can be applied to the document as a whole, or an element as retrieved by the built-in JS document.getElementById method.


Update: As Howard points out in the comment section, if you don’t need to load the in.js script to render any LinkedIn buttons or content earlier, you can always accomplish lazy-loading by simply deferring the script load until you want to render the buttons. This allows you to avoid parsing and replacing the ‘type’ on each JavaScript snippet. If you need LinkedIn content to render both before the onload event as well as after, though, you’ll still need to do the replacement.

LinkedIn.com: Just a giant back-patting circle?

The new thing in career ‘connections’ is LinkedIn.com, the website that allows you to add colleagues and former classmates to your own personal network, for the purpose of furthering your career and opening new avenues through the people you already know. On the face of it, LinkedIn seems kind of neat–you can list all the people you work with as ‘Connections,’ create a network of people you ‘trust’ as business contacts, and even track down old classmates to see if you have a better job than they do. There’s also one other thing: you can write recommendations for your connections, which will appear in their profile after they approve them. In other words, people can comment on the quality of your work, and you can then choose whether or not to let that appear in your profile. Not surprisingly, there are quite a few glowing recommendations out there, and little to no criticism.

This raises the question in my mind as to whether or not LinkedIn truly goes beyond the level of mere facebook-style messaging and casual communication to become a vehicle for business, and not just social, networking. Admittedly, it is fun to see how many people consider you their colleague, not to mention how many people are willing to scratch your back with a positive recommendation, fully aware that the favor could be quickly and easily returned, and if the product is unsatisfactory, blocked from public view. However, I can’t imagine that prospective employers or anyone that doesn’t know the individual personally would take any useful information from this site, as it’s so heavily slanted in favor of member control over reviews and recommendations.

linkedin, social networking, facebook, myspace, business, connection, colleague, review, profile