Developer Resources 6 min read

How to Add iFrames to WordPress

Written on 06 Jan 2021
Overview

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!

Share this article

874 reads
Contents

Similar Reads