Infographics are a great tool. Not only are they a great way to quickly convey important information, they can generate high quality incoming links as they are passed around and shared throughout the internet. These incoming links play an important role in the search engine rankings and a good infographic can help move you up the search engine results.
Businesses new to the world of infographics are often reluctant to allow others to publish and share their beautiful creation on other websites. Why let someone else take all your hard work and use it for their own marketing purposes? However, by giving others the tools to easily publish your info graphic you are encouraging not only the viral spread of your infographic but the powerful backlinks that come with it.
For example, I disocvered the infographic below on Google+. I followed the link to JeffBullas.com, a PR5 website. After reading the helpful information Jeff Bullas provided on creating info graphics I noticed the that graphic itself was created by Graphs.net. I clicked through and sure enough, there was the embed code waiting patiently for me to copy and publish on my website.
Between this post and Jeff Bullas’ article, Graphs.net generated a key word wrapped backlink from a PR 5 site and a PR 4 website. Not too bad. Add in all the other websites who republish the infographic and you’ve got a very powerful tool.
How to Create and Infographic Embed Code the Easy Way
One of the great things about WordPress is that there are plugins for everything. Naturally after writing a fairly long explanation on how to manually write an infographic embed code I discovered a plugin that will do it for you. With the WordPress plugin Embed Code Generator you fill in a couple of fields providing the Source URL, a key word rich title and alt attribute, image height and width (optional) and key word rich sentence giving you credit and linking back to your site.
Once you’ve entered the information, the plugin generates the proper code and places it directly into your post.
If you scroll down under the infographic, I’ll show you how to manually add the code using WordPress.
How to Create an Awesome Infographic
How to Manually Create an Infographic Embed Code
If you’re using WordPress, start by creating a new post. You’re not going to publish this post, just use it to generate the code. Upload your infographic to the post just as you would any other graphic. Give it a keyword rich alt title and file name and insert it into your blank post. You could do this in the same post as the infographic but I like to do it in a separate draft post just to keep the original post organized.
The next step is to link the code to the blog post or web page where the infographic will be published. Switch to the “Text” tab in the WordPress editing screen and you will see the code for the image you just uploaded. Highlight the entire code and link it to the URL where the infographic will be published just as you would create any other link.
Under the infographic create a link giving you credit for your the infographic again linking back to the page where the infographic will be published. This might be a good place for a key word or two. For example, you could write “Key wordinfographic by Your Name Here” placing the link around your keywords.
Clean it up by removing any space between the image code and adding the code < br> (no space) between the link and the image code.
When you are done you should have a blog post that looks like this:
Now that you’ve got the code, again using the text tab copy and paste the code into the post/page with the infographic directly under your infographic. Add “< textarea>” to the front of the infographic code (no space) and “< /textarea>” (no space) at the end of the code. This tells web browsers not to act on this code but to instead display it as a box which can be copied.
Important: Do not switch back to the visual tab once you’ve added this code. Doing so can cause errors in the code you are trying to use.
Here’s what it should look like when published:
If you want to get fancy, you can add size dimensions to the text box (as I’ve done above) by adding the following commands to the “text area” commands: rows=”number of rows” and cols=”width”. The box above is set to rows-“4″ cols=”80”.
Final tip: If you are using WordPress, this all must be done under the “text” tab of the editing screen. If you switch to “visual” it will strip your code “text area” code and the text box won’t display properly.