Creating LinkedIn Widgets
-
Upload
jakob-heuser -
Category
Documents
-
view
1.020 -
download
2
description
Transcript of Creating LinkedIn Widgets
![Page 1: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/1.jpg)
(Hint: You Can)
Create a LinkedIn Widget
Jakob HeuserFor LinkedIn
Thursday, February 17, 2011
![Page 2: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/2.jpg)
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
![Page 3: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/3.jpg)
AparimaIntroduction
A dance from Tahiti and the Cook Islands. Similar in style to the hula.Thursday, February 17, 2011
![Page 4: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/4.jpg)
Why The JS APIs?• No "OAuth" Dance
• Easiest way to making REST calls
• Framework to Embed LinkedIn on the Internet
Thursday, February 17, 2011
![Page 5: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/5.jpg)
Who's Using It?• LinkedIn (of course)
• Bloomberg
• Hoovers
• CNN Money
Thursday, February 17, 2011
![Page 6: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/6.jpg)
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
![Page 7: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/7.jpg)
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
![Page 8: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/8.jpg)
Three JS Files
in.js
userspace
framework
initialize
Thursday, February 17, 2011
![Page 9: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/9.jpg)
Three JS Files
in.js
userspace
framework
platform.linkedin.com
www.linkedin.com
platform.linkedin.com
initialize
Thursday, February 17, 2011
![Page 10: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/10.jpg)
A Thin Bootloader• Find itself (in.js)
• Parse its script contents
• Asynchronously load userspace
Thursday, February 17, 2011
![Page 11: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/11.jpg)
The Userspace is Key• www.linkedin.com
• Dynamic Data
• Asynchronously load framework
Thursday, February 17, 2011
![Page 12: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/12.jpg)
Our Big Payload• The remaining framework
• Events, Objects, Tag Parser
• System Initialization
Thursday, February 17, 2011
![Page 13: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/13.jpg)
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
![Page 14: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/14.jpg)
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
![Page 15: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/15.jpg)
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
![Page 16: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/16.jpg)
Declaring an Extension• extensionName@extensionUrl
• Reachable by Client
• Contains JS Code
• Included Similar to JSONP
Thursday, February 17, 2011
![Page 17: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/17.jpg)
Your Extension Loads
in.js
userspace
framework
initialize
extension A extension B
Loads in ParallelDuring Framework
When all ExtensionsAre Loaded
Thursday, February 17, 2011
![Page 18: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/18.jpg)
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
![Page 19: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/19.jpg)
The Extension HarnessIN.$extensions("HelloWorld", function HelloWorld() { // Body of Extension Goes Here console.log("HelloWorld Extension has Executed"); });
Thursday, February 17, 2011
![Page 20: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/20.jpg)
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
![Page 21: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/21.jpg)
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
![Page 22: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/22.jpg)
IN.addTag()• Name of the Tag (IN/_______)
• Class to Instantiate for Tag
Thursday, February 17, 2011
![Page 23: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/23.jpg)
Sslac (very briefly)• Simple OO Class Library
• .Constructor() .Extends() .Method()
• this.Parent()
Thursday, February 17, 2011
![Page 24: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/24.jpg)
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
![Page 25: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/25.jpg)
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
![Page 26: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/26.jpg)
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
![Page 27: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/27.jpg)
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
![Page 28: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/28.jpg)
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
![Page 29: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/29.jpg)
Button
Thursday, February 17, 2011
![Page 30: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/30.jpg)
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
![Page 31: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/31.jpg)
Callout
Thursday, February 17, 2011
![Page 32: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/32.jpg)
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
![Page 33: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/33.jpg)
Window: inline-iframe
Thursday, February 17, 2011
![Page 34: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/34.jpg)
Window: modal
Thursday, February 17, 2011
![Page 35: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/35.jpg)
Window: popup
Thursday, February 17, 2011
![Page 36: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/36.jpg)
FoxtrotA Sample Module
Originally danced to ragtime, the Foxtrot's most famous accompaniment was "Rock Around the Clock" (1952)Thursday, February 17, 2011
![Page 37: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/37.jpg)
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
![Page 38: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/38.jpg)
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
![Page 39: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/39.jpg)
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
![Page 40: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/40.jpg)
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
![Page 41: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/41.jpg)
The Result
Thursday, February 17, 2011
![Page 42: Creating LinkedIn Widgets](https://reader036.fdocuments.net/reader036/viewer/2022081801/5484ff715806b5a9588b46ff/html5/thumbnails/42.jpg)
(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