Automatic Infographic Embed Code Generator (jQuery code)

If you’re looking for a super fast and easy way to increase the chances people will share your Infographics (and gain you those all important backlinks to help your SEO!) – you are going to absolutely love this tutorial!

What I have for you today is some super clean code, that I have personally used on multiple clients websites, that allows you to create embed codes for your infographics in just seconds.

In fact, this code is the single fastest way possible that you can create embed codes for your Infographics!

And here’s how you use it…

All you need to do is paste the following code somewhere on your website, into a jQuery(document).ready(function(){

jQuery('.share-image').each(function(){
	jQuery(this).after('<h3 class="share-image-title">Share this image on your website</h3><textarea class="share-image-textarea" onclick="this.focus();this.select()" style="width:100%;height:100px;border: 1px solid #ced4da;border-radius: 4px;padding: 10px;"><p><a href="'+location.href+'"><img src="'+jQuery(this).attr('src')+'" alt="'+jQuery(this).attr('alt')+'" /></a></p></textarea>');
});	

Then give your infographic (or any other image for that matter!) a class of “share-image“.

It will then automatically append the embed code beneath your image.

And that’s it! It’s as simple as that.

From here on out, every time you want to include an embed code for your Infographics – all you have to do is give it a class of “share-image“.

This code will automatically populate the embed code with:

1. The anchor tag’s href (from the page it’s on)
2. The image URL (from the image itself)
3. The alt text (from the image itself)

About this Automatic Infographic Embed Code

This code was massively inspired from the Siege Media Embed Code Generator (which is great by the way!), my only issue with this method is that it is a little bit time consuming.

Because if (like me) you only have a very limited amount of time in your working day, you’ll appreciate the power of automating repetitive tasks.

Plus, I had a bit of an issue getting the Siege Media Embed Code Generator to work on one of my clients websites, because WordPress kept stripping it out.

Now, that tiny bit of jQuery code above completely cuts out the need for an Infographic Embed Code Generator, as it does it all for you – automatically!

All you need to do is add that HTML class to the image.

And what’s great about this Automatic Embed Code Generator code is that it should:

• Work on any website
• Work on any CMS (including WordPress, Joomla, Magento, Drupal etc.)
• Save you lots of precious time
• And remove the possibility of you making a mistake (when generating and pasting in your Infographic embed code).

This can really help you get more exposure to your Infographics you worked so hard on.

What’s worse than spending hours creating an amazing Infographic and it missing out on all the potential benefits it could be bringing you?

Because when you make it easy for people to do the thing you want them to do (embed your Infographic on their website with a link back to your website) – they are much more likely to do it.

This is known as availability bias.

And the fact that this code is so super-easy to implement and use going forward,  means you will be much more likely to add the embed code to all of your Infographics from here on out.

Let me know how you get on in the comments below!