The recently launched Apply With LinkedIn plugin is a great way to reach out and capture quality candidates using the power of the LinkedIn profile. In this post, I'll tell you how it's also a professional plugin that is fast, compliant and runs on open technologies.
Apply With LinkedIn lets candidates skip the long application forms, use their network to solicit referrals, and find people they know at a company. Companies can use the same network to learn more about their candidates, view their recommendations on their profiles, and simplify their application flow to collect more passive candidates.
While Apply with LinkedIn was built to make hiring managers and job seekers happy, our entire plugin framework was built with web developers in mind. To earn a spot on your webpage, we worked hard to create a system that is fast, compliant, and built on open technologies. Read on to learn more about the technology behind Apply, or, if you want to jump straight into the implementation, check out the generator or the documentation.
Fast
When you're embedded on other people's sites, the absolute most important thing you can do is be fast. When that fails, the next most important thing you can do is step out of the way. When loading the framework, we strive for both. On the raw speed aspect, LinkedIn sends the stub javascript from a CDN on platform.linkedin.com that weighs in at a mere 0.9k. The whole purpose of this bootloader file is to find itself, extract the parameters such as API Key, and then request either the user environment file or the larger framework. From in.js on, the framework is loaded asynchronously using document.getElementsByTagName('head')[0].appendChild(). As for in.js itself, if the small file off the CDN still isn't fast enough, you can load that asynchronously as well:
To avoid unnecessary calls during loading when an API key is provided, the second call in the framework goes to www.linkedin.com in order to set up the environment. It enables LinkedIn to hand out any dynamic data we need, perform any versioning related calls, and provide the hosting page with oauth credentials if the user has already authenticated the web page. The last step (with and without an API Key), is to load our main framework again using appendChild() to avoid blocking the parent page.
HTML 5 Compliant
With all of the Professional Plugins, LinkedIn took the development philosophy that we should behave like guests in our hosting page. That goes beyond blocking the page load though and extends down into the fundamentals of how your document validates. The below sample is a valid HTML 5 page. Check it for yourself at the Experimental W3 Validator.
The most important change from the docs on developer.linkedin.com is when putting your JavaScript parameters in, you can enclose the script tag in block comments /* and */, which will bring your document into compliance. Using the fully asynchronous method above will also bring you into compliance since your script tag won't have any content in it at all. When using the plugin tags themselves, the spec is again our ally. We use the data-* attributes to define additional variables as part of the HTML5 specification. We also make use of the type attribute for declaring the plugin. Since the IN namespace isn't used for a scripting MIME-type, all browsers properly decline to render the script tag and its content. While these tags don't validate in HTML 4 documents (due to the data attributes), they are also not known to cause any problems including the legacy browsers such as Internet Explorer 6.
Built on Open Technologies
When the Platform Framework first launched, we used our own cross-domain communication framework using window.postMessage. Since then, we've moved our code 100% over to easyXDM and have become contributors to the project. When it came to a tradeoff between supporting something in-house or contributing to the larger "good" of the frameworks out there, we chose the community route. The easyXDM library is widely used by many sites and it's a great project for cross-domain message passing. In a later blog post, we'll go into the details and code about how to create cross-domain communication channels when popups, CDNs, and the plugins are all in play. In the meantime, our fork of easyXDM can be found on github in the "li_integrate" branch.
You can also find our generator code and Object Oriented JS Framework Sslac in the github repositories of our developers.
Apply to LinkedIn
If building the next generation of the professional web sounds like you, check out careers at LinkedIn. Or, better yet, apply as a Web Developer right here!