How to Embed a Shutterfly Photo Album into an iModules Content Block

Third party photo-sharing sites (e.g., Flicker, PhotoBucket, Shutterfly) can be used to store and share digital photos. These sites offer inexpensive, if not free, on-line storage capability. They also offer photo editing, organizing and labeling features more advanced than what is available in iModules. Shutterfly allows single-password access to shared sites, for improved privacy.

This instruction set shows how to display, in an iModules content block, a photo album (also called “gallery”) previously created in Shutterfly and then posted to a Shutterfly “shared site”.

Pre-Steps1. Create an account at Shutterfly. In the top right-hand corner of the Shutterfly home page

(Figure 1), click on the link, “Sign up”, and then follow-the on-line instructions.

Figure 1. Shutterfly home page and “Sign up” link.

2. Create a “share site”. On the Shutterfly home page, click on the button labeled, “Make a free site” (Figure 2.)

Figure 2. Link to “Share Site” creation.

How to Embed a Shutterfly Album.pages! page 1 of 7! updated Friday, November 7, 2014

3. Create an album on the shared site. On your share site home page, click on the button labeled, “Add album” (Figure 3). Populate the new album with photos or albums either already uploaded to your Shutterfly account, or with photos available on your computer.

Figure 3. Link to create add an album.

Embed a Shutterfly Album into an iModules Content Block

Step #1: Open an album available in your Shutterfly “share site”, by double-clicking on the album cover photo (Figure 4).

Figure 4. Open an album.

How to Embed a Shutterfly Album.pages! page 2 of 7! updated Friday, November 7, 2014

Step #2: Move your cursor over the link labeled, “Post to:”, shown in the bottom right-hand corner of the album . This will reveal a pop-up window (Figure 5.) In this pop-up window, click on the link labeled, “Get embedded code”.

Figure 5. Access album “embed code”.

Step #3: A larger pop-up window will appear (Figure 6). Highlight and copy all of the text displayed in the text box labeled, “Embed code”. This is the HTML code that will be pasted into a content block in an iModules page.

Figure 6. HTML embed code window.

How to Embed a Shutterfly Album.pages! page 3 of 7! updated Friday, November 7, 2014

Step #4: Activate for editing a content block on an iModules page (Figure 7).

Figure 7. Access album “embed code”.

Step #5: Using the slide on the right side of the edit pop-up window, scroll to the bottom of the edit window (Figure 8). Then click on the “HTML” link at the bottom of the screen.

Figure 8. Access album “embed code”.

How to Embed a Shutterfly Album.pages! page 4 of 7! updated Friday, November 7, 2014

Step #6: Paste the Shutterfly “embed code” into the HTML edit window (Figure 9). Then click on the “Save” link at the bottom of the edit window.

Figure 9. Paste in HTML code.

Your Shutterfly album will appear as a functioning box, 425 pixels by 425 pixels (Figure 10).

Figure 10. Shutterfly album displayed in iModules.

How to Embed a Shutterfly Album.pages! page 5 of 7! updated Friday, November 7, 2014

Tips and Tricks

1. Change the size of the album box. Replace the value “425” in five places:

<object name="Slideshow" id="Slideshow" width="425" height="425" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param name="movie" value="https://www.shutterfly.com/flashapps/flashslideshow/Slideshow.swf" /><param name="flashvars" value="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" /><param name="allowscriptaccess" value="always" /><embed id="Slideshow" width="425" height="425" name="Slideshow" align="middle" quality="high" type="application/x-shockwave-flash" flashvars="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="true" bgcolor="#869ca7" src="https://www.shutterfly.com/flashapps/flashslideshow/Slideshow.swf"></embed></object><p style="width:425px;margin-top:0;text-align:center;"><a rel="nofollow" href="https://dartmouth1979.shutterfly.com/pictures/716?eid=116">Click here to view these pictures larger</a><img width="1" height="1" border="0" style="padding: 0; background: #ffffff; border: none; box-shadow: none;" src="https://os.shutterfly.com/b/ss/sflyshareprod/1/H.15/111?pageName=sharekey&c1=pictures&c2=embed" /></p>

2. Change the text that appears beneath the album window. Replace the text highlighted below with different text:

<object name="Slideshow" id="Slideshow" width="425" height="425" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param name="movie" value="https://www.shutterfly.com/flashapps/flashslideshow/Slideshow.swf" /><param name="flashvars" value="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" /><param name="allowscriptaccess" value="always" /><embed id="Slideshow" width="425" height="425" name="Slideshow" align="middle" quality="high" type="application/x-shockwave-flash" flashvars="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="true" bgcolor="#869ca7" src="https://www.shutterfly.com/flashapps/flashslideshow/Slideshow.swf"></embed></object><p style="width:425px;margin-top:0;text-align:center;"><a rel="nofollow" href="https://dartmouth1979.shutterfly.com/pictures/716?eid=116">Click here to view these pictures larger</a><img width="1" height="1" border="0" style="padding: 0; background: #ffffff; border: none; box-shadow: none;" src="https://os.shutterfly.com/b/ss/sflyshareprod/1/H.15/111?pageName=sharekey&c1=pictures&c2=embed" /></p>

3. Change the action of the link beneath the album window, so that a new browser window is opened, rather than re-directing the current browser window. Insert, where shown below, a space and then the text string, target=”_blank”.

<object name="Slideshow" id="Slideshow" width="425" height="425" align="middle" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><param name="movie" value="https://www.shutterfly.com/flashapps/flashslideshow/Slideshow.swf" /><param name="flashvars" value="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" /><param name="allowscriptaccess" value="always" /><embed id="Slideshow" width="425" height="425" name="Slideshow" align="middle" quality="high" type="application/x-shockwave-flash" flashvars="configurl=%2F%2Fcmd.shutterfly.com%2Fcommands%2Fpictures%2Fgetshareoutslideshowconfig%3Fsite%3Ddartmouth1979%26page%3Ddartmouth1979%2Fpictures%26node%3D716" pluginspage="http://www.adobe.com/go/getflashplayer" allowscriptaccess="always" allowfullscreen="true" bgcolor="#869ca7" src="https://www.shutterfly.com/

How to Embed a Shutterfly Album.pages! page 6 of 7! updated Friday, November 7, 2014

flashapps/flashslideshow/Slideshow.swf"></embed></object><p style="width:425px;margin-top:0;text-align:center;"><a rel="nofollow" href="https://dartmouth1979.shutterfly.com/pictures/716?eid=116" target="_blank">Click here to view these pictures larger</a><img width="1" height="1" border="0" style="padding: 0; background: #ffffff; border: none; box-shadow: none;" src="https://os.shutterfly.com/b/ss/sflyshareprod/1/H.15/111?pageName=sharekey&c1=pictures&c2=embed" /></p>

Sample iModules Page Displaying Multiple Shutterfly Albums (2x2 Table)

How to Embed a Shutterfly Album.pages! page 7 of 7! updated Friday, November 7, 2014