Photo Sharing Web Design

Client projects and tech blog posts about Photo Sharing

Martin Profile Picture Many Friends will know me from my active involvement in the Quaker world. I've been dubbed the "Quaker Blogfather" for my Quaker Ranter (site) blog and my work in pulling together QuakerQuaker (site), an online magazine and blogging community with over five hundred members and 10,000 visitors a month. I am also a frequent Quaker workshop leader and published writer.

I started building websites in 1995 with an award-winning Nonviolence.org hub site and was a social media pioneer when I redesigned its homepage to a blog format three years later. Before going independent as MartinKelley.com in 2006, I served on the staff of Friends General Conference (site) for eight years, where I worked in the FGC Quaker bookstore and built the Quakerfinder, FGC Gathering and youth ministry sites. I also worked for Friends Journal (site) for two years, putting select articles from their Quaker magazine online every month. Since then I've been privileged to work with Quaker organizations such as Friends World Committee for Consultation (site), Friends Council on Education (site) and Haverford Friends Meeting (site). I've done some exciting media work with the Philadelphia Penn Charter School (site) and built personal sites for well known Friends. I bring our testimony of integrity to every business transaction and when I address topics such as search engine optimization or pricing philosophy, I try to do so from a Friends perspective.

Web Design Specialties:


Categories: quaker | Edit
Steady Footsteps

Blog by an American couple living in Vietnam and advocating for greater motorbike safety. The technical aspects are pretty straight-forward but the neat part about it was watching the client learn about blogging and online photo sharing as we worked on the site: I introduced her to Flicrk, Picasa and Gmail! She took to it like a fish to water and the site is full of great photos taken by her husband David. Read more about their work doing physical therapy in Vietnam and their posts about life in Da Nang.
. Technology: Movable Type, Flickr. Visit Site.

Categories: Client Sites , Faith-Based , Journalists & Artists
Tags: Buddhist, Head Injuries, Hopeless Situation, Husband David, Medical Care, Middle Aged, Middle Class Americans, Plight, Program Directors, Quaker, Saddened | Edit

Integrating the Flickr photo sharing service with your blog is a wonderful way to easily add photos to your site. With a little extra effort you can get Flickr to work for you.

Flickr in your blog

When you want to embed a Flickr-hosted photograph into one of your blog entries, first start by going to the photo's page in Flickr. Click on the "All Sizes" button on top (with the magnifying glass icon), and then pick the size you want for your blog post--small and medium work well for blog entries.

Underneath the resized picture is a box with Flickr's coding (you have to be looking at your own account and be logged in to see this). Simply cut and paste this into your blog entry and the picture will appear there. If you want your text to wrap around the picture you'll want to add a little coding to what Flickr gives you. Somewhere inside the "img" text you need to add wrapping instructions. An easy place is between the text that reads:
height="180" alt="whatever it says"
...now reads:
height="180" align="left" alt="whatever it says"
Change left to right to have your photo align that way.

Your blog in Flickr

Many users don't realize that people sometimes find your Flickr photos and not your blog. Google indexes Flickr nicely and Flickr's own search is popular. In the description of your photos you should add a link back to your own blog. If you have a blog entry concerning that actual picture, link directly back to that entry.

You'll have to hand-write the HTML link for this (sorry, Flickr doesn't have a link button). It should look something like this:

Description of the photo. For more read, <a href="http://www.site.com/blogentry">What I know about Flickr</a>.

Here's a screen shot of the editing screen for this Flickr entry:

Results

That post about my trip to a legendary South Jersey locale is one of the most visited pages on my personal blog. A good bit of it comes from the links in Flickr!

Remember to put a lot of desired keywords into your Flickr title and all link text. Keywords are those phrases that you think people might be searching for.

Categories: Niche Marketing , Practical 2.0
Tags: Blog, Flickr, Img, Medium Work, Photo Sharing, Photograph, Photos | Edit
It's not necessary to develop your own Web 2.0 software infrastructure to create an independent Web 2.0-powered community online. It's far simpler to set a standard for your community to use on exisiting networks and then to use Yahoo Pipes to pull it together.

I decided on about a dozen categories to use with my DIY blog aggregator (QuakerQuaker). I only want to pull in posts that are being generated for my site by community members so we use a community identifier, a unique prefix that isn't likely to be used by others.

This post will show you how to pull in tagged feeds from three sources: the Del.icio.us social bookmarking system, the Flickr photo sharing site and Google Blog Search.

Step 1: Pick a community designator

I've been using the community name followed by a dot. The prefix goes in front of category description to make a set of unique tags for the aggregator. When someone wants to add something for the site they tag it with this "community.category" tag. In my example, when someone wants to list a new Quaker blog they use "quaker.blog", "quaker" being the community name, "blog" being the category name for the "New Blogs" page.

Step 2: Collect the community prefix and category name in Pipes

You begin by going into Pipes and pulling over two text inputs: one for the community prefix, the other for the specific category.

Step 3: Construct these into tags

Now use the "String Concatenation" module to turn this into the "community.category" model. The community input goes into the top slot, a dot is the second slot and the category input goes into the last slot.

Now, when you have a tag in Flickr with a dot in it, Flickr automatically removes it in the resultant RSS feed. So with Flickr you want your tag to be "communitycategory" without a dot. Simple enough: just pull another "String Concatenation" module onto your Pipes work space. It should look the same except that it won't have the middle slot with the dot.

Step 4: Turn these tags into RSS URLs

Pull three "URLBuilder" modules into Pipes, one for each of the services we're going to query. For the Base, use the non-tag specific part of the URL that each service uses for its RSS feeds. Here they are:

Del.icio.ushttp://del.icio.us/rss/tag
Flickrhttp://api.flickr.com/services/feeds
Google Blog Searchhttp://blogsearch.google.com

Under path elements, put the correct tag: for Del.icio.us and Google it should be the community.category tag, for Flickr the dot-less communitycategory tag.

Step 5: Fetch and Dedupe

Fetch is the Pipes module that pulls in URLs and outputs RSS feeds. It can also combine them. Send each URLBuilder output into the same Fetch routine.

Since it's possible that you'll might have duplicate posts, use the "Unique" module to deduplicate entries by URL. Through a little trial and error I've determined that in cases of duplicates, feeds lower in the Fetch list trump those higher. In the actual Pipe powering my aggregator I pull a second Del.icio.us feed: my own. I have that as the last entry in the Fetch list so that I can personally override every other input.

Step 6: Sort by Date

With experimentation it seems like Pipes orders the output entries by descending date, which is probably what you want. But I want to show how Pipes can work with "dc" data, the "Dublin Core" model that allows you to extend standard RSS feeds (see yesterday's post for more on this).

Google Blog Search and Del.icio.us feeds use the "dc:date" field to record the time when the post was made. Flickr uses "dc:date.Taken" to pass on the photograph's metadata about when it was taken. Pipes' "Rename" module lets you copy both fields into one you create (I've simply used "date"), which you can then run through its "Sort" module. Again, it's a moot point since Pipes seems to do this automatically. But it's good to know how to manipulate and rename "dc" data if only because many PHP parsers have trouble laying it out on a webpage.

Update: it's all moot: according to a ZDNet blog, "Pipes now automatically appends a pubDate tag to any RSS feed that has any of the other allowable date tags." This is nice: no need to hack the date every time you want to make a Pipe!

Step 7: Output

The final step for any Pipe is the "Pipe Output" module.

In action

You can see this published Pipe here, and copy and play with it yourself. The result lets you build an RSS feed based on the two inputs.

Categories: Practical 2.0 , RSS Syndication
Tags: Category Description, Delicious, Flickr, Google, Photo Sharing, Social Bookmarking, Yahoo | Edit
RSS Syndication feeds are small web files that summarize the latest posts to a particular blog or news site. They're a central repository of basic information: title, author, post date, a summary of the post and sometimes the whole post itself. You can open these files directly (here's the raw file for this blog) but you'll see there's a hierarchy of coding that makes it visually uninteresting.

Syndication feeds are the lingua franca powering all the cool new websites. It doesn't matter what blogging platform you use or what operating system you're on: if your software provides an RSS feed I can mix and match it and use it to pull in content to my site.

Examples 1: Photographs: I email all of my adorable kid pictures to the photo sharing site Flickr, which then provides a syndication feed ("here"). I use a little fancy patch of coding on my website to pull in the information about the latest photos (location, caption, etc) so that I can display them on my homepage. Whenever you go to my Theo age you'll see the latest Flickr photos of him.

Example 2: Bookmarks. I also use the "social bookmarking" system with the odd name of del.icio.us. When I find a page I want to bookmark, I click a Delicious button in my browser, which opens a pop-up window. I write a description, pick a category or two and hit save. Deliciouis then provides an RSS syndication feed which I can use to pull together a list of my latest bookmarks and display it on my website. Wave a few magic wands of complication (pay no attention to the man behind the curtain!) and you have the main trick behind Quakerquaker.org.

I've simplified both examples a bit but you probably get the point. Syndication feeds are the secret behind blog readers like Bloglines and email subscription services like the one's I provide for quakerquaker.org.

New to me is the concepts around the Well-Formed Web. As described by Kevin Donahue "The layman's premise of the Well-Formed Web is that each site will have drill-down feeds - a top level feed, item specific feeds, and so on." What this means is that you don't just have one single RSS feed on a site (your latest ten posts) but RSS feeds on everything. Every category get its own unique feeds (e.g., the last ten posts about web design) and every post gets its own unique feed tracking its comments (e.g., this feed of comments from my "Introducing MartinKelley.com" post). It certainly seems a bit like overkill but computers are doing all the work and the result gives us a multi-dimensionality that we can use to pull all sorts of neat things together.

Categories: Practical 2.0 , RSS Syndication
Tags: Adorable Kid, Blog, Blogging, Caption, Email, Flickr, Hierarchy, Lingua Franca, Mix And Match, News Site, Operating System, Photo Sharing, Raw File, Rss Syndication, Web | Edit

When Nonviolence.org morphed into a blog
An early edition of "Nonviolence Web Upfront," which debuted December 29, 1997.
I started Nonviolence.org in late 1995 as a place to publicize the work of the US peace movement which was not getting out to a wide (or a young) audience. I built and maintained the websites of a few dozen hosted groups (including the War Resisters League, Fellowship of Reconciliation and Pax Christi USA) but I quickly realized that the Nonviolence.org homepage itself could be used for more than just as a place to put links to member groups. I realized I could highlight the articles I thought should get more publicity, whether on or off the Nonviolence.org domain. The homepage adapted into what is now a recognizable blog format on November 13, 1997 when I re-named the homepage "Nonviolence Web Upfront" and started posting links to interesting articles from Nonviolence.org member groups. In response to a comment the other day I wondered how that fit in with the evolution of blogging. I was shocked to learn from Wikipedia's that the term "weblog" wasn't coined until December of that year. I think is less a coincidence than a confirmation that many of us were trying to figure out a format for sharing the web with others. Below is an excerpt from the email announcement for "Nonviolence Web Upfront." The reliable Archive.org has index of Upfront's second week, whose feature was a guest piece by John Steitz, Is the Nonviolence Web a Movement Half-Way House that sounds eerily similar to recent discussions on Quaker Ranter.

Here's the email announcement that coincided with Upfront's debut:

NONVIOLENCE WEB NEWS, by Martin Kelley Week of December 29, 1997

CONTENTS
Introducing "Nonviolence Web Upfront"
New Procedures
New Website #1: SERPAJ
New Website #2: Stop the Cassini Flyby
Two Awards
Numbers Available Upon Request
Weekly Visitor Counts

With my travelling and holiday schedule, it's been hard to keep regular NVWeb News updates coming along, but it's been a great month and there's a lot. I'm especially proud of the continuing evolution of what I'm now calling "Nonviolence Web Upfront," seen by 1800-2200 people a month!

----------
INTRODUCING "NONVIOLENCE WEB UPFRONT"
The new magazine format of the NVWeb's homepage has been needing a name. It needed to mentioned the "Nonviolence Web" and I wanted it to imply that it was the site's homepage (sometimes referred to as a "frontpage") and that it contained material taken from the sites of the NVWeb.

So the name is "Nonviolence Web Upfront" and a trip to http://www.nonviolence.org will see that spelled out big on top of the weekly-updated articles.

There's also an archive of the weekly installments found at the bottom of NVWeb Upfront. It's quite a good collection already!

Now that this is moving forward, I encourage everyone to think about how they might contribute articles. If you write an interesting opinion piece, essay, or story that you think would fit, send it along to me. For example, "War Toys: Re-Action-ist Figures" FOR's Vincent Romano's piece from the Nov. 27 edition, was an essay he had already written and made a good complimentary piece for the YouthPeace Week special. But don't worry about themes: NVWeb Upfront is meant not only to be timely but to show the breadth of the nonviolence movement, so send your pieces along!

Categories: MartinKelley.com
Tags: Cassini, Interesting Articles, Martin Kelley, Member Groups, Nonviolence Web, Org Web, Pax Christi Usa, Peace Movement, Quaker, Web, Wikipedia | Edit

Search

As Seen In

EBook

Shortcut cover
Web 2.0 Mash-Ups & Niche Aggregators (O'Reilly Media, 2008, $9.95): Order here.

Social Networks

Other Sites

Archives