Let us presume, that thanks to Triobo you have a web reader application of your digital publication and you want to promote it on another webpage.
You can use IFRAME to display a full-fledged reader application on a different web address as part of another webpage, as we have written in detail in another article. This variation of IFRAME reader application is more usable for unpaid publications, since it covers the paid pages by crosshatches.
The other variant is represented by a more trivial IFRAME reader application, that offers you a simple flip through a specific issue/publication on another web. The pages are smaller and are not covered by crosshatches. At the same time this variant works with a lower quality (unreadable) preview, so that paid mediums cannot be exploited.
The result may look for example like this:
The respective full-fledged reader application is at the same time running on a separate web address.
How to do it
Again, we will use IFRAME (that is a short HTML code, that you will insert to a different webpage) and a new set of parameters, that is usable for publication based on PDF. The example preview shown before is using the following code:
<iframe src="info.eduard.com/en?action=newestissue&embed=1&arrows=1&bg=ddd&color=d00&title=i&applinks=1&weblink=1&barbg=d00&barcolor=fff&bottomweblink=Open%20in%20new%20window%0A" scrolling="no" style="width:650px;height:480px;"></iframe>
Let us go through the individual parameters. Based on your need you may reduce the number of parameters (respectively you do not have to use all of them) and you can thus set the design of your “flip presentation” based on your own will.
info.eduard.com/en – the address of your full-fledged Triobo web reader application. If you use the parameter „action“ (see the following point), state only the home web address. If you do not use the parameter „action“, insert the URL for the specific issue or directly for a specific page.
action=newestissue – thanks to this parameter the most relevant (latest) issue shall be displayed.
embed=1 – a key parameter, that tells the reader application, that the publication shall be displayed in the trivial flip through style, with only small preview etc.
arrows=1 – if this parameter is used, it will display arrows on the sides of the magazine for flipping through. Note: you can also flip through without arrow just by clicking on the respective side.
bg=xxx – thanks to this parameter you can change the background colour. The colour is entered in hexa input, that is common for HTML, for example ddd nebo ff8800, always without # on the beginning.
color=xxx – colour of the arrows, again in hexa input common on web, without # on the beginning.
title=x – instead of „x“ use one of the mentioned variants: „i“ for issue title, „p“ for publication title, „pi“ for publication and issue title. You can also input any text you wish, beware however, that it is not enough to just write it, it is necessary to input it as code, for example by using the service of https://www.urlencoder.org. This gives you for example instead of „Latest issue“ the code „Latest%20issue“, which can be used in this parameter.
applinks=1 – this parameter sets if the icons for downloading the mobile application (that is the bitten apple, android) are shown.
weblink=1 – this parameter sets if the icon for opening the full fledged reader application in a new browser window is shown.
bottomweblink= – you can also set your own text hyperlink under the publication. The text needs to be encoded first, again for example by using the service of https://www.urlencoder.org. Example: instead of „Open in new window“ you will get „Open%20in%20new%20window“, which can be used in the parameter.
If the parameter title or applinks or weblink (that is at least one of those) is set, then a lane of heading will show above, which can be coloured:
barbg=xxx – colour of the background of the heading lane, again in hexa in the web standard without # on the beginning.
barcolor=xxx – colour of the text in the heading lane.
The size of the window (in pixels) is modified here: style=”width:650px;height:480px;”.
Tip: do not forget to put hyperlinks to the e-shop with the option to purchase subscription or specific digital (and/or printer) publications under the window with IFRAME flip presentation.
Quality of previews
The publisher can decide to use previews of individual pages in a higher quality – this, however, comes with the risk, that such pages are on the border of normal readability and therefore there is a higher chance, in case of paid publications, that they will be exploited. This change is subject to authorization from the side of Triobo, for safety reasons, and therefore it is necessary to directly request it.
Note: This option is available only for those titles, that were imported from PDF files.
Statistics
Even such a simplified version of the reader application for marketing purposes is compatible with your Google Analytics statistics, which gives you overview of its usage.
Hyperlink sample to a specific page of a magazine
The example, that is missing the parameter „action“ and therefore no arrows for flipping through are shown.
<iframe src="https://kiosek.epublishing.cz/tajemstvi-vesmiru/7-8-2019/strana-12?embed=1&bg=000&title=pi&applinks=1&weblink=1&barbg=404&barcolor=ddd" style="width:650px;height:480px;" scrolling="no"></iframe>
Can also be used even for the original digital layout
You do not have to work only with publications based on PDF, the flip presentation can also handle (in previews) publications created with original layout for digital environment, that contain animations, interactivity etc.
Bonus for advanced – „fully responsive IFRAME“
For ideal customisation of the IFRAME flip presentation to the actual size of the browser window (a typical problem between a big monitor and display of a cell phone), it is suitable to ensure such responsiveness, so that the IFRAME reduces its size while keeping the height-to-width ratio constant. The procedure to do so is the following:
First, it is necessary to define the style for „box“ and use the trick through „padding-bottom“ that renders rectangle 100 % wide and tall in the requested ratio. Next, IFRAME will be inserted inside with the absolute position of 0, 0 and dimensions of 100 % x 100 %..
The corresponding part of the code:
<style>
.box {
position: relative;
width: 100%;
padding-bottom: 75%; /* tato hodnota určuje poměr, 4:3 = 75%, 3:2 = 66%, 16:9 = 56.25% */
}
.box iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>
Use this construction in the HTML code of the webpage:
<div class='box'><iframe src='xxxxxx'></iframe></div>
