Embedding Flickr photostreams

January 25th, 2010 · 12:15 pm  →  embedding graphics

Flickr.com is one of the darlings of the social media world because of its large community of users and massive user-generated repository of photographic content.

Flickr offers a free version of the site with some limitations (I think it’s 200 uploads a month) and lots of convenience in terms of a tool for sharing photos on your web site. The main method for doing that is an embeddable widget that can be placed on any web page and sized accordingly so your photostream can display on your site. The beauty of this widget is that all you need to do to post pictures to your web site now is login to Flickr and upload them. The widget takes care of streaming them to your site.

This kind of application works great if you have photos from an event and you want them posted quickly or even in real time. Similarly, say you’re a school and you want to post regular photos of student from events and extracurricular activities. Also, great application. But I wouldn’t recommend a Flickr stream for a professional photographer or graphic artist wanting to display their work. Not enough control over how it’s presented.

As much as I like Flickr functionality and cost, there are some things I can’t do with the embeddable widget. I can’t display the picture’s title or description. I can’t display subsets of pictures or have any internal grouping of the pictures in the widget. There are lots of plugins for enhancing Flickr on your blog – here are 10 WordPress plugins for Flickr.

Clicking on the embedded widget takes the user to the Flickr site and displays your photostream where all of these picture titles and descriptions and sets are displayed and can be navigated.

Like all content publishing tools, they are only as good as your content. So, Flickr widget or no Flickr widget, bad photos look bad on Flickr.

Mapping as community building

January 12th, 2010 · 12:42 am  →  blog embedding mapping

The explosion of free online mapping options is truly mind-blowing. Increasingly, mapping is becoming a popular and easy way of organizing content and sharing it.

Maps give you a new perspective on things. Try looking at Google Earth for a while in satellite mode. Observe the threads of concrete that cover the countryside like chicken wire. Look how the cities are virtually solid gray concrete, with barely visible ribbons of green that line the valleys (assuming the natural rivers haven’t been buried with the sewers). At the very least, it makes me think about how it must feel to be a non-human living among all this unnatural stucture.

I found UMapper.com while looking for cool Flash-based plugins for WordPress. It has some nice annotation features, but is distinguished by its packaging as a Flash app. The sample below maps the route I would have taken had I driven from Toronto to Edmonton last summer.

Returning to Google Maps for comparison, I realized that Google’s maps worked just as well – if not better. In addition to making it easy to embed maps on web sites, Google allows you to log in and create your own custom maps for private use or to share with the world. But I was amazed by the split screen street level view of the cross-Canada trip.

View Larger Map

Does this mean an end to 3500 km road trips? Because after seeing this trip at street level, I’m not that excited about taking it anymore.

Embed and view PDF documents

December 17th, 2009 · 3:11 pm  →  embedding

I was very excited (in my web-head way) when I discovered the code to embed a PDF document on a web page. No more links to PDF files that require the user to have the freely available Acrobat Reader installed. In fact, most users already have this and the browser plugins for viewing PDFs in Firefox and IE seem to work well. But this code gives me more control. I like control.

The code is based on Google’s online PDF document viewer that is part of the Google suite of online document authoring tools. The code is simple and elegant.

Whereas in the old days, you would have placed a link to a PDF file by saying something like this: “To see the datasheet on Adobe Acrobat 9 Pro, click here.” Then I would have opened this link in a new browser window – just so I could signify to the user that they were viewing a PDF, not a web page.

Now, however, I can use the following code to display that very document RIGHT ON THIS PAGE:

<iframe src="http://docs.google.com/gview?url=http://www.adobe.com/products/acrobatpro/pdfs/acrobatpro_datasheet.pdf&embedded="true" style="width:550px; height:700px;" frameborder="0">

See how it works: