Web Widgets: What, Why, and How

Will Meyer9.20.07

Why Are We Here?(Right now, anyway)

• What are widgets, anyway?• Why do I care?• How do I make them?• Some show and tell

2

3

The Changing Face of the WebDecentralization is the name of the game

- Content comes to you

- Personalized experiences

- “Micro-chunks”

- The Web is a Platform for Services

From Web 1.0From Web 1.0 To Web 2.0 [To Web 2.0 [sicsic]]

- Users visit websites

- One size fits all

- Portals dominate

- The Web is a Publication Platform

BROWSEBROWSE

MSN, Yahoo

SEARCHSEARCH

Live Search Google

SHARESHARE

Blogosphere MyspaceFacebook

4

Web Widgets: What are They?(besides a buzzword)

widget [wij-it] (noun) -widget [wij-it] (noun) -

(1) Portable web component that can be executed across multiple platforms without requiring additional compilation

Web widgets are:– Mini web apps placed inside other web apps– Used in blogs, on social networks, or anywhere– Shared between users and moved between locations– Simple now, but getting more advanced

Widget is a category, rather than a specific technical definition

5

• Blog bling– e.g. Charlie O’Donnell’s or Fred Wilson’s blogs

• Personal expression on Social Networks– e.g. Any Facebook or MySpace page (exercise for the reader)

• Start Page utilities– e.g. Netvibes modules

If its small, fast, and viral, as many potential widget ideas as you can think of…

Common Widget TypesWhere widgets live, and what they look like

6

What Can You Do With a Widget ?A mini website with viral distribution

• Extend an existing web site’s capabilities

• Promote branding or information

• Express personal tastes and interests

• Share anything and everything

• Innovate totally new applications

7

Widgets are fundamental to a distributed web strategy

Why?What are widgets good for?

• Increase distribution of your app or content

• Drive traffic to your site (orders of magnitude inc)

• Put a user face on web services and RSS

• Let users personalize their web experience

8

The WidgetsphereIt’s everywhere, and it reaches billions worldwide

9

More Show & Tell

• The ubiquitous RSS-based Widget– e.g. http://www.clearspring.com/blog/2007/08/08/grab-buttons-and-gossip/

• Some more dynamic stuff– Feel-goodness from They’re Beautiful (www.theyrebeautiful.com)

• e.g. http://bitesizetech.blogspot.com/2007/07/they-are-beautiful-coglets.html

– Distributed ratings from RateItAll (rateitall.com)• e.g. http://www.sexywidget.com/my_weblog/2007/04/new_rateitall_w.html

– Blogosphere tracking from MyBlogLog (www.mybloglog.com)• e.g http://www.clearspring.com/blog/2007/09/03/bridging-the-facebook-widget-gap/

– Event scheduling from Attendio (www.attendio.com)• e.g. http://www.attendio.com/widgets/beyonce

– Music tastes from Apple (www.apple.com)• e.g. http://www.apple.com/itunes/myitunes/

– Iraq strategy updates from Washington Post (washingtonpost.com)• e.g. http://www.washingtonpost.com/wp-srv/widgets/

– Slideshows from Anomito (animoto.com)• E.g. http://lovnyterrestre.vox.com/library/post/animoto-le-diaporama-killer-app.html

10

So What’s Really New Here? Some things that make widgets (slightly) challenging

• The standard product lifecycle is all there

• Technology choices– Flash, Javascript, static web, etc. – Standards limited– “Write once, run anywhere” is a

challenge

• Measuring effectiveness

• Figuring out what to widgetize

11

Design & BuildLots of different options

• Sizing– Sidebars vs. start pages vs. social networks

• Technologies– Flash (social networks)– Javascript (some blogs/start pages)

• Features– Dynamic data loading– Viral services

• Platform services (build vs. buy)– Embed generation– Configuration management– Cross-domain services– Destination abstraction

• Managing load

12

Distribution and SeedingMany options and growing…

• Your/affiliate site– Effective, “live” placement

• Pre-seeding micro-sites– Social Networks, blogs, etc.

• Leveraging Widget Galleries– Google, etc.

• BD frontal assaults

• Viral distribution– Transform users into your engine– Requires “Send-to” features

13

Tracking & AnalyticsPage views are going. So what matters?

• Audience– Views– Domains– Geographic distribution– Configuration

• Engagement– User events

• Endorsement– Audience reception– Page location– Adoption path– Velocity

Destination CompatibilityAll destinations are not created equal

Latest at http://www.clearspring.com/docs/tech/widget-dev/drop-targets

Additional Topics

• Where do you have questions?

• Widgets &:– Facebook– Advertising– Standards & Directions– Open social networking– Widget platforms (like Clearspring)– Best practices

• More?

16

Technology DirectionsWhat’s going on in the space

• Limited standards support– Some efforts in W3C, desktop-focused– Some vendor initiatives (Netvibes’ (non-universal) Universal Widget Architecture)– No Microformat yet (proposals made)

• “Open Social Networking” concept– Rich apps that would run across networks

• Proprietary innovation occurring– Inter-widget communication

• Widgets can (minimally) share stuff in iGoogle– Offline data storage– Widget “manifests”

• Search engines, browser plugins, etc can find widgets

Market consolidation will likely unify some of this

Widgets and FacebookIs a FB app a widget? Do FB apps replace widgets?

• Facebook applications consist of:– A semi-dynamic component on your profile page

– Almost-standard pages accessible from your sidebar, hosted by the developer

• Widgets can be turned into Facebook apps– Variety of tools (including Clearspring’s)

– Viral spread both within and, better, in and out of Facebook

• Facebook native apps cannot currently be pulled out of Facebook

Open Social NetworkingThe brave new (purely theoretical) world

• Movement to allow better portability of data and apps between social networks– I don’t want 15 different lists of friends! (and more)– Even a “Bill of Rights”: opensocialweb.org

• API abstraction layers and standards like OpenID

• Second-tier networks behind it– They want a share of the Facebook ecosystem

• Still mostly lip-service

• Remember folks, these things go in cycles– The Future of the Web = Facebook?– Not really -- other networks are opening up quickly

Widgets and AdvertisingYes, it’s happening

• Natural extension for making money– Widgets as ads– Ads in widgets (pre-roll, etc.)– Widgets as cross-promotion tools– Limitations by destination (no linkouts on MySpace)

• Cross-promotion is a key area– e.g. RockYou, Slide, SocialMedia and more promoting other

apps from within their own– Takes more than a few successful apps to play out

20

Widget PlatformsInfrastructure and tooling to power your widgets

• Make certain services readily available– Viral sharing– Configuration management

• Make your widget portable– Handle the differences between various destinations

• Measure your widget’s success (track it)

• Make your widget smarter– Geo, virality, more

• Get your widget distributed– Gallery publication– Cross-promotion

Clearspring: WTF?

• World-class widget platform– Fastest, most scalable back-end– Most robust analytics– Comprehensive and robust viral services– Richest in-widget services

• Services capabilities– Widget development– Widget strategy

Your partner for a successful widget strategyWe power the biggest brands, and love everyone else, too

Some Important Best PracticesAvoid some common pitfalls

• Keep the content dynamic, or make it an application– First attempts are often stale, and “the people” don’t like that

• Pay attention to media management– Auto-playing annoys people (on hover is often cool)– Stream MP3 and other content, never wait

• Making a widget for a blog is cool, but not that cool– It’s not just about RSS

• Thoroughly test it – New use cases, off-domain issues, etc

• Virality is powerful -- design it to be shared, and have the capabilities built-in• Have a real seeding strategy

– Placement on your own site (avoid it looking like an ad, or like just a piece of the page)

– Leverage galleries

• Track it!– You need to pay attention to what’s happening, especially viral spread

Some other Resources

• Best practices– A few links here on Clearspring’s site

• Dev resources– All of the major destinations have API docs (search)– Cearspring has a list of helpful resources:

http://www.clearspring.com/docs/tech/widget-dev/web-resources

• Widget Boggers– See the Bogroll at http://www.clearspring.com/blog

• Clearspring– http://www.clearspring.com/docs/faq– http://www.clearspring.com/developers

Fin

Thanks!

will@clearspring.com

Fun for the whole family*

http://widgetdevcamp-dc.org

* depends on family