Using PhotoShow Tools

Integrating PhotoShow into your site is easy. In most cases, you just add simple HTML and JavaScript code into your pages. The developer tools are hosted on PhotoShow’s servers, so there’s no code to install on your systems. For some types of integrations, you may want to implement callbacks that PhotoShow can use to send or receive information from your site.

Some common integration scenarios are outlined below:

• Turning all of a user’s pictures into a PhotoShow (e.g., for their profile page)
• Letting users create PhotoShows from scratch, to post to your site (or elsewhere)
• Replacing an existing HTML or Flash slideshow with PhotoShow

You can, of course, put in as much (or as little) additional work as you choose to create more-advanced integrations — we’ll call out some possibilities below.

Turn User Pictures into a Profile PhotoShow

Say you’re already letting users upload and store pictures at your site, and you want to display the 20 most recent ones as a PhotoShow on each user’s profile page. Here’s what to do:

1. Expose the list of recent pictures as a Media RSS feed. (It’s just an RSS feed of pictures, with a `` tag giving the URL for each image. You might even already have this — it’s a standard feature at Flickr and WebShots.)
2. When you’re generating a user profile page, include PhotoShow’s instashow JavaScript code, pointing it at that user’s RSS feed.

That’s all you need to do — PhotoShow takes care of the rest. Read the instashow widget docs for full details.

Want more? You can pick a PhotoShow One Click Style with thematic elements that are just right for your site. Or let each of your users choose their own — the style of the show is controlled with a JavaScript variable.

Let Users Create and Publish PhotoShows

Say you’re running a community forum, and you’d like to let users create and post PhotoShows into the forum. When you integrate PhotoShow authoring, your users can do that without ever leaving your site. Here’s what it takes:

1. Add the JavaScript for the PhotoShow authoring widget to the page where you want to let signed-in users create new PhotoShows. The authoring widget can either be embedded into your page, or you can include a button that opens it in a new window — whichever works best for your page layout.
2. Implement a postShow callback function. This is call on your site (PHP, Ruby, Java, whatever you implement in) that PhotoShow will call once a user has finished creating a show. This callback probably looks a whole lot like code you already have to let users add new postings; the only difference is it’s coming from PhotoShow’s servers rather than directly from a user. (If your system supports the Atom POST operation or something similar, that’s pretty much the code you need.)
3. When your postShow callback is called, grab the HTML snippet PhotoShow gives you and add that as new content in the forum. (You’ll probably want to make sure it’s a valid user posting. PhotoShow will pass through a userid and session key — use them for whatever information you need — for you to authenticate the post.)

That’s all there is to it. See the authoring widget docs for details and to get the code.

Want more? PhotoShow authoring includes an uploader for users to get their pictures into the show, but you can also let users import pictures they’ve already stored at your site. Just implement getAlbumList and getAlbum callbacks (they do pretty much what you’d expect). Details under importing user pictures.

Replace a Static Slideshow with an Editable PhotoShow

Say you have a “gallery” section of your site, where users can create photo albums. You currently offer simple HTML slideshows of those albums, and you’d like to switch to PhotoShows.

This is a lot like the user profile show example earlier. But say you want to go a step further, and let users customize the PhotoShow for each album. Here’s the plan:

1. Implement an instashow for each album, by integrating the instashow JavaScript code into your album pages and handing it an RSS feed of the album’s pictures (and captions, if you want). That gives every user an immediate PhotoShow for each album, replacing (or augmenting) your existing HTML slideshow.
2. In the instashow JavaScript, include a unique contentId. This can be anything you want; the only requirement is that it be unique across your site. (E.g., maybe it’s an internal id you use to identify this particular photo album.) PhotoShow uses this to keep track of any customizations the user makes.
3. If the user viewing the page is the album’s owner, set editableShow: true in the instashow JavaScript. This makes PhotoShow display an “Edit this Show” link in the viewer.

Believe it or not, that’s all it takes. PhotoShow will store any edits the user makes on its own servers, under the contentId you supplied, and will use that to reassemble the customized PhotoShow on the fly whenever anyone views the PhotoShow for that album. Read more in the docs under editable instashows.

Want more? You can customize the set of One Click Styles offered when users customize their show, to highlight the best choices for your site.