Journalism for the Web - Summer 2010

(Instructions for students enrolled in this class - NOT a general tutorial)

Embedding your slide show in a WordPress blog post

After creating your slideshow in Soundslides, click "EXPORT." Look inside your project folder for a folder named "publish_to_web." Inside of this folder will be all of the files necessary for the slideshow to run on the web. There will be a .swf (Flash file) and also copies of the jpeg images. 

Because the slideshow requires the contents of the folder to run we cannot simply upload the .swf through the Wordpress blog the same way that we would upload a still image or a movie clip. Instead we will upload the folder to another server space, generate code that will link to the files at this space and then paste that code into Wordpress. 

1. Create your project in Soundslides

2. Click on EXPORT to export it for posting on the web 

3. this updates teh contents of a folder called  "publish_to_web" within your project folder

4. Copy the "publish_to_web" folder and paste it on the desktop of the computer you are working on

5. Rename the folder - give it a simple name that is descriptive of the project ie "ub2020_effects" or "commuter_story" (be sure to use only lower case letters and don't use any punctiatiopn, except for "_" or "-")

6. Create a zip archive of the folder (on the Macs in the lab, just right click on the folder and choose "Compress"). The zip archive will be a single file with the same name as the folder and the extension  .zip.

7. E-mail this .zip file to me

8. I will post it online at this location: http://ubfiles.howthecampusworks.org/slideshows

9. To embed the slideshow into a Wordpress post you will need to generate code to paste in that references the location of the folder on the web. 

10. For an easy way to generate this code, visit this page:

http://support.soundslides.com/index.php?pg=kb.page&id=71

11. On that page you can enter the location of the slideshow you want to embed (remember to include the folder name ie, if you renamed your "publish_to_web" folder as "ub2020_effects" then the location would be:  "http://ubfiles.howthecampusworks.org/slideshows/ub2020_effects")

12.  Copy this code.

13. When you go to create the blog post, be sure to switch into HTML mode (not visual mode), then paste the embed code. 

14. Preview the post. If it worked out then you may switch back to visual mode for adding more text or images to the post.