CodeClouds Color Logo CodeClouds White Logo

WORDPRESS DEVELOPMENT | 06 January 2021

How to Add iFrames to WordPress

Inserting iFrames into WordPress posts gives you amazing flexibility, and doesn’t even require a plugin. Today we’re going over the basics on how to create your own.

 

What is an iFrame

What is an iFrame?

HTML iFrames are a powerful tool you can use to embed other websites inside your WordPress posts. Say you run a Youtube channel for your company, and you want to put a video in the middle of a blog post. An iFrame is a simple way to embed that video, rather than having to host it on your WordPress. This has the advantage of faster load times and a more familiar interface for users, and also helps you build up views on your YouTube channel. 

It’s not just YouTube: other common choices are Facebook, Spotify, and Google Maps, but you can embed almost anything into your WordPress posts using an iFrame. You can even embed another WordPress into your WordPress and embed a WordPress into that WordPress and—

You get the point.

What is an iFrame
It’s iFrames all the way down

Creating a Manual iFrame

Even if you have a very basic HTML background, this is fairly simple. Take the following code:

<iframe src=”iFrameContentsGoHere.com”></iframe>

and put the target link in there. You can also specify the size of the iFrame using width=”x” and height=”x”. So for example, I put this iFrame linking to our Unify CMS page into my personal blog: 

<iframe src=”https://www.codeclouds.com/unify-cms/” width=”700″ height=”700″></iframe>

And this happens: 

Creating a Manual iFrame
Easy. 

Putting iFrames Into WordPress

You may have noticed a missing step: how did I get Unify CMS into WordPress. Don’t worry, that’s also very easy. Create or edit a post, then select the dropdown menu on the top-right. By default you’re using the Visual Editor. You want to switch to the Code Editor, then write/copy the iFrame HTML into there. 

Putting iFrames Into WordPress

Getting an Embed Link 

Many websites don’t allow you to create your own iFrames, and require you to get a link from their site. If an iFrame you’ve created manually is refusing to display, that’s probably the issue. Sites that appear frequently in iFrames will often do this so they have more control over how their content displays.  Let’s look at how to get the code from some of the more common sites.

Youtube

1) navigate to Share on the toolbar below the video. 

navigate to Share on the toolbar below the video
2) click Embed

click Embed
3) this will display the iFrame code. Ctrl+C/Command+C or simply click Copy and you’ve got it.

this will display the iFrame code
Facebook
  1. Find the post you want to embed and click the … menu.
  2. Click Embed
this will display the iFrame code
  1. Copy the code that appears. 
this will display the iFrame code
Spotify
  1. Find the song you want and click the … menu
  2. Click Copy Song Link
this will display the iFrame code
  1. Go to the official Spotify Play Button generator and paste the link into the second field
  2. Copy the iFrame code from the third field 

this will display the iFrame code
You can also do this with playlists in the same way:

this will display the iFrame code
Google Maps
  1. Find your map then click the Share button 
Find your map then click the <b>Share</b> button
  1. In the box that appears, click the Embed a Map button
In the box that appears
  1. Copy down the link from the field that appears. 
Copy down the link from the field that appears
Putting It Together

Here’s a quick example I put together.

  1. I created a specific Google Map
  2. I went share → embed and copied the link
  3. In WordPress, I went More Options → Code Editor
  4. I copied the embed code into WordPress

And voila: 

Copy down the link from the field that appears
A blog post with an embedded Google Map. It took me 30 seconds. It’s a pretty simple example, but hopefully you can see how powerful and versatile iFrames can be for your business. 

A Note on Plugins

Unless you’re really struggling with the above, I do not recommend installing a plugin. Most of them rely on shortcodes (which require a very similar level of technical know-how to doing it manually) and it’s important to remember you should try to keep the number of third-party plugins on your site as low as possible. Plugins offer a lot of flexibility and power, but they can also be a huge drain on performance and they can create serious security issues; untrustworthy plugins are one of the main ways that attackers compromise WordPress sites.  

That’s not to say never use plugins, but it’s important to weigh up the quality of life improvements they’re getting you versus the potential risks. WordPress Core can handle iFrames well enough that it doesn’t need any extra help. Unless there’s some very specific functionality to a particular plugin that is crucial to your site’s UX, it’s probably best to just do it yourself. 

professional WordPress experts you can hire
Maybe you’re looking to do something a little more involved than a simple iFrame. If you want a professional team to take your WordPress or WooCommerce page to the next level, CodeClouds have a team of over 200 professional WordPress experts you can hire. Drop us a line today!

Originally written January 06, 2021. Last updated

 Views

Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup
Related Articles
The Top 5 WordPress Contact Form Plugins (2021)

WORDPRESS DEVELOPMENT | 14 April 2021

The Top 5 WordPress Contact Form Plugins (2021)

Learn about the top 5 WordPress contact form plugins in 2021, the features that make them valuable and the problems they solve.

Coming Back from a Hack: A Guide to WordPress Security

WORDPRESS DEVELOPMENT | 23 December 2020

Coming Back from a Hack: A Guide to WordPress Security

Hackers and other malicious parties love to attack poorly-secured WordPress sites. If you don’t want to be one of their targets, read on.