If you have tried to create embed codes for a WP blog, you might have experienced the pain of WordPress’ on the fly encoding which messes with the html code in the embed code, preventing the embed code from working properly. The code below uses HTML entities and won’t have problems with WordPress’ on the fly encoding.
<h2 style=”text-align: center;”>Embed this Infographic on Your Site:</h2>
<p style=”text-align:center;”><textarea rows=”3″ cols=”51″ onclick=”this.focus(); this.select();”><p style="text-align:center;"><a href="http://domain.com/your-infographic-url-here"><img src="http://domain.com/infographic-image-url-here" alt="alt text goes here" title="Click to enlarge" /></a><br />Source: <a href="http://domain.com/">Brand Name</a></p></textarea></p>
If I wanted to use the embed code for this infographic, I would input the following URLs into the embed code:
Infographic URL: http://vizualarchive.com/2012/how-to-properly-use-sunscreen/ Infographic Image URL: http://vizualarchive.com/2012/how-to-properly-use-sunscreen/ Alt Text: How To Apply Sunscreen Home Page: http://vizualarchive.com/ Domain Name: Vizual Archive
When this updated code is copied into a blog post, it will look like:
When you go to copy/paste the code into your post, you must be in HTML mode. Once you paste in your code and put the proper URLs and alt/anchor text in, you cannot switch back to vizual mode, otherwise WordPress’ encoding will change all of your " to trailing “s, which will break the code and prevent it from working when people embed it.
Pro Tip: I save the embed code in a .txt file after I have it as I want it incase the code gets broken by reverting back to visual mode, either by yourself or someone else).
When embeded, the above code would look like this:
Source: Vizual Archive