Infogram – Add charts, maps and infographics Shortcode

Below, you’ll find a detailed guide on how to add the Infogram – Add charts, maps and infographics 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 Infogram – Add charts, maps and infographics Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Infogram – Add charts, maps and infographics Plugin and the shortcodes it provides:

Infogram – Add charts, maps and infographics

"Infogram is a dynamic WordPress plugin that enables users to enrich their content with visually appealing charts, maps, and infographics. Perfect for presenting complex data in an easy-to-understand format."

★★✩✩✩ (3) Active Installs: 2000+ Tested with: 5.2.19 PHP Version: false

Included Shortcodes:

• [infogram]

Infogram – Add charts, maps and infographics [infogram] Shortcode

The Infogram shortcode is a tool for embedding interactive infographics into your WordPress site. It uses the ‘infogram’ shortcode to add infographics based on the specified ‘id’ attribute. If the ‘format’ attribute is set to ‘image’, it displays the infographic as an image. If the ‘id’ is not provided or incorrect, it returns an error message.

Shortcode: [infogram]

Parameters

Here is a list of all possible infogram shortcode parameters and attributes:

• id – Unique identifier of the infographic to be displayed
• prefix – Not used in the current function scope
• format – Determines the format of infographic, either ‘image’ or ‘interactive’

Examples and Usage

Basic Example – The following shortcode is a simple example that uses the ‘infogram’ shortcode to display an infographic. The ‘id’ attribute is used to specify the unique identifier of the infographic that you want to display.

[infogram id='infogram_1' /]

Advanced Examples

1. In this advanced example, we’re using the ‘infogram’ shortcode to display an infographic. The ‘id’ attribute is used to specify the infographic, and the ‘format’ attribute is used to specify the format of the infographic. The ‘format’ attribute can either be ‘interactive’ or ‘image’. If ‘format’ is not specified, the default value is ‘interactive’.

[infogram id='infogram_1' format='image' /]

2. In this second advanced example, we’re using the ‘infogram’ shortcode to display an infographic with a prefix. The ‘id’ attribute specifies the infographic, the ‘format’ attribute specifies the format of the infographic, and the ‘prefix’ attribute adds a prefix to the infographic id.

[infogram id='infogram_1' prefix='prefix_' format='interactive' /]

These examples illustrate the versatility of the ‘infogram’ shortcode. By using different attributes, you can customize the display of your infographics to suit your specific needs.

PHP Function Code

In case you have difficulties debugging what causing issues with [infogram] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('infogram', 'infogr_add_infographics');

Shortcode PHP function:

function infogr_add_infographics($atts) {
  $atts = shortcode_atts(array(
    'id' => '',
    'prefix' => '',
    'format' => ''
  ), $atts, 'id');

  $format = 'interactive';

  if($atts['id']) {
    if($atts['format'] && $atts['format'] == 'image') {
      $format = 'image';
    }

    return '<div class="infogram-embed" data-id="'.$atts['id'].'" data-type="'.$format.'"></div><script>!function(e,t,s,i){var n="InfogramEmbeds",o=e.getElementsByTagName("script"),d=o[0],r=/^http:/.test(e.location)?"http:":"https:";if(/^\/{2}/.test(i)&&(i=r+i),window[n]&&window[n].initialized)window[n].process&&window[n].process();else if(!e.getElementById(s)){var a=e.createElement("script");a.async=1,a.id=s,a.src=i,d.parentNode.insertBefore(a,d)}}(document,0,"infogram-async","//e.infogram.com/js/dist/embed-loader-min.js");</script>';
  } else {
    return 'This code is broken or not exists!';
  }
}

Code file location:

infogram/infogram/infogram.php

Conclusion

Now that you’ve learned how to embed the Infogram – Add charts, maps and infographics 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.