Embedding a SmugMug Slideshow on Your Blog

I have recently joined SmugMug and been working hard to learn the system and what you can do with it. This post is more about my experience groping around the system trying to find out how to embed a slideshow, than it is about the actual embedding itself.  But I promise it gets there in the end.

Let me say at the outset that I still like SmugMug.  Whatever problems have come up, I've been able to work around them.  And their support staff is among the best I've ever dealt with. So in that context, let's continue ...

The image to the left is screen grab from SmugMug's "Professional Photo Hosting" page.  Note the offer of easy embedding of a Flash slideshow.

But how?  Remember, though a computer veteran, I am very new to SmugMug -- everything must be learned.

Start with a Search

There is a searchbox at the top of the page, so I enter "embed slideshow" and click the hourglass:

You can try it just by clicking the image above, but I'll save you the trouble:

Hmm. Nothing helpful here.

Try the Help Topics

Now I notice the "Help" link at the top of the page and try that.  Progress!  A help page with various topics in a menu on the left .I expand "Sharing" on the left and notice the "In forums & blogs" link.

Of course this is what I want, and click to open the corresponding help page.

The target help page is very good.  But there's nothing there about embedding a slideshow. They do indeed provide functions for embedding links, but none of those allow you to embed the slideshow itself.  At best the provide a link to your slideshow on the SmugMug page -- not the same thing at all.

At this point I'm pretty annoyed.  I know that I can grab the OBJECT html from the source of a slideshow page and copy it into my blog page, but that's not what I call "easy to embed".  I'm convinced there must be some support somewhere.

Search the Help System Only

Noticing a new search box on the help page, I decide to try searching once again for "embed slideshow".

This time the results appear in a popup box and are more promising, especially the first result:

This first result is only a month old, and appears to offer exactly what I want.  Hooray!  But on going there, I'm somewhat disappointed once again.  The section on embedding a slideshow is really just an example of how to grab the OBJECT html and embed it in your page. While well-written and complete, it seems to suggest that SmugMug doesn't really "support" embedding a slideshow in your blog, but at best encourages a modest hack.

First Solution: Not Quite a Hack

The clock was ticking, so I went ahead and copied the sample HTML from the Embed Slideshow section of the post by Ivar Borst. I pasted it into my blog and edited it, making only a couple of mistakes along the way.  It looks like this:

<object align="middle" height="600" width="600">
  <param name="movie" value="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf">
  <param name="flashvars"
    value="AlbumID=11316063&AlbumKey=FPE9e
    &transparent=true&crossFadeSpeed=500
    &clickUrl=http://www.timelightdistance.com/Events/HSB2009/People/11316063_FPE9e#798787641_Ximsw">
  <param name="wmode" value="transparent">
  <param name="bgcolor" value="000000">
  <param name="allowNetworking" value="all">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf"
    flashvars="AlbumID=11316063&AlbumKey=FPE9e
    &transparent=true&crossFadeSpeed=500
    &clickUrl=http://www.timelightdistance.com/Events/HSB2009/People/11316063_FPE9e#798787641_Ximsw"
    wmode="transparent" type="application/x-shockwave-flash"
    allowScriptAccess="always" allowNetworking="all"
    height="600" width="600">
  </embed>
</object>

It works fine, and several times during the following day I thought about writing a little tool to generate the code for me.

But Wait! There's More

Then tonight I decided to write a quick blog post about my experience. Along the way I clicked the second link on the help search results, the one that says "help - Create Slideshows and Badges".  It leads to the "Show off" help page (below), and guess what?  Here is exactly what I was looking for.

Yes, it turns out that under the "Share" menu for each gallery is a special "Owner Only" section with the meaningless name of "Show Off".  And that, my friend, is where you go to get your embedded slideshow HTML written for you.

At this point I'm feeling a little silly for not finding this function right away, but not as silly as I would have felt if I'd never found it at all.

After you configure your options, click "Copy Embed Code" and you'll get something like this. It's similar to what you would get by using the template found in the Ivar Borst article, but notice that it uses a much newer version of the slideshow SWF file -- December 2009 rather than September 2007 (the SWF file is slideshow code that Flash executes). And there are a ton more options.  This is why it's so much better to do this automatically.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="400" height="400" id="ssidx">
  <param name="movie"
    value="http://www.smugmug.com/ria/ShizamSlides-2009120303.swf
      ?AlbumID=11235053&dontpost=true
      &AlbumKey=qMyjo&newWindow=false&width=400&height=400
      &transparent=true&splash=&showLogo=false&captions=true
      &clickUrl=http%3A%2F%2Fwww.smugmug.com&showThumbs=true
      &showButtons=true&pageStyle=white&autoStart=true
      &showSpeed=true&VersionNos=2009120303&splashDelay=0
      &crossFadeSpeed=350&clickToImage=true
      &showStartButton=false&randomStart=false
      &randomize=true&mainHost=www.timelightdistance.com">
  <param name="wmode" value="transparent">
  <param name="allowNetworking" value="all">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.smugmug.com/ria/ShizamSlides-2009120303.swf?..."
    width="400" height="400" wmode="transparent"
    type="application/x-shockwave-flash" allowScriptAccess="always"
    allowNetworking="all"  >
  </embed>
</object>