The Embed Code Generator

Tim Hopma 1 year ago

If you haven’t heard of embed codes already then you may well be missing out on some great link building opportunities.

Here at Zazzle Media, we use embed codes for infographics and interactive content we’ve created enabling them to be easily placed on blogs. An embed code is a small piece of HTML code which allows content to be shared and published on other platforms across the web.

Why do we create embed codes?

Creating interesting and engaging content is one of our key principles and by embedding it on partner websites it can be seen and interacted with by a greater number of users than on your website alone.

So if you’re wondering, “Why bother with an embed code when I could just share the URL of the page?”, the benefits are clear. Through the use of embed codes, you can attract more potential visitors to your website, blog, video or infographic without people having to leave your site.

While creating an embed code manually might be straightforward for most web developers, sometimes it is necessary for someone without knowledge of HTML to provide an embed code to a blog publisher. Our generator tool takes away the guesswork and enables anyone to create the embed code, click below to download and see for yourself.

embed-tool-button

Your step-by-step guide

Source URL

This is the URL of the page where the embedded content is located. It is important that the source URL is correct as you don’t want people visiting the wrong URL or the iframe to display the wrong content.

Infographic

This would be the blog post URL where the infographic has been uploaded.

iframe

This would be the the actual page you want to display in the iframe.

Site name

This appears underneath the embed code as 'Brought to you by site name' and credits the embedded content back to the original source. For example, if you were to use some content posted by Zazzle Media you would link it back to the company name - 'Zazzle Media'.

Site URL

This is used for linking and crediting back to the original source. For example, if you were to use an embedded content posted by Zazzle Media you would link it back to the URL of the source - 'https://zazzlemedia.co.uk/'

Image URL (infographic only)

This is the URL of the image you want to display and is only used for generating Infographic embed codes. This has to be purely the link back to the image. So if the infographic is placed in a blog post, you would use the uploaded image URL. To get the URL of an image, you will have to right click the image, select Copy Image Address and then paste it into the Image URL field in the generator. This should then display a preview of the infographic in the Preview section.

Image ALT (infographic only)

This is the infographic name. The image ALT should be keyword optimised so it could be easily indexed by Google and clearly describe what the infographic is about.

Width

This is used for changing the width of the embedded content. The width has already been set to a 100% so it stretches to the content container where it’s embedded. It is best to keep it as 100% to make sure the embedded content fits all different screens.

Height (iframe only)

This is used for the height of the iframe. It is best to leave it empty to keep the embedded content proportional.

Max-width (infographic only)

This is used to set the maximum width of the infographic.

To create an Infographic embed code

Embed code Infographic
  1. Fill in the available fields (Source URL, Site Name, Site URL, Image URL and Image ALT).
  2. Optional, change the dimensions if needed. The dimensions have already been optimised to work responsively.
  3. If the preview of the infographic is available, success! The infographic embed code is ready for use.
  4. Share, share, share!

To create an iframe embed code

iFrame Embed Code

Note: For the iframe to work on secured (HTTPS) pages, the source URL for the iframe must also use HTTPS for the iframe content to display. You can secure a HTTP connection using an SSL certificate. As we use HTTPS at Zazzle Media, modern browsers will prevent unsecured content to be displayed in our preview. Find out more about Mixed Content.

Click on the button below to try our embed code generator tool.

embed-tool-button

Embed codes in the wild...

Infographic 

See the Pen Zazzle Media Infographic Example by Khadia Evans (@khadiaevans) on CodePen.

iframe

See the Pen Zazzle Media Iframe Example by Khadia Evans (@khadiaevans) on CodePen.

Common problems

"I can’t paste into my blog WYSIWYG editor"...

The most common problems we come across are when a blog content management system (e.g. WordPress or similar) doesn’t allow HTML to be inserted into the editor. The code should always be inserted via the Text Editor or source code option.

Embed Code in Editor

In WordPress switching between the Visual and Text editors may strip any HTML you’ve inserted so you will need to paste it back into the Text Editor field.

"My embed code works on some sites but not others"...

Check that both the content you are loading and the site that you’re adding the embed code to are on the same protocol, i.e. HTTP or HTTPS. If they are not using the same protocol, then this is known as Mixed Content. The reason you are not seeing content is due to the browser not displaying unsecured content. Find out more about Mixed Content.

If you are still having problems comment below or get in touch with us.

Click on the button below to use the embed code generator tool for free!

embed-tool-button
Stay in touch with the Zazzle Media family

Sign up for our monthly newsletter and follow us on social media for the latest news.