This document discusses how third party widgets using JavaScript work and some best practices for implementing them. Website owners can paste JavaScript code onto their site that will load and run when the page loads. This code allows the widget to communicate back to its application rather than the hosting site. The document covers issues like same origin policy, loading necessary libraries, avoiding namespace collisions, and server-side considerations like serving JSON or HTML. It provides an example widget project on GitHub that demonstrates these concepts.

1. Building 3rd Party
Widgets with JavaScript
Jonathan Julian
@jonathanjulian
Tuesday, January 31, 12

2. They’re Everywhere
• Tweet button
• Facebook Like button
• Google +1 button
Tuesday, January 31, 12

3. How do they work?
• Website owner pastes JavaScript
code onto their site
• Code runs when page is loaded
• Widget communicates back to the
application, not the hosting site
• If logged-in, user gets features
Tuesday, January 31, 12

4. What about the Same
Origin Policy?
• JSONP
• Alternatives: use CORS or HTML5
PostMessage
• Send data to the server as query
params in JSONP
Tuesday, January 31, 12

5. Issues
• You might need to load JS libs
that the host has not loaded
• You want your own style
• Avoid namespace collisions
Tuesday, January 31, 12

6. Solutions
• Load the JS you need manually
• Load a reset stylesheet along with
your own css
• Keep your code namespaced by
running it in an anonymous
function
Tuesday, January 31, 12

7. Server-side
• Note that the widget js might
actually be a dynamic action
• You may choose to serve JSON, or
straight HTML, depending on the
widget
Tuesday, January 31, 12

8. github.com/jjulian/
example_javascript_widget
Tuesday, January 31, 12

9. Example
• Server: Apache/PHP on 8080
• The Widget: /widget.js
• Style: /widget.css
• JSONP submissions:
/widget_submit.php
• Widget uses jQuery, cleanslate.css, and
json2.js
• github.com/jjulian/example_javascript_widget
Tuesday, January 31, 12

10. bit.ly/jswidget
Tuesday, January 31, 12

11. References
• http://alexmarandon.com/
articles/web_widget_jquery/
• http://shortmail.com/widgets/
compose-widget.html
Tuesday, January 31, 12