Image by miss604 via Flickr

Browsing the updated Foursquare development documents I came across a real nice hidden gem: it appears that the Flickr folks have enabled so called machine tags to associate a photo with a Foursquare venue.

The almost hidden quote from the Flickr Developer blog:

This is the part where I casually mention that we’ve also added machine tags extra love for Four Square venues IDs. I’m just saying…

Now how cool would it be to display a little photo on my Foursquare Layar venue detail pages?
Remembering @codepo8‘s execellent talk at the Fronteers conference last week, I realized that this is where the really cool YQL engine comes in really handy.

And indeed, the following query does it all:

select * from flickr.photos.search
    where machine_tags="foursquare:venue=132009"
    limit 1

Just save the REST command url, wrap it in a little PHP handler and we’re good to go (homework for next time: process the YQL response in XML format with js/e4x and skip the PHP part altogether).

So now you will see a little thumbnail picture for every venue which has a photo tagged on Flickr. There aren’t many yet, but hey, it’s a start!

See it in action in the Foursquare Layar app on your phone (iPhone, Android) or read my announcement for more background information about the foursquare layar app.

Somewhat related articles by Zemanta

• Small pieces, loosely joined by machine tags (adactio.com)
• Zee.: Noticings is Foursquare for photo sharers (thenextweb.com)
• Noticings: Geotagging Photo Game Powered by Flickr API (readwriteweb.com)

Tweet This Delicious Reddit This Post Stumble This Post

I just found out (not surprisingly, through Twitter) that Skittles turned their website inside out (so to say, in my words).

They replaced their content pages by what others are saying about them: their twitter stream (live search for #skittles), their entry at Wikipedia, their friends at Facebook and more (videos at Youtube, pictures at Flickr, you get the idea).

The own Skittles content is reduced to just one floating content banner, providing minimal information (as if it were a IAB banner box) and also functions as “glue” between all linked social sites.

The linked content seems not to be filtered, the Twitter feed at least displays profanity just as entered.

So what is this?

• A stunt which will last just for a day or so
• Crowd-sourcing at its most extreme
• The end of internet marketing as we know it…

In other words, is this indeed a brave move or just plain stupid? The Twitter jury is still out…

Update:

1. By now they have removed the twitter stream as home backdrop, got a bit too hot maybe.
2. It appears that Modernista was far ahead with this concept: Modernista! letting others define its identity about a year ago.

Many more related articles by Zemanta…

• The New Skittles Website Is A Twitter Search For “Skittles” (laughingsquid.com)
• Skittles.com: Interweb the rainbow. Taste the Rainbow. (tsurch.com)
• Is Skittles.com a glimpse of the business model for Twitter? (RexBlog.com)
• Stop doing websites (sharemarketing.wordpress.com)
• Skittles.com All Our Base are Belong to You (pistachioconsulting.com)
• A funny thing happens when you take down your website (thisisherd.com)
• Skittles Site Receives an Extreme Social Makeover (mashable.com)
• Will you buy more Skittles today? (cmswatch.com)
• Hey! Skittles! Get Off of My Cloud! (technologizer.com)
• Skittles + social media = priceless (wisdump.com)
• Skittles Goes Modernista! With A Distributed Experience (darmano.typepad.com)
• Skittles Puts Twitter Comments on Homepage (shoppingblog.com)
• Skittles.com is the worst thing to ever happen to social media branding (thisisgoingtobebig.com)
• Skittles Maker Invents Perfect Depression Advertising [Recessionomics] (gawker.com)

Tweet This Delicious Reddit This Post Stumble This Post

There is a solution, though: just listen for DOM events which modify the page’s content. Keep up with the DOM changes so to say!

Background

In the days before Flickr was acquired by Yahoo, I made a Greasemonkey user script: Flickr – Link Original Image that inserts direct links to the original uploaded photos on top of thumbnails. This worked fine, by parsing the DOM just after page load and looking for every occurrence of photo thumbnails.

Now, after the recent relaunch of Flickr with dynamic Ajax loading, this script fails for those dynamically inserted thumbnails. Simply because they do not exist in the DOM when the page completes loading.

Solution

DOM level 2 specifies a couple of Mutation events. Now I register an event handler for the relevant events and take action whenever an image gets inserted, removed or moved around.

Code example

// Ajax: new image
document.addEventListener("DOMNodeInserted",
	function(evt) {
		ImgLinks.insertLinks(evt.target);
	}, true);
// Ajax: remove an image
document.addEventListener("DOMNodeRemoved",
	function(evt) {
		var list = evt.target.getElementsByTagName("img");
		for (var i = 0; i < list.length; i++) {
			ImgLinks.remove(list[i]);
		}
	}, true);
// DOM manipulation, which can cause reflow
document.addEventListener("DOMAttrModified",
	function(evt) {
		ImgLinks.reshuffleSoon();
	}, true);
// catch window resize events
window.addEventListener("resize",
	function() { ImgLinks.reshuffle(); }, true);

In order to watch an Ajax page, you just have to keep up with the change, and go with the flow!

Tweet This Delicious Reddit This Post Stumble This Post