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


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


Who's Using It?• LinkedIn (of course)

• Bloomberg

• Hoovers

• CNN Money


Our Goal• Hook into our Production Framework

• Add your own code

• Create a custom IN/* Tag

• Use the custom tag to launch your widget


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


Three JS Files

in.js

userspace

framework

platform.linkedin.com

www.linkedin.com

platform.linkedin.com

initialize


A Thin Bootloader• Find itself (in.js)

• Parse its script contents

• Asynchronously load userspace


The Userspace is Key• www.linkedin.com

• Dynamic Data

• Asynchronously load framework


Our Big Payload• The remaining framework

• Events, Objects, Tag Parser

• System Initialization


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>


http://platform.linkedin.com/in.js


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>




http://example.com/yoururl

http://example.com/yoururl

Declaring an Extension• extensionName@extensionUrl

• Reachable by Client

• Contains JS Code

• Included Similar to JSONP


Your Extension Loads

in.js

userspace

framework

initialize

extension A extension B

Loads in ParallelDuring Framework

When all ExtensionsAre Loaded


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>




https://gist.github.com/raw/832172/helloworldtag.js


The Extension HarnessIN.$extensions("HelloWorld", function HelloWorld() { // Body of Extension Goes Here console.log("HelloWorld Extension has Executed"); });


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); });


IN.addTag()• Name of the Tag (IN/_______)

• Class to Instantiate for Tag


Sslac (very briefly)• Simple OO Class Library

• .Constructor() .Extends() .Method()

• this.Parent()


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


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>






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


http://goo.gl/QGkfs

http://goo.gl/QGkfs

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); });


Button


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); });


Callout


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); });


http://example.com/my/widget.php

http://example.com/my/widget.php

Window: inline-iframe


Window: modal


Window: popup


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


http://goo.gl/3wcdf

http://goo.gl/3wcdf

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>


http://goo.gl/3wcdf

http://goo.gl/3wcdf

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); });


http://jheuser-md.linkedin.biz:8081/sytycw/sample2.html

http://jheuser-md.linkedin.biz:8081/sytycw/sample2.html

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>






The Result


(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.


creating linkedin widgets

Documents