Your SlideShare is downloading. ×

Building 3rd party widgets with JavaScript

6,800

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 …

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
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,800
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
22
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building 3rd Party Widgets with JavaScript Jonathan Julian @jonathanjulianTuesday, January 31, 12
  • 2. They’re Everywhere • Tweet button • Facebook Like button • Google +1 buttonTuesday, 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 featuresTuesday, 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 JSONPTuesday, 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 collisionsTuesday, 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 functionTuesday, 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 widgetTuesday, January 31, 12
  • 8. github.com/jjulian/ example_javascript_widgetTuesday, 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_widgetTuesday, January 31, 12
  • 10. bit.ly/jswidgetTuesday, January 31, 12
  • 11. References • http://alexmarandon.com/ articles/web_widget_jquery/ • http://shortmail.com/widgets/ compose-widget.htmlTuesday, January 31, 12

×