• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Building 3rd party widgets with JavaScript

on

  • 5,739 views

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/

Statistics

Views

Total Views
5,739
Views on SlideShare
5,699
Embed Views
40

Actions

Likes
8
Downloads
17
Comments
0

6 Embeds 40

http://storify.com 23
http://localhost 8
http://coderwall.com 5
http://tarvelmate.blogspot.in 2
http://a0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building 3rd party widgets with JavaScript Building 3rd party widgets with JavaScript Presentation Transcript

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