Below, you’ll find a detailed guide on how to add the FlowPaper Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the flowpaper Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the flowpaper Plugin and the shortcodes it provides:
"Flowpaper is a dynamic WordPress plugin that transforms your PDFs into engaging flipbooks. With the Flowpaper-lite-pdf-flipbook plugin, make your content interactive and appealing."
- [flipbook]
FlowPaper [flipbook] Shortcode
The FlowPaper Lite PDF Flipbook plugin shortcode enables users to embed PDFs into their WordPress posts or pages as a flipbook. It provides customization options such as width, height, and lightbox display.
Shortcode: [flipbook]
Parameters
Here is a list of all possible flipbook shortcode parameters and attributes:
width
– Defines the width of the flipbook, default is 100%height
– Sets the height of the flipbook, default is 500scrolling
– Controls the scrolling feature, default is noclass
– Assigns a CSS class to the flipbook, default is flowpaper-classframeborder
– Determines the border of the iframe, default is 0allowFullScreen
– Allows fullscreen view, default is truepdf
– Defines the PDF file to be displayed as a flipbooklightbox
– Determines whether to display the flipbook in a lightbox, default is falsetheme
– Specifies the theme of the flipbookheader
– Sets the header of the flipbooktitle
– Assigns a title to the flipbooksinglepage
– Controls the single page view of the flipbookcover
– Sets the cover of the flipbookid
– Unique identifier for each flipbooksame_height_as
– Matches the height of the flipbook to another element
Examples and Usage
Basic example – Embed a PDF file into your WordPress post or page using the FlowPaper Lite PDF Flipbook plugin. The shortcode requires the ‘pdf’ attribute to specify the URL of the PDF file.
[flipbook pdf="http://example.com/path/to/your.pdf" /]
Advanced examples
Embed a PDF with a custom width and height. The ‘width’ and ‘height’ attributes allow you to specify the size of the flipbook viewer.
[flipbook pdf="http://example.com/path/to/your.pdf" width="500" height="300" /]
Embed a PDF with a lightbox effect. The ‘lightbox’ attribute enables the lightbox effect when set to ‘true’. The PDF will open in a lightbox when clicked.
[flipbook pdf="http://example.com/path/to/your.pdf" lightbox="true" /]
Embed a PDF with a custom theme. The ‘theme’ attribute allows you to apply a custom theme to the flipbook viewer.
[flipbook pdf="http://example.com/path/to/your.pdf" theme="dark" /]
Embed a PDF with a custom title and cover image. The ‘title’ and ‘cover’ attributes allow you to specify a custom title and cover image for the flipbook.
[flipbook pdf="http://example.com/path/to/your.pdf" title="My Flipbook" cover="http://example.com/path/to/cover.jpg" /]
PHP Function Code
In case you have difficulties debugging what causing issues with [flipbook]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'flipbook', 'flowpaper_plugin_add_shortcode_cb' );
Shortcode PHP function:
function flowpaper_plugin_add_shortcode_cb( $atts, $content="" ) {
$atts = shortcode_atts(
array(
'width' => '100%',
'height' => '500',
'scrolling' => 'no',
'class' => 'flowpaper-class',
'frameborder' => '0',
'allowFullScreen' => 'true',
'pdf' => '',
'lightbox' => 'false',
'theme' => '',
'header' => '',
'title' => '',
'singlepage' => '',
'cover' => '',
'id' => '',
'same_height_as' => ''
), $atts, 'flipbook' );
// Check if we're embedding through a link or iframe
$linkEmbed = false;
foreach( $atts as $attr => $value ) {
if(strtolower($attr) == 'lightbox' && $value == 'true'){
$linkEmbed = true;
}
}
$html = "\n".'<!-- FlowPaper PDF flipbook plugin v.'.FLOWPAPER_PLUGIN_VERSION.' wordpress.org/plugins/flowpaper/ -->'."\n";
if($linkEmbed){
// add lightbox css styles
wp_enqueue_style('lity-css', plugins_url( '/assets/lity/lity.min.css', __FILE__ ), false, NULL, 'all');
$title = "";
$cover = "";
$pdfUrl = "";
$theme = "";
$singlepage = "auto";
$thumbs = true;
$title = "";
$header = "";
$cloudhosted = false;
foreach( $atts as $attr => $value ) {
if ( strtolower($attr) != 'same_height_as' AND strtolower($attr) != 'onload'
AND strtolower($attr) != 'onpageshow' AND strtolower($attr) != 'onclick') { // remove some attributes
if(strtolower($attr) == 'pdf'){ // append url at the end of the base url
$flowpaper_matches = [];
try {
if(strpos($value,'.flowpaper.com') && strpos($value,'http')==0){
preg_match('/^(?:([^\.]+)\.)?flowpaper\.com$/',parse_url($value)['host'],$flowpaper_matches);
}
}catch (Exception $ssx) {}
if(count($flowpaper_matches)==2 || strpos($value,'publ.flowpaper.com') > 0 || strpos($value,'online.flowpaper.com') > 0 || !strpos(strtolower($value),'.pdf')){
$pdfUrl = esc_attr( $value );
$cloudhosted = true;
// make sure we're using https if the website that has embedded the viewer is using https
if(!empty($_SERVER['HTTPS'])){
$pdfUrl = str_replace("http://","https://",$pdfUrl);
}
}else{
$pdfUrl = 'http://flowpaper.com/flipbook/?pdf=' . esc_attr( $value ) . (strpos(esc_attr($value),WP_CONTENT_URL)===0?"?wp-hosted=1":"");
if(!empty($_SERVER['HTTPS'])){ // use https if PDF is on a https url
$pdfUrl = 'https://flowpaper.com/flipbook/?pdf=' . esc_attr( $value ) . (strpos(esc_attr($value),WP_CONTENT_URL)===0?"?wp-hosted=1":"");
}
}
}else if(strtolower($attr) == 'theme'){
$theme = sanitize_text_field(esc_attr( $value ));
}else if(strtolower($attr) == 'title'){
$title = sanitize_title(esc_attr( $value ));
}else if(strtolower($attr) == 'cover'){
$cover = sanitize_text_field(esc_attr( $value ));
}else if(strtolower($attr) == 'singlepage'){
$singlepage = sanitize_text_field(esc_attr( $value ));
}
}
}
$html .= '<a data-lity href="' . sanitize_url($pdfUrl . (!$cloudhosted?('&title=' . $title . '&header=' . $header . '&theme=' . $theme . '&singlepage=' . $singlepage . '&thumbs=' . $thumbs . '&modified=' . get_the_modified_date('ymdgi')):'')) . '">';
if(strlen($cover) == 0 && strlen($title) > 0){
$html .= sanitize_title($title);
}else if(strlen($cover) > 0){
$html .= '<img src="' . sanitize_url($cover) . '" class="aligncenter">';
}else{
$html .= sanitize_url($pdfUrl);
}
$html .= '</a>';
}else{
$html .= '<iframe title="FlowPaper website pdf viewer"';
$pdfUrl = "";
$theme = "";
$singlepage = "auto";
$thumbs = true;
$title = "";
$header = "";
$cloudhosted = false;
foreach( $atts as $attr => $value ) {
if ( strtolower($attr) != 'same_height_as' AND strtolower($attr) != 'onload'
AND strtolower($attr) != 'onpageshow' AND strtolower($attr) != 'onclick') { // remove some attributes
if(strtolower($attr) == 'pdf'){ // append url at the end of the base url
$flowpaper_matches = [];
try {
if(strpos($value,'.flowpaper.com') && strpos($value,'http')==0){
preg_match('/^(?:([^\.]+)\.)?flowpaper\.com$/',parse_url($value)['host'],$flowpaper_matches);
}
}catch (Exception $ssx) {}
if(count($flowpaper_matches)==2 || strpos($value,'publ.flowpaper.com') > 0 || strpos($value,'online.flowpaper.com') > 0 || !strpos(strtolower($value),'.pdf')){
$pdfUrl = esc_attr( $value );
$cloudhosted = true;
// make sure we're using https if the website that has embedded the viewer is using https
if(!empty($_SERVER['HTTPS'])){
$pdfUrl = str_replace("http://","https://",$pdfUrl);
}
}else{
$pdfUrl = 'http://flowpaper.com/flipbook/?pdf=' . esc_attr( $value ) . (strpos(esc_attr($value),WP_CONTENT_URL)===0?"?wp-hosted=1":"");
if(!empty($_SERVER['HTTPS'])){ // use https if PDF is on a https url
$pdfUrl = 'https://flowpaper.com/flipbook/?pdf=' . esc_attr( $value ) . (strpos(esc_attr($value),WP_CONTENT_URL)===0?"?wp-hosted=1":"");
}
}
}else if(strtolower($attr) == 'theme'){
$theme = sanitize_text_field(esc_attr( $value ));
}else if(strtolower($attr) == 'title'){
$title = sanitize_title(esc_attr( $value ));
}else if(strtolower($attr) == 'header'){
$header = sanitize_text_field(esc_attr( $value ));
}else if(strtolower($attr) == 'singlepage'){
$singlepage = sanitize_text_field(esc_attr( $value ));
}else if(strtolower($attr) == 'thumbs'){
$thumbs = sanitize_text_field(esc_attr( $value ));
} else if ( $value != '' ) { // adding all attributes
$html .= ' ' .sanitize_text_field(esc_attr( $attr )) . '="' . sanitize_text_field(esc_attr( $value )) . '"';
} else { // adding empty attributes
$html .= ' ' . sanitize_text_field(esc_attr( $attr ));
}
}
}
$html .= ' src = "' . sanitize_url($pdfUrl . (!$cloudhosted?('&title=' . $title . '&header=' . $header . '&theme=' . $theme . '&singlepage=' . $singlepage . '&thumbs=' . $thumbs . '&modified=' . get_the_modified_date('ymdgi')):'')) . '"';
$html .= ' seamless="seamless" style="margin-bottom:0;display:block;">Your browser does not seem to support iframes. <a href="' . sanitize_url($pdfUrl) . '" target="_blank">Click here to read this PDF</a>.</iframe>'."\n";
if(!$cloudhosted){
$publicationType = 'Convert your PDF to digital flipbook';
$publicationTypeLink = '/flipbook-maker/';
if(strpos($pdfUrl,'broch') !== false){
$publicationType = 'Convert a PDF to digital brochure';
$publicationTypeLink = '/brochure-maker/';
}
if(strpos($pdfUrl,'catalog') !== false){
$publicationType = 'Convert your PDF to online catalog';
$publicationTypeLink = '/catalog-maker/';
}
if(strpos($pdfUrl,'mag') !== false){
$publicationType = 'Convert your PDF to online magazine';
$publicationTypeLink = '/online-magazine-maker/';
}
$html = '<div style="display:block">' . $html;
$html .= '<div id="flowpaper-logo-bottom" class="flowpaper-logo-bg" style="background:linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 200px);width:100%;height:19px; padding-bottom: 1px; padding-left: 5px; padding-right: 10px; display: flex; align-items: center;z-index:9999">';
$html .= '<span style="height: 37px; padding-left: 6px;width:90%"> <a id="flowpaper-link" style="fill: #fff" alt="FlowPaper logotype" title="FlowPaper logotype" href="https://flowpaper.com" target="_blank"> <img alt="Publish PDF flipbooks online" style="height:17px;width:auto;margin-top:11px;" src="' . plugins_url( '/assets/flowpaper-logo.png', __FILE__ ) . '" border="0"> </a> </span>';
$html .= '<span style=" float: right; right: 0; font-size: 10px; white-space: nowrap; opacity:0.8"><a href="https://flowpaper.com' . $publicationTypeLink .'" target="_new" style="text-decoration:none;border-bottom:none;">' . $publicationType . ' ↗</a></span>';
$html .= '</div></div>';
}
if ( isset( $atts["same_height_as"] ) ) {
$html .= '
<script>
document.addEventListener("DOMContentLoaded", function(){
var target_element, iframe_element;
iframe_element = document.querySelector("iframe.' . sanitize_text_field(esc_attr( $atts["class"] )) . '");
target_element = document.querySelector("' . sanitize_text_field(esc_attr( $atts["same_height_as"] )) . '");
iframe_element.style.height = target_element.offsetHeight + "px";
});
</script>
';
}
}
return $html;
}
Code file location:
flowpaper-lite-pdf-flipbook/flowpaper-lite-pdf-flipbook/flowpaper.php
Conclusion
Now that you’ve learned how to embed the FlowPaper Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply