Creating LinkedIn Widgets
-
Upload
jakob-heuser -
Category
Documents
-
view
1.010 -
download
2
description
Transcript of Creating LinkedIn Widgets
(Hint: You Can)
Create a LinkedIn Widget
Jakob HeuserFor LinkedIn
Thursday, February 17, 2011
The Dances• Aparima: Introduction
• Ballet: How LinkedIn's JS API Loads
• Cha Cha: Injecting Your Own Code
• Disco: Tags
• Electric Boogaloo: Objects
• Foxtrot: A Sample Module
Thursday, February 17, 2011
AparimaIntroduction
A dance from Tahiti and the Cook Islands. Similar in style to the hula.Thursday, February 17, 2011
Why The JS APIs?• No "OAuth" Dance
• Easiest way to making REST calls
• Framework to Embed LinkedIn on the Internet
Thursday, February 17, 2011
Who's Using It?• LinkedIn (of course)
• Bloomberg
• Hoovers
• CNN Money
Thursday, February 17, 2011
Our Goal• Hook into our Production Framework
• Add your own code
• Create a custom IN/* Tag
• Use the custom tag to launch your widget
Thursday, February 17, 2011
BalletHow the LinkedIn JS API Loads
A formalized performance dance which originated in the Italian Renaissance courts of the 15th century.Thursday, February 17, 2011
Three JS Files
in.js
userspace
framework
initialize
Thursday, February 17, 2011
Three JS Files
in.js
userspace
framework
platform.linkedin.com
www.linkedin.com
platform.linkedin.com
initialize
Thursday, February 17, 2011
A Thin Bootloader• Find itself (in.js)
• Parse its script contents
• Asynchronously load userspace
Thursday, February 17, 2011
The Userspace is Key• www.linkedin.com
• Dynamic Data
• Asynchronously load framework
Thursday, February 17, 2011
Our Big Payload• The remaining framework
• Events, Objects, Tag Parser
• System Initialization
Thursday, February 17, 2011
Cha ChaInjecting Your Own Code
It’s onomatopoetic name comes from the music itself, a song composed by Enrique John in 1953.Thursday, February 17, 2011
Modifying The Script Tag<script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: [your_api_key] authorize: [true|false]</script>
Thursday, February 17, 2011
Modifying The Script Tag<script type="text/javascript" src="http://platform.linkedin.com/in.js"> api_key: [your_api_key] authorize: [true|false] extensions: [yourname]@http://example.com/yoururl</script>
Thursday, February 17, 2011
Declaring an Extension• extensionName@extensionUrl
• Reachable by Client
• Contains JS Code
• Included Similar to JSONP
Thursday, February 17, 2011
Your Extension Loads
in.js
userspace
framework
initialize
extension A extension B
Loads in ParallelDuring Framework
When all ExtensionsAre Loaded
Thursday, February 17, 2011
A Real Example<!DOCTYPE><html><head><title>Widget!</title><script type="text/javascript" src="http://platform.linkedin.com/in.js"> extensions: HelloWorld@https://gist.github.com/raw/832172/helloworldtag.js</script></head><body>
</body></html>
Thursday, February 17, 2011
The Extension HarnessIN.$extensions("HelloWorld", function HelloWorld() { // Body of Extension Goes Here console.log("HelloWorld Extension has Executed"); });
Thursday, February 17, 2011
DiscoCreating a Custom Tag
By the mid 70’s the most prominent Disco dance was the “Hustle”, popularized by Saturday Night Fever.Thursday, February 17, 2011
Registering a TagIN.$extensions("HelloWorld", function HelloWorld() { Sslac.Class("IN.Tags.HelloWorld").Extends("IN.Tags.Base") .Constructor(function Constructor(el, attributes) { this.Parent(el, attributes); this.el().innerHTML = "Hello World to "+attributes.name; }); IN.addTag("HelloWorld", IN.Tags.HelloWorld); });
Thursday, February 17, 2011
IN.addTag()• Name of the Tag (IN/_______)
• Class to Instantiate for Tag
Thursday, February 17, 2011
Sslac (very briefly)• Simple OO Class Library
• .Constructor() .Extends() .Method()
• this.Parent()
Thursday, February 17, 2011
Constructor(el, attr)• el (the element we’re inserting into)
• this.el() works throughout a tag
• attr (any key/value pairs from data-*)
• data-foo = attr.foo
• data-bar = attr.bar
Thursday, February 17, 2011
The Result<!DOCTYPE><html><head><title>Widget!</title><script type="text/javascript" src="http://platform.linkedin.com/in.js"> extensions: HelloWorld@https://gist.github.com/raw/832172/helloworldtag.js</script></head><body><script type="IN/HelloWorld" data-name="Jakob"></script></body></html>
Thursday, February 17, 2011
Electric BoogalooObjects (and the all important “window”)
Perhaps the birth of popping, the Electric Boogaloos made harmony of Funk and Hip Hop dance moves.Thursday, February 17, 2011
Changes Upcoming• This piece is IN MOTION
• new IN.Objects.Window() will be replaced bynew IN.Objects.SmartWindow()(because it’s smarter)
• Protect Your Hack:WindowPatch@http://goo.gl/QGkfs
Thursday, February 17, 2011
ButtonIN.$extensions("HelloWorld", function HelloWorld() { Sslac.Class("IN.Tags.HelloWorld").Extends("IN.Tags.Base") .Constructor(function Constructor(el, attributes) { this.Parent(el, attributes); this.el().innerHTML = "Hello World to "+attributes.name; var button = new IN.Objects.Button({ title: "Click Me" }); button.place(this.el()); IN.Event.on(button, "click", function(evt) { evt.preventDefault(); document.body.style.color = "#f00"; }, this); }); IN.addTag("HelloWorld", IN.Tags.HelloWorld); });
Thursday, February 17, 2011
Button
Thursday, February 17, 2011
CalloutIN.$extensions("HelloWorld", function HelloWorld() { Sslac.Class("IN.Tags.HelloWorld").Extends("IN.Tags.Base") .Constructor(function Constructor(el, attributes) { this.Parent(el, attributes); this.el().innerHTML = "Hello World to "+attributes.name; var callout = new IN.Objects.Callout({ position: "right", content: "Words!" }); callout.place(this.el()); }); IN.addTag("HelloWorld", IN.Tags.HelloWorld); });
Thursday, February 17, 2011
Callout
Thursday, February 17, 2011
WindowIN.$extensions("HelloWorld", function HelloWorld() { Sslac.Class("IN.Tags.HelloWorld").Extends("IN.Tags.Base") .Constructor(function Constructor(el, attributes) { this.Parent(el, attributes); this.el().innerHTML = "Hello World to "+attributes.name; var win = new IN.Objects.Window({ url: "http://example.com/my/widget.php", mode: "inline-iframe" }); win.place(this.el()); }); IN.addTag("HelloWorld", IN.Tags.HelloWorld); });
Thursday, February 17, 2011
Window: inline-iframe
Thursday, February 17, 2011
Window: modal
Thursday, February 17, 2011
Window: popup
Thursday, February 17, 2011
FoxtrotA Sample Module
Originally danced to ragtime, the Foxtrot's most famous accompaniment was "Rock Around the Clock" (1952)Thursday, February 17, 2011
In Your Widget• One JavaScript:
http://goo.gl/3wcdf(Please copy to your own server)
• One Important HTML Structure<div id="wrapper"><div id="body">...
• The rest is automatic
Thursday, February 17, 2011
Your Widget HTML<!DOCTYPE><html><head><script type="text/javascript" src="http://goo.gl/3wcdf"></script><style>* { margin: 0; padding: 0; }#body { width: 400px; }</style></head><body> <div id="wrapper"> <div id="body"> Your widget can go here. This will<br/> Auto Resize to your content. Location is: <span id="loc"></span> </div> </div> <script type="text/javascript"> var loc = location.href.replace(location.hash, ""); document.getElementById("loc").innerHTML = loc; </script></body></html>
Thursday, February 17, 2011
Your Extension JSIN.$extensions("HelloWorld", function HelloWorld() { Sslac.Class("IN.Tags.HelloWorld").Extends("IN.Tags.Base") .Constructor(function Constructor(el, attributes) { this.Parent(el, attributes); var win = new IN.Objects.Window({ mode: "inline-iframe", url: "http://jheuser-md.linkedin.biz:8081/sytycw/sample2.html" }); win.place(this.el()); }); IN.addTag("HelloWorld", IN.Tags.HelloWorld); });
Thursday, February 17, 2011
Implementor HTML<!DOCTYPE><html><head><title>Widget!</title><script type="text/javascript" src="http://platform.linkedin.com/in.js"> extensions: HelloWorld@https://gist.github.com/raw/832172/helloworldtag.js</script></head><body><script type="IN/HelloWorld"></script></body></html>
Thursday, February 17, 2011
The Result
Thursday, February 17, 2011
(Hint: You Can)
Ask Questions?
All photos unceremoniously ripped from Google. I won't make money off this. Should I ever end up making money off this, all these lovely images will be removed before said money is made. That said, pictures of people dancing is a thousand and a half times better than just staring at a wall of text.Some day, I want to do the one-handed awesomeness on the left.
Thursday, February 17, 2011