HTML5 Slideshow Maker

How to Embed an HTML5 Photo Slideshow to WordPress

Creating an HTML5 photo slideshow with HTML5 Slideshow Maker is quite easy. Most people do not need the HTML5 tutorial on How to Create a Slideshow with HTML5 Slideshow Maker. But when comes to embedding an HTML5 photo slideshow to WordPress, some people may feel confused with the HTML5 tutorial on How to Embed an HTML5 Photo Slideshow to Website. To let these HTML5 Slideshow Maker users know clearly on how to embed an HTML5 photo slideshow to WordPress, we wrote this special HTML5 tutorial. By learning this HTML5 tutorial, HTML5 Slideshow Maker users can know how to embed photo slideshows to WordPress posts and WordPress pages, and then share their WordPress slideshows to the world.

Preparation for Embedding an HTML5 Photo Slideshow to WordPress

Before using this HTML5 tutorial for embedding WordPress slideshows, you may need to know the following. If you are not familiar with the following two topics, please refer to How to Create a Slideshow with HTML5 Slideshow Maker.
  • How to make an HTML5 photo slideshow with HTML5 Slideshow Maker;
  • How to upload your HTML5 photo slideshow to free photo slideshow hosting site Go2Album;

Download HTML5 Slideshow Maker Free for WindowsDownload HTML5 Slideshow Maker on Mac App Store

Steps for Embedding an HTML5 Photo Slideshow to WordPress

The process of embedding an HTML5 photo slideshow to WordPress post or WordPress pages is really simple. Though you will need to use the HTML5 codes of your HTML5 photo slideshows, yet you just need to copy and paste them, without the need to understand the HTML5 codes.

Step 1. Open the link to your HTML5 photo slideshow on Go2Album.

After publishing your HTML5 photo slideshow and uploading it to Go2Album, HTML5 Slideshow Maker will offer the link to your HTML5 slideshow. Besides, you can also know the link to your HTML5 photo slideshow by logining your Go2Album account. Assume the link of your slideshow is http://www.go2album.com/showAlbum/1011151/test, and the ID of your HTML5 photo slideshow on Go2Album is 1011151. Then when you open your slideshow in Firefox, you will get the following screenshot.

The screenshot when your viewing your HTML5 photo slideshow on Go2Album

Step 2. Get the HTML5 codes of your HTML5 photo slideshow.

From the above screenshot, you can see the HTML5 codes which start with an <iframe> tag placed on the right of your HTML5 Slideshow. With only one left click of the mouse on these HTML5 codes, you can select all these HTML5 codes. After selecting them, you can press Ctrl and C to get these HTML5 codes. Or you may also get all the HTML5 codes of your HTML5 photo slideshow by right clicking your mouse and choose Copy.

The HTML5 codes of the example HTML5 photo slideshow are below.

The HTML5 codes of your HTML5 photo slideshow

Step 3. Open your WordPress site and edit your post/page

With the HTML5 codes you get by taking the Step 2, you can put your HTML5 photo slideshows both on your posts and pages. Generally, you use the visual mode to edit your WordPress post or WordPress pages. To embed an HTML5 photo slideshow with HTML5 codes, you need to convert the visual mode to the HTML mode. So first, you need to click "HTML", which marked with a red frame on the screenshot below. After you enter the HTML mode, you can paste the HTML5 codes of your HTML5 photo slideshow to the editing area.

Paste the HTML5 codes of your HTML5 photo slideshow to your WordPress post or WordPress Page

WordPress offers the function of previewing your post and pages, so before publishing your HTML5 photo slideshow, you can click the "Preview" button to preview it. If it is works all right, then you can click the "Publish" button to publish your HTML5 photo slideshow.