Let’s start our study of highly remixable web sites with Flickr, looking for features that make this site amenable to mashups. In addition to many features for storing and sharing photos, Flickr is chock-­full of features that make it easy to mash up Flickr, not least of which is its use of XML, XML web services, tagging, and Ajax. These features are blended in a surprisingly coherent, comprehensive demonstration of how to knit this new technology together. You won’t be surprised then to read Flickr’s own description of its goals at http://www.flickr.com/about:

This flexibility of functionality makes Flickr a good web site to study when learning about mashups. Flickr is made to be mashed up. You can see in one web site a great variety of mashup-­enabling techniques—and actually how they can be well integrated in one web site.

Caution

In the following analysis of Flickr, I answer many but not necessarily all the questions listed earlier in the chapter. I’ll answer some of the questions later in the book. Moreover, it’s important to understand that since Flickr is a constantly evolving web site, any of the details recorded here about Flickr can become out of date. My hope is to provide you with enough ways to think about web sites so that you will be able to adapt to those changes.

Let me now explain Flickr in terms of its URI language, detailing resources and their corresponding URIs. As you use Flickr as an end user and think about its functionality in terms of key entities, you will probably come up with a list similar to the following:

This list is meant to cover the broad range of what Flickr does, but I’m not attempting to be exhaustive. Remember that there are different ways to slice the pie, so any listing of resources won’t necessarily agree. We will end up agreeing on how the URLs are structured, though.

How did I come up with this list?

	Caution
	Keep in mind the warning about the opacity of unique identifiers in Flickr: “The Flickr API exposes identifiers for users, photos, photosets and other uniquely identifiable objects. These IDs should always be treated as opaque strings, rather than integers of any specific type. The format of the IDs can change over time, so relying on the current format may cause you problems in the future.”[31]

The host URL of the entire site is as follows:

http://www.flickr.com/

URLs using a host URL of http://flickr.com also seem to be valid, but I will use the former since the API returns URLs that use www.flickr.com as the host URL.

Since Flickr is a social photo-­sharing site, let’s start with the two entities you expect at the least: a Flickr user (or person) and a photo.

Note

I use URI Templates (http://bitworking.org/news/URI_Templates) to express the URL language. These are strings into which I place variables that are replaced to form the full URI. The variables to be substituted are delimited by {} (which are not part of legal URIs). Note that the URI Template is currently an IETF draft, but the convention I use here is simply denoting the embedded variable with {}. Substituted variables need to be properly URL encoded (http://en.wikipedia.org/wiki/Percent-encoding).

The profile page for a user, the URL that most closely represents a Flickr user, is as follows:

http://www.flickr.com/people/{user-id}/

The user-id can take one of two forms:

My profile page is thus accessible as either this:

http://www.flickr.com/people/48600101146@N01/

or this:

http://www.flickr.com/people/raymondyee/

As a logged-­in user, you can upload photos to your account using the following form:

http://www.flickr.com/photos/upload/

Photos belonging to a user are collected here:

http://www.flickr.com/photos/{user-id}/

Representations of a Photo

Every photo belongs to one specific user, has a unique identifier photo-id, and is associated with a URL:

http://www.flickr.com/photos/{user-id}/{photo-id}/

For example:

http://www.flickr.com/photos/raymondyee/508341822/

A given photo has a variety of representations, as documented here:

http://www.flickr.com/services/api/misc.urls.html

When you upload a photo to Flickr, Flickr retains the original image and generates versions (in different sizes) of the photo, as recorded in Table 2-1.

Table 2.1. Representations of a Flickr Photo

photo-type	context-type	Image Type	Sizes of Photo
s	sq	Small square	75×75
t	t	Thumbnail	100 on longest side
m	s	Small	240 on longest side
blank	m	Medium	500 on longest side
b	l	Large	1024 on longest side
o	o	Original image, either a JPG, GIF, or PNG, depending on source format

There are two types of URLs for each size of photo:

• The context page for the photos

• The photos themselves in their various sizes

The context page is of the following form:

http://www.flickr.com/photo_zoom.gne?id={photo-id}&size={context-type}

where context-type is one of sq, t, s, m, l, or o. Not every context-type is available for any given photo. (Some photos are too small; nonpaying Flickr members cannot offer original photos for downloading.)

To understand the URLs for the photos themselves, you need to know that in addition to photo-id for every photo, there are the following parameters:

• farm-id

• server-id

• photo-secret

• original-secret

• file-suffix

The URL for the photos takes one of three slightly different forms:

• For the original photo, it is as follows where file-suffix is jpg, gif, or png:

  http://farm{farm-id}.static.flickr.com/{server-id}/{photo-id}_{o-secret}_o.{file-suffix}

• For all the derived sizes except the medium size, the URL is as follows:

  http://farm{farm-id}.static.flickr.com/{server-id}/{photo-id}_{photo-secret}_{photo-size}.jpg

• For medium images, the URL is as follows:

  http://farm{farm-id}.static.flickr.com/{server-id}/{photo-id}_{photo-secret}.jpg

Let’s consider http://www.flickr.com/photos/raymondyee/508341822/ as an example. If you go to the URL and hit the All Sizes button, you’ll see the various sizes that are publicly available for the photo. If you click all the different sizes and look at the URLs for the photos and the context pages, you can determine the values listed in Table 2-2, thus confirming the values of the parameters in Table 2-3.

Table 2.2. URLs for the Various Sizes of Flickr Photo 508341822

Image Type	Context Page URL	Image URL
Small square	http://www.flickr.com/photo_zoom.gne?id=508341822&size=sq	http://farm1.static.flickr.com/193/508341822_2f2bfb4796_s.jpg
Thumbnail	http://www.flickr.com/photo_zoom.gne?id=508341822&size=t	http://farm1.static.flickr.com/193/508341822_2f2bfb4796_t.jpg
Small	http://www.flickr.com/photo_zoom.gne?id=508341822&size=s	http://farm1.static.flickr.com/193/508341822_2f2bfb4796_m.jpg
Medium	http://www.flickr.com/photo_zoom.gne?id=508341822&size=m	http://farm1.static.flickr.com/193/508341822_2f2bfb4796.jpg
Large	http://www.flickr.com/photo_zoom.gne?id=508341822&size=l	http://farm1.static.flickr.com/193/508341822_2f2bfb4796_b.jpg
Original	http://www.flickr.com/photo_zoom.gne?id=508341822&size=o	http://farm1.static.flickr.com/193/508341822_5ab600db14_o.jpg

Table 2.3. Parameters Associated with Photo 508341822

Parameter	Value
photo-id	508341822
farm-id	1
server-id	193
photo-secret	2f2bfb4796
original-secret	5ab600db14
file-suffix	jpg

Tip

I suggest you look at the current documentation for the Flickr URLs every so often because the URLs that Flickr produces have changed over time, and I suspect they will continue to change as Flickr scales up its operations. Don’t worry about any URLs you have generated according to older schemes—Flickr tries to keep them working. (It’s worthwhile to update your software to use the latest URL structures if you are able to do so.)

Each photo has various pieces of information associated with it, including the following:

I listed these data elements associated with each picture because each of the elements is an opportunity for integration if you want to use that picture in another mashup context. Many of data elements can be addressed in the URL, which is part of the Flickr URL language.

Tags are one of the most important ways to organize photos in Flickr. Tags are words or short phrases that the owner (or others with the proper permission) can associate with a photo. A tag typically describes the photo and ties together related photos within a user’s collection of photos and sometimes between photos of different users. However, there is no requirement that tags have meaning to anyone except the tagger, or even the tagger! See Chapter 3 for an extended discussion on tagging and folksonomy.

Flickr lets users search and browse photos by tags. First, let’s study how to address tags as they are used throughout Flickr to describe pictures among all users. Then, you will examine the functionality in the context of a specific user.

You can see a list of popular tags in Flickr here:

http://www.flickr.com/photos/tags/

Popular tags allow you to get a sense of the Flickr community, over the longer haul, as well as over the last 24 hours or 7 days.

The URL for the most recent photos associated with a tag is as follows:

http://www.flickr.com/photos/tags/{tag}/

For example:

http://www.flickr.com/photos/tags/flower/

You can page through the photos with this:

http://www.flickr.com/photos/tags/flower/page={page-number}

Instead of sorting photos by the date uploaded, you can see sort them by descending “interestingness” (a quantitative measure calculated by Flickr of how interesting a photo is):

http://www.flickr.com/photos/tags/{tag}/interesting/

Finally, for some tags, Flickr identifies distinct clusters of photos, which you can access here:

http://www.flickr.com/photos/tags/{tag}/clusters/

For example:

http://www.flickr.com/photos/tags/flower/clusters/

You can display the popular tags used by a specific user here:

http://www.flickr.com/photos/{user-id}/tags/

You can list all the user’s tags here:

http://www.flickr.com/photos/{user-id}/alltags/

You can show all photos with a given tag for a specific user here:

http://www.flickr.com/photos/{user-id}/tags/{tag}/

You can edit the tag for the given user, if you have permission to do so, here:

http://www.flickr.com/photos/{user-id}/tags/{tag}/edit/

You can delete a tag here:

http://www.flickr.com/photos/{user-id}/tags/{tag}/delete/

You can show a slide show of these tagged photos here:

http://www.flickr.com/photos/{user-id}/tags/{tag}/show/

You can browse through a user’s photos by date—by either the date the photo was taken or when it was uploaded. Dates are an excellent way to organize resources such as photos. Even if you leave a photo completely untagged, Flickr can at the very least place the photo in the context of other photos that were uploaded around the same time. If you are careful about generating good time stamps for your photos, you can display photos in an accurate time stream. I have found looking at a user’s photos by date to be an effective way to make sense of large numbers of photos.

The main page for a user’s archive is here:

http://www.flickr.com/photos/{user-id}/archives/

For example:

http://www.flickr.com/photos/raymondyee/archives/

You can sort your archive by the date taken or date posted with this:

http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/

where {date-taken-or-posted} is date-taken or date-posted.

You can view the photos for a given date with a different {archive-view} here:

http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{archive-view}

where {archive-view} is one of detail, map, or calendar.

You can also set the display option and limit photos by year, year/month, or year/month/date. The following set of URLs use the default list view:

            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}
            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{month}
            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{month}/{day}
         

The following URLs use the other display options where {archive-view-except-calendar} is either detail or map—but not calendar:

            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}
            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{archive-view}
            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{month}/{archive-view}
            http://www.flickr.com/photos/{user-id}/archives/{date-taken-or-posted}/{year}/{month}/{day}/{archive-view-except-calendar}
         

Here are some specific examples:

Sets or photosets (both terms are used in the Flickr UI and documentation) are groupings created by users of their own photos. (Note that sets cannot include other users’ photos.)

You can see a user’s sets here:

http://www.flickr.com/photos/{user-id}/sets/

You can see a specific set with the unique ID set-id here:

http://www.flickr.com/photos/{user-id}/sets/{set-id}/

You can control the view for a given set here where set-view is one of detail, comments, or show:

http://www.flickr.com/photos/{user-id}/sets/{set-id}/{set-view}

Consider some examples of sets:

To display a photo in the context of a containing set, use this:

http://www.flickr.com/photos/{user-id}/{photo-id}/in/set-{set-id}/

For example:

http://www.flickr.com/photos/raymondyee/591991800/in/set-72157600434284985/

Users can create collections to make groupings of their sets. A user’s collections are found here:

http://www.flickr.com/photos/{user-id}/collections/

And you can find a specific collection here:

http://www.flickr.com/photos/{user-id}/collections/{collection-id}

For example:

http://www.flickr.com/photos/raymondyee/collections/72157600592620295/

Users can add other users’ photos to their favorites:

http://www.flickr.com/photos/{user-id}/favorites/

Note that you can’t add your own photos to your favorites. There are also not many ways to organize your favorites. You can search within your favorites using this:

http://www.flickr.com/search/w=faves&q={search-term}

Since sets and collections can contain only those photos belonging to a user, there is no built-­in way in Flickr for you to group your own photos with photos belonging to others.

Users can track which of their photos are the most popular (by interestingness, number of views, number of times they have been added as a favorite, and number of comments) here:

http://www.flickr.com/photos/{user-id}/{popular-mode}/

where {popular-mode} is one of popular-interesting, popular-views, popular-faves, or popular-comments. Users can access popularity statistics for only their own photos.

As a social photo-­sharing site, Flickr allows users to maintain a list of contacts. From the perspective of a registered user of Flickr, there are five categories of people in Flickr: the user, the user’s family, the user’s friends, the user’s contacts who are neither family nor friend, and everyone else. Contacts, along with their recent photos, belonging to a user are listed here:

http://www.flickr.com/people/{user-id}/contacts/

Depending on access permissions, you may be able to access more fine-­grained lists of contacts for a user here where {contact-type} is one of family, friends, both, or contacts:

http://www.flickr.com/people/{user-id}/contacts/see={contact-type}

Users can see their own list of users they are blocking here:

http://www.flickr.com/people/{user-id}/contacts/ignore/

Users can see their “reverse contacts” (users who consider them contacts) here:

http://www.flickr.com/people/{user-id}/contacts/rev/

To invite others to join Flickr, you go here:

http://www.flickr.com/invite.gne

Groups allow people to organize themselves into communities based around themes, places, and common interests. Take a look at all the groups that are in Flickr:

http://www.flickr.com/groups/

You access an individual group here:

http://www.flickr.com/groups/{group-id}/

where group-id is the NSID of the group or its friendly name, which the group owner sets here:

http://www.flickr.com/groups_url.gne?id={group-nsid}

Consider, for instance, the Flickr Central Group, which is accessed from here:

http://www.flickr.com/groups/34427469792@N01/

and from here:

http://www.flickr.com/groups/central/

You can page through the discussion in a group here:

http://www.flickr.com/groups/{group-id}/discuss/page{page-number}/

You can post a new topic here:

http://www.flickr.com/groups_newtopic.gne?id={group-nsid}

For example:

http://www.flickr.com/groups_newtopic.gne?id=34427469792@N01

You access a specific thread here:

http://www.flickr.com/groups/{group-id}/discuss/{thread-id}/

For example:

http://www.flickr.com/groups/central/discuss/140537/

You access a specific comment in the thread here:

http://www.flickr.com/groups/{group-id}/discuss/{thread-id}/#comment{comment-id}

For example:

http://www.flickr.com/groups/central/discuss/140537/#comment1192964

You can edit, delete, or lock a thread if you have the appropriate rights:

http://www.flickr.com/groups/{group-id}/discuss/{thread-id}/{thread-action}

where {thread-action} is edit, delete, or lock.

Similarly, for the comments that hang off a thread (one-deep), you can find them here:

http://www.flickr.com/groups/{group-id}/discuss/{thread-id}/{comment-id}/{comment-action}/

where {comment-action} can be edit or delete.

Each group has a photo pool accessible here:

http://www.flickr.com/groups/{group-id}/pool/

For example:

http://www.flickr.com/groups/central/pool/

You can look at the geotagged photos from the group on a map here:

http://www.flickr.com/groups/{group-id}/pool/map?mode=group

You can look at a list of the most popular tags used for photos in a group here:

http://www.flickr.com/groups/{group-id}/pool/tags/

You can look at photos with a certain tag in the group here:

http://www.flickr.com/groups/{group-id}/pool/tags/{tag}/

You can look at photos that have been contributed to the pool by a specific user here:

http://www.flickr.com/groups/{group-id}/pool/{user-nsid}/

Some URLs are used for account management functions. You need to be logged in to access them.

To access your contacts’ photos, go here:

http://www.flickr.com/photos/friends/

To manage your account, go here:

http://www.flickr.com/account

You can adjust various specific options at the following URLs:

Flickr’s jumping-­off point for looking at the world of Flickr is this:

http://www.flickr.com/explore/

To look at what Flickr rates as the most “interesting” photos, go here:

http://www.flickr.com/explore/interesting/

The page gives some sense of how Flickr rates interestingness (even if there aren’t complete details given):

You can look at the photos the most interesting photos for a specific period of time. A special case is a random selection of photos from the last seven days:

http://www.flickr.com/explore/interesting/7days/

You can see interesting photos for a given month or day, the latter as a calendar or slide show:

            http://www.flickr.com/explore/interesting/{year}/{month}/
            http://www.flickr.com/explore/interesting/{year}/{month}/{day}
            http://www.flickr.com/explore/interesting/{year}/{month}/{day}/show/
         

For example:

http://www.flickr.com/explore/interesting/2007/01/04/show/

Flickr provides interfaces for basic and advanced photo searches.

Advanced Photo Search

For the advanced photo search (http://www.flickr.com/search/advanced), you can figure out other ways to modify the search URL.

You can add terms to {search-term} by adding a hyphen (-) before the term. For instance, you can look for photos that are tagged with flower but not rose or tulip with this:

http://www.flickr.com/search/?q=flower+-rose+-tulip&m=tags&ct=0

You can use add safe-search options with this:

&ss={safe-search}

where {safe-search} is 0,1, or 2 corresponding to on, moderate, and off, respectively.

You can limit searches to a particular content-type by using this:

&ct={content-type}

where {content-type} is one of the following:

• 0 for photos

• 1 for screenshots

• 2 for other stuff (art, drawings, CGI, and so on)

• 3 for photos and screenshots

• 4 for screenshots and other stuff

• 5 for photos and other stuff

• 6 for photos and other stuff and screenshots

You can also limit photos by a date range:

&d={taken-or-posted}-{from-date}-{to-date}

where {taken-or-posted} is taken or posted and where {from-date} and {to-date} are of the form yyyymmdd. You can state one or both of the dates. For example:

               &d=posted--20070702
               &d=taken-20070613-20070702
            

Finally, you can search for photos with certain Creative Commons licenses by using this:

&l={CC-license}

where {CC-license} can be one of cc (for any Creative Commons license), com (for licenses that permit commercial reuse), or deriv (for licenses that permit derivative works).

	Note
	I do not provide a full analysis of the URL language for searching groups (http://flickr.com/search/groups/) and users (http://flickr.com/search/people/).

You can use the Flickr World map to plot georeferenced photos here:

http://www.flickr.com/map/

You can control the center, zoom level, and display type of the map with this:

http://www.flickr.com/map/?&fLat={lat}&fLon={lon}&zl={zoom-level}&map_type={map-type}

where zoom-level is an integer ranging from 1 to 17 (17 is the most zoomed out) and map-type is hyb or sat. If map-type is not explicitly set, the map has a default (political-style) map.

You can filter photos in various ways by adding more parameters to the URL:

For example, this address:

http://www.flickr.com/map/?&q=flower&fLat=37.871268&fLon=-122.286414&zl=4

produces a map of geotagged pictures around Berkeley, California, filtered on a full-­text search of flower. A corresponding list view according to Flickr is as follows:

http://www.flickr.com/search/?&q=flower&m=text&s=rec&b=-122.346496,37.847598,-122.226333,37.894938&a=10&d=taken-19700101-

This search uses parameters I have already presented in the “Advanced Photo Search” section in addition to this for a geographic bounding box:

&b={lon0},{lat0}{lon1},{lat1}

and this:

&a={accuracy}

where accuracy is presumably the same parameter as the accuracy parameter used in the Flickr API in flickr.photo.search to denote the “recorded accuracy level of location information.”^[32]

You can use the JavaScript-­based Organizer to process your Flickr photos:

http://www.flickr.com/photos/organize/

Most of its functionality is not addressable through URLs, but a few aspects are. You can process your recently uploaded photos here:

http://www.flickr.com/photos/organize/?start_batch=recent_uploads

You can create and organize your sets and collections here:

http://www.flickr.com/photos/organize/?start_tab=sets

Finally, you can tag your untagged photos here:

http://www.flickr.com/photos/organize/?start_batch=untagged&mode=together

You can look at recent activities around your photos here:

http://www.flickr.com/recent_activity.gne?days={time-period}

where time-period can be any of the following:

Flickr has its own e-mail type interface for facilitating communication among Flickr people:

http://www.flickr.com/messages.gne?ok=1

This messaging facility allows communication by proxy to retain the anonymity of users. You can access your sent mail here:

http://www.flickr.com/messages_sent.gne

You can read a message here:

http://www.flickr.com/messages_read.gne?id={message-id}

You compose a new message here:

http://www.flickr.com/messages_write.gne

One fun thing to do with pictures is to send a picture to one’s weblog along with some commentary. Flickr helps make the process easier to do. You configure weblogs here:

http://www.flickr.com/blogs.gne

You can configure the settings for a specific weblog here:

http://www.flickr.com/blogs_edit.gne?id={blog-id}

You can configure the layout here:

http://www.flickr.com/blogs_layout.gne?id={blog-id}&edit=1

In Chapter 5, I go into greater detail about how the properties used to set up a blog to work with Flickr is a reflection of the blogging APIs that you will study.

RSS and Atom feeds are well integrated in Flickr. These feeds are an example of XML, and you will learn more about that in Chapter 4. Flickr implements RSS and other syndication feeds in an extensive manner, as documented here:

http://www.flickr.com/services/feeds/

There’s a lot to cover, which I’ll come back to in Chapter 4.

Flickr provides a model to help you integrate your own services with mobile devices. For example, you can e-mail pictures to Flickr. This functionality is not strictly tied to mobile devices but is particularly useful on a mobile phone because e-mail is perhaps the most convenient way to upload a picture from a camera phone while away from your desk. You can configure e-mail uploading here:

http://www.flickr.com/account/uploadbye-mail/

You can also look at pictures on a mobile device through a simplified interface customized for small displays here:

http://m.flickr.com

Flickr has an API that enables the development of third-­party applications or tools. The API is at the heart of what makes Flickr such a great mashup platform. Hundreds of third-­party apps have been written to use the API, and these apps have made it easier and more fun and surprising to use Flickr. The Google Maps and Flickr Greasemonkey script are examples of third-­party Flickr apps.

Go to http://www.flickr.com/services/ to see a list of such third-­party Flickr apps. To get inspired about how you can use the Flickr API in fun, useful, and imaginative ways, play with John Watson’s collections of Flickr Toys:

http://bighugelabs.com/flickr/

While looking at the Flickr Toys, think about what content and services from Flickr are being accessed.

I analyze various Flickr third-­party applications in more detail in conjunction with my study of the Flickr API in Chapter 6.

Under copyright laws in the United States, you can’t reuse other people’s pictures by default except under the “fair use” rule. If someone uses a Creative Commons (CC) license for a picture, the owner is saying, “Hey, you can use my picture under looser restrictions without having to ask me for permission.” You can see a license attached to any given picture.

Flickr makes it easy for users to associate CC licenses with their photos. You can browse and search for photos by CC license here:

http://www.flickr.com/creativecommons/

You can look at pictures by specific license here:

http://www.flickr.com/creativecommons/{cc-license}/

where {cc-license} is currently one of the following:

Consult the following to get an understanding of the various licenses:

http://creativecommons.org/licenses/

Flickr enables users to view photos by the brand of cameras used to take them:

http://www.flickr.com/cameras/

To get at all the brands of cameras, see the following:

http://www.flickr.com/cameras/brands/

You can look at pictures by the specific camera type here:

http://www.flickr.com/cameras/{camera-company}/{camera-model}/

For example: