Skip to main content

Mistakes I Made Building Pinterest Widgets

Average rating: ***..
(3.89, 9 ratings)

A year ago I stood up at Fluent and gave a somewhat idealistic talk called “Eight Simple Rules for Running Your JavaScript on My Page.” Since then I’ve had the opportunity to build and deploy Pinterest’s new JavaScript widgets, which are all made by a single script tag that creates the Pin It button, a Follow Me button, and two kinds of embedded pinboards.

This year I’d like to come back to Fluent, break open the source code, and talk about how and when I had to break my own rules.

Among other things, I’ll show:

  • Including third-party scripts with a single line of JavaScript.
  • Passing configuration variables without adding extra SCRIPT tags.
  • Creating structure, styling with CSS, and adding interactions, all without resorting to iframes or external libraries.
  • Avoiding interference with existing and future page elements.

Specific to the project:

  • Full source of Pinterest’s widgets, how anyone can access it, and why it’s critical to ship source.
  • How and why I pushed back on design.
  • API endpoints and how I’m hitting them without running into cross-domain security trouble.
  • Dealing with browser compatibility issues.
  • How and why I avoided using libraries.
  • What I did about analytics and user tracking.
  • Who I broke on launch day, and what I had to do to fix them.
  • What I’ll do differently next time.
Photo of Kent Brewster

Kent Brewster

Pinterest

You may already be running some of Kent Brewster’s difficult-to-detect JavaScript, which powers portions of Yahoo’s Pipes badges, Netflix’s widgets, the Identi.ca badge, Lexity’s store instrumentation, and Pinterest’s widgets, bookmarklet, and Pin It! button.

Sponsors

For exhibition and sponsorship opportunities at Fluent conference, contact Sharon Cordesse at (707) 827-7065 or scordesse@oreilly.com

Download the Fluent Sponsor/Exhibitor Prospectus

For information on trade opportunities with O'Reilly conferences contact Jaimey Walking Bear at mediapartners
@oreilly.com

View a complete list of Fluent 2013 contacts