Downloaded 28 times
Uploaded byJonathan Julian
Building 3rd party widgets with JavaScript
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.
Building 3rd party widgets with JavaScript
- 1. Building 3rd Party Widgetswith JavaScript Jonathan Julian @jonathanjulian Tuesday, January 31, 12
- 2. They’re Everywhere • Tweetbutton • Facebook Like button • Google +1 button Tuesday, January 31, 12
- 3. How do theywork? • 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 theSame 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 mightneed 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 theJS 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 thatthe 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.
- 9. Example • Server: Apache/PHPon 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.
- 11.