Whether you’re hiring someone to create an infographic for you or you are creating it on your own, it’s an exciting new content-type to start working with.
Infographic marketing is a great way to keep a readers interest and help explain complicated or boring subjects, so once you finally have your infographic ready to go it makes sense to get ready for that increase in clicks and engagement.
Unfortunately, your amazing infographic isn’t going to do any good if you don’t know how to display it. There are different options you have for embedding your graphic onto your website, so it’s important to take the time to really understand how to display your graphic correctly. Lucky for you, it’s pretty easy.
Getting Technical: How to Display an Infographic on Your Site
Whether it be that you can’t fit the entire infographic on your site or something is going on with the images, there always seem to be challenges that people have to face when trying to use infographics on their websites. Fortunately, there are tools and techniques out there to help.
Below are a few different ways to help you successfully display an infographic on your website:
Embedding. This is probably the most popular option that you’ve seen in the past.
Embedding a video on your site means you use an embed code, which is provided by the company or person who has made the infographic. You copy and paste this embed code to put it on your website and you’re set to go.
Unfortunately, many companies are not offering correct embed codes because it is so easy to make an error, which can lead to a problem when others try to copy and paste these codes to use the infographics on their site.
This is where the Embed Code Generator plugin comes into play. It helps you generate an embed code right within the Add Post section of your WordPress. All you need to do is install the plugin and fill in the information—URL to the image, where the image should link, title, alt attribute, etc. It will generate the code for you so that others can then take this code and re-post it on their own site.
Lightbox. This plugin will help make sure the infographic is sized correctly.
Most blogs have a width of around 600 pixels for posts, but infographics typically range from 800-1000 pixels, causing problems for those trying to display the graphic. What many companies do to compensate is simply shrink down the infographic so that it fits, but as you might imagine, these infographics are never very successful because the print is too small to read and the images are too small to really see. You have two options to solve this problem:
First, you can make it so that people can click on the image and then have the image open to its normal size in a different tab.
Second and probably the best option to solve this problem is to use a plugin called Lightbox. All you need to do is install the plugin, link to the image itself, and then readers can see the infographic as an overlay over the content. There is a dark or light background that will make sure the background page is dimmed so you can easily see the infographic. In other words, they will be able to see the full-size image without having to leave the page.
The Takeaway
Getting infographics on your site correctly means more than just generating the right codes. Keep in mind that embedding an infographic incorrectly can be very obvious on some websites and look unprofessional, so not only will some of these tools help you simply get the infographic on your site and help people share, but they’ll also help ensure that people aren’t clicking away.
Extra Tip: Remember to really do your research before deciding if an infographic is right for you. Infographics work best if they are focusing on something specific and they aren’t too cluttered with numbers and images. For social media, you can use tools like Milkshake to embed your infographic.
Do you have any ideas about how to effectively display infographics on a website? Has anything worked for you or not worked for you in the past? Let us know your story and your thoughts in the comment section below.
