Select Page

How To Create An Embed Code For Your Infographic

by | Jan 14, 2012 | SEO | 2 comments

Here I am going to show you how easy it is to create your own embed code for either your widgets or infographics you have created. They are an essential tool if you want to help build natural links.

This is what the final piece of code looks like to a user, with the images / info graphic / widget above and the text to embed this below.

 

Click below to embed the above image into your website

 

So how do you do that? Well it is quite simple really, just a few bits of HTML and JavaScript will enable you to create a box with your embed code in so people can place your images / infographics / widgets on their site with that all important link back to your website as the original source.

The first step is to include the image on the page you are wanting the embed code to be one. Once you have done that you simply add the code below to your HTML and tweak the relevant bits which will be explained in a moment.

 

Complete Embed code:

 <textarea style=”height: 44px; width: 300px; margin: 2px;” onclick=”this.focus(); this.select(); _gaq.push([‘_trackEvent’, ‘Infographic’, ‘Click’, ‘guerilla-marketing-infographic’]);” rows=”2″>

&lt;img src=http://www.michaelcropper.co.uk/wp-content/uploads/2011/09/guerilla-marketing-at-its-best-in-manchester.jpg width=300 height=300 /&gt;

&lt;br&gt;

View full image

&lt;a href=http://www.michaelcropper.co.uk/wp-content/uploads/2011/09/guerilla-marketing-at-its-best-in-manchester.jpg title=”Guerilla Marketing Manchester” style=”color:#0000FF;text-align:left”&gt; Guerilla Marketing Manchester&lt;/a&gt;

</textarea>

 

So if we take a look through each of the different sections to explain what each part does.

 

Step 1 – Create a text box

Create a text box on the screen which is 44 pixels high, 300 pixels wide and has a bit of a margin. This section also has some JavaScript so when a user clicks (onclick section) the text box then the text is highlighted (this.focus(); this.select() section) which makes it easier for the user to then right click and copy the text. In addition, the code below also has an event tracking Google Analytics tag which means that when someone clicks the text box an event is fired off to the Google Analytics account you have installed on the page which says “someone has clicked an ‘infographic’ which is called ‘guerilla-marketing-infographic’ “

Below the code is what the code actually creates, the text box (although yours will be empty to begin with until the next step.

 

<textarea style=”height: 44px; width: 300px; margin: 2px;” onclick=”this.focus(); this.select(); _gaq.push([‘_trackEvent’, ‘Infographic’, ‘Click’, ‘guerilla-marketing-infographic’]);” rows=”2″>

 

If interested, read full details about Google Analytics event tracking, but in summary is _gaq.push([‘_trackEvent’, ‘category‘, ‘action‘, ‘label‘]);where you can choose the category, action and label you want to use.

 

Step 2 – Add the Image

You’ve got something to embed right? Well this is the next step, place the HTML code of your original image / infographic / widget in between the <textarea> and </textarea> tags. One key thing to note though is that you need to replace HTML characters such as < and > with their HTML code equivalent. Take a look through a full list of HTML codes for reference. It can be a bit of a pain to do this, but hopefully you don’t have much to include here!

 

&lt;img src=http://www.michaelcropper.co.uk/wp-content/uploads/2011/09/guerilla-marketing-at-its-best-in-manchester.jpg width=300 height=300 /&gt;

 

Step 3 – Add the Link Back to You

Here is the most important part, adding a link back to your website as the original source of the content. Same rules apply as in step 2 where by you need to replace the HTML characters with their HTML codes. The great thing here is that you can choose the anchor text which is used when people are linking back to you.

 

View full image

&lt;a href=http://www.michaelcropper.co.uk/wp-content/uploads/2011/09/guerilla-marketing-at-its-best-in-manchester.jpg title=”Guerilla Marketing Manchester” style=”color:#0000FF;text-align:left”&gt; Guerilla Marketing Manchester&lt;/a&gt;

 

I have seen some people include cheeky links within this section previously which link back to one of their key pages they want to rank with the best anchor text. Whilst this isn’t a bad idea, personally I would only add it where relevant. A lot of people will likely remove the link anyways, but it is certainly worth a try :-)

 

Step 4 – Drive Traffic to Share Your Content

Now comes the easy bit! Go out there and tell people about the great content you have just created. If the content truly is great then it is going to make people want to embed this item in their own websites and tell their friends about it naturally.

Here is what the final piece will look like when a user embeds the code in their own website:

 

So there we go, simple as that! Now time to go and create some great content and promote it well. For anyone who is interested in what the massive gorilla is, then have a read of my guerilla marketing Manchesterpost.

Here is one we use in our info graphic series for A day out on the District line in London. Great option for promoting some great content.

Note: You may also need to wrap ” ” quotes around some of the HTML tags within the embed code itself. Strangely when I was creating this post additional quotation marks were being added around the IMG SRC and A HREF attributes causing invalid URLs, so if you come across this then just tweak accordingly.

 

10 thoughts on “How To Create An Embed Code For Your Infographic”

  3. Great code, thanks.

    The speech marks are formatted so it didn’t work for me until I changed them:

    ” – didn’t work (ASCII)

    ” – did work (type into notepad)

    Hope that helps someone. :)

    REPLY

  4. I have been trying to edit the code so it displays properly but I am having issues. I don’t know what I am not replacing correctly

    this code doesnt work but i gave it a valiant effort. if you can provide any help i would appreciated it! thanks for the great code anyways

    REPLY

    1. Hi Joffrey,

      Your code didn’t come through properly, likely because WordPress filters certain things out in comments by default. If you want to explain your issue in the comments or email me with more details then I will see if I can point you in the right direction.

      Thanks
      Michael

      REPLY

  5. Hi I am trying to help my friend do this on her friends website here.
    I have tried following the instructions, tried changing the ” and at this point in time, I can’t figure it out.

    It’s a wordpress site and I owe her a favour so it would be really good, if I could get this working for her.

    Thanks in advance

    Peter

    REPLY
The following two tabs change content below.
My Twitter profileMy Google+ profileMy LinkedIn profile

Michael Cropper

Founder & Managing Director at Contrado Digital Ltd
Michael has been running Contrado Digital for over 10 years and has over 15 years experience working across the full range of disciplines including IT, Tech, Software Development, Digital Marketing, Analytics, SaaS, Startups, Organisational and Systems Thinking, DevOps, Project Management, Multi-Cloud, Digital and Technology Innovation and always with a business and commercial focus. He has a wealth of experience working with national and multi-national brands in a wide range of industries, across a wide range of specialisms, helping them achieve awesome results. Digital transformation, performance and collaboration are at the heart of everything Michael does.

2 Comments

  1. Andrew
    Andrew on January 24, 2017 at 9:06 am

    When people copy this embed code with infographics, will this automatically insert link on their site?

    Reply
    • Michael Cropper
      Michael Cropper on January 24, 2017 at 10:26 am

      Hi Andrew, if you include a link within the Embed code, then yes. You can customise it however you like 🙂

      Reply

Submit a Comment

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