FlowPaper Shortcode

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:

Plugin Icon
flowpaper

"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."

★★★✩✩ (34) Active Installs: 20000+ Tested with: 6.4 PHP Version: false
Included Shortcodes:
  • [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 500
  • scrolling – Controls the scrolling feature, default is no
  • class – Assigns a CSS class to the flipbook, default is flowpaper-class
  • frameborder – Determines the border of the iframe, default is 0
  • allowFullScreen – Allows fullscreen view, default is true
  • pdf – Defines the PDF file to be displayed as a flipbook
  • lightbox – Determines whether to display the flipbook in a lightbox, default is false
  • theme – Specifies the theme of the flipbook
  • header – Sets the header of the flipbook
  • title – Assigns a title to the flipbook
  • singlepage – Controls the single page view of the flipbook
  • cover – Sets the cover of the flipbook
  • id – Unique identifier for each flipbook
  • same_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 . ' &#8599;</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.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *