Migrating From Legacy Flash-Only Embed Codes

If you are using issuu’s old Flash-only embed code format, your users will not be able to read your embedded publications unless they have Flash installed in their browsers. 

Follow the instructions below to ensure your readers can still read your embedded publications without Flash installed.

The old embed code made use of the "embed" and "object" tags. Here is an example of how the old embed code looks using the "embed" tag:

<embed style="width: 300px; height: 193px; z-index: 0; display: block;" type="application/x-shockwave-flash" src="https://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" allowfullscreen="true" menu="false" flashvars="mode=embed&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;showFlipBtn=true&amp;proShowMenu=true&amp;documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c&amp;docName=fullbook_lowres_3&amp;username=stratton&amp;loadingInfoText=Learning%20By%20Design&amp;et=1275935260482&amp;er=59" id="2_embed" wmode="transparent" width="300" height="193"></embed>

Here is another example of the old embed code using the "object" tag:

<object style="width: 420px; height: 560px;" width="320" height="240" data="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" />
<param name="menu" value="false" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" />
<param name="flashvars" value="mode=embed&amp;viewMode=presentation&amp;layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&amp;backgroundColor=FFFFFF&amp;showFlipBtn=true&amp;documentId=100318163929-24d2670dcbd84b368afec3f0ee73325&amp;docName=zeiss_nuovo_cannocchiale_v8_ita_fly&amp;username=testing&amp;loadingInfoText=Zeiss%20nuovo%20cannocchiale%20v8%20ita%20flyer%202014&amp;et=1397564036921&amp;er=41" /></object>

For comparison, this is how our new embed code looks:

<div data-configid="0/5134158" style="width: 525px; height: 525px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>

 

Customizing Embeds

With our old Flash reader, you had the ability to customize your embeds by skinning them using a Flash-based markup language. This is no longer supported going forward.

You still have many customization options available when setting up your embed using the Embed Widget, such as changing the background color, adding a background image and using your logo. Read more about creating embeds as a publisher.

 

Recommended Action: Create a New Embed Code

To create a new embed code, go to your Publisher Tools page, navigate to the publication in your Publication List and select “EMBED.” Learn how to customize your embed and get a new embed code.

 

Alternative Action: Migrate the Embed Code

If you have many embed codes that need to be replaced, we support a more automated migration path that will work in all non-Flash browsers. In the example of the old embed code above, the parameter called documentId is a reference to the embedded document:

documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c

You can then take this value from the existing old Flash embed code and use it with the following special migration embed code:

<iframe width="525" height="679" src="//e.issuu.com/legacy.html?documentId=100318163929-24d2670dcbd84b368afec3f0ee73325c" frameborder="0" allowfullscreen></iframe>

This will not support all embed customization options from the embed page as described in the previous section, but it can be a solution if you want an automated way to migrate the old embed codes automatically. The following additional parameters are supported:

  • pageNumber is a positive integer specifying the starting page number
  • viewMode controls if the embed should be shown with single page or double page (default). To force double page, set this to doublePage (or the legacy magazine). To force single page, set this to singlePage (or the legacy presentation)
  • backgroundColor is a hex triplet setting the background color of the embed itself (not the full-screen reading experience).

Apply these using standard URL parameter notation like in the example below:

<iframe width="525" height="679" src="//e.issuu.com/legacy.html?documentId=150412172205-7972b382a2eadfbf3f52225007919cd2&pageNumber=2&viewMode=presentation&backgroundColor=00ff00" frameborder="0" allowfullscreen></iframe>

Comments

Have more questions? Submit a request
Powered by Zendesk