Building 3rd party widgets with JavaScript

7,853 views
7,674 views

Published on

How does the Facebook Like button work? How do sites like Twitter offer widgets that you can embed on your own blog? In this session, we'll build our own widget for cross-domain communication, while also covering dynamic script loading, JSONP, iframe hacking, HTML5 PostMessage, etc.

http://www.meetup.com/baltimore-dc-javascript-users/events/35051872/

Published in: Technology, Design

Building 3rd party widgets with JavaScript

  1. 1. Building 3rd Party Widgets with JavaScript Jonathan Julian @jonathanjulianTuesday, January 31, 12
  2. 2. They’re Everywhere • Tweet button • Facebook Like button • Google +1 buttonTuesday, January 31, 12
  3. 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 featuresTuesday, January 31, 12
  4. 4. What about the Same Origin Policy? • JSONP • Alternatives: use CORS or HTML5 PostMessage • Send data to the server as query params in JSONPTuesday, January 31, 12
  5. 5. Issues • You might need to load JS libs that the host has not loaded • You want your own style • Avoid namespace collisionsTuesday, January 31, 12
  6. 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 functionTuesday, January 31, 12
  7. 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 widgetTuesday, January 31, 12
  8. 8. github.com/jjulian/ example_javascript_widgetTuesday, January 31, 12
  9. 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_widgetTuesday, January 31, 12
  10. 10. bit.ly/jswidgetTuesday, January 31, 12
  11. 11. References • http://alexmarandon.com/ articles/web_widget_jquery/ • http://shortmail.com/widgets/ compose-widget.htmlTuesday, January 31, 12

×