Embed issuu.com Flipbooks - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Go to Code for Video, Slideshows, and more.

NOTE: Issuu uses HTML5 code for non-desktop screens (mobile, tablet), but uses Flash on desktops—and Flash is usually not accessible.

Steps to Embed an issuu.com Flipbook

  • Upload PDF to issuu.com
  • Enter document title and description for the uploaded PDF
  • Wait until the conversion process is done
  • Go to the Publication List page
  • For the uploaded PDF, find "Embed"
  • Modify default embed settings as follows:
    • change width to 600px
    • change background color to #ffffff
    • check "Remove links below embedded reader"
    • check "Users cannot make Clips on this publication"
    • save the style
  • Copy embed code and paste where indicated in below code
  • Copy link code from issuu.com and paste where indicated in below code
  • Edit the caption for the flipbook to use an appropriate title
<div class="embeddedmedia centertag issuu" style="width:600px;">
  <span class="source"><a href="LINKCODE">Flipbook: TITLE</a></span>
  PASTE_EMBED_CODE_PROVIDED_BY_ISSUU
</div>

Example:

<div class="embeddedmedia centertag issuu" style="width:600px;">
  <span class="source"><a href="http://issuu.com/ohlone-college/docs/allpages_eee0e659e50ed7?e=8017878/5731146">Flipbook: Ohlone College Monitor, November 21, 2013</a></span>
  <div data-configid="8017878/5731146" style="width: 600px; height: 464px;" class="issuuembed"></div>
  <script src="//e.issuu.com/embed.js" async></script>
</div>

Some "standard" sizes if embedded displays need to be resized:

  • 600x400 ==> 300x200 ==> 250x167
  • 600x464 ==> 300x232 ==> 250x193