4 Simple Steps to Embed External Pages in Your WordPress Site
-
by
Jay Herrera
- Updated On November 14, 2020
As a WordPress administrator, one of your main goals is likely to drive as much traffic as possible to your own website. One way to both enrich your content and drive traffic to other sites without making your “bounce rate” (percentage of visitors who click off of your site after a single page) skyrocket is to embed an external page in WordPress. We recommend getting permission of the website owner, first.
Historically, the <iframe> tag has been used for this purpose. However, since iFrames often contained malicious content, WordPress automatically removes them! We’ll go over (in detail) how to display content from another website in WordPress without the need for those pesky <iframe> tags.
Note that many other articles will instruct you to use iframes, but almost every major browser and ad blocker will remove a standard iframe for security reasons! By the end of this article, you’ll be able to use WordPress embed shortcode to accomplish the same end goal.
In this example, we’ll embed a link in WordPress so that CleverSequence’s homepage appears within our post!
Getting Started: How to Embed External Web Pages in WordPress
Step 1: Ensure You Understand the Basics
“Knowing is half the battle” according to G.I. Joe, but it’s more like 90% of the battle for WordPress admins! Here are a couple of points to keep in mind that will help you embed external web pages in WordPress without issue, regardless of your experience level!
- The page security levels must be identical. WordPress blogs are either in regular HTTP or HTTPS. If your blog is in HTTP, you CANNOT embed HTTPS pages! Likewise, if your blog is in HTTPS, you can’t embed standard HTTP pages!
- You can verify your blog’s security level by visiting any page on it and looking for a “lock” icon in your browser, similar to this:
- Protip: If your blog is not HTTPS, check with your host on how to make it secure! Almost every major website uses it at this point. Here’s why.
Or just check out one of our posts on how to make my WordPress site secure.
Step 2: Install the Advanced iFrame Plugin
Note: This plug-in is free. The only limitation is that, after 10,000 page-views, a little link appears at the bottom of the author’s plug-in page.
Other Note: You may have heard of the Elementor embed page shortcode option if you’ve been researching. Elementor has lots of great features, but there is not a permanently free version, which is why we’re saving you the juice by sticking with “Advanced iFrame” for this tutorial!
First, look at the left-hand scroll menu on your WordPress portal. In the “Tools” sub-section, click on the first menu item called “Plugins” as shown below. Then, click on “Add New.”
You’ll then be taken to another page, and you’ll need to search for “Advanced iFrame” as shown:
Second, you’ll need to hit the “Install Now”. In a few seconds, you should get a notification that the plug-in has been installed. That button that said “Install Now” will now say “Activate”. Click on that!
Now that you’ve installed this WordPress plugin, embedding web pages will be a breeze!
You might also like: How to Embed a PDF in WordPress.
Step 3: Make that Page!
You’re well on the path to embed an external page in WordPress at this point!
We’re going to make a New Page for this example, so go ahead and hit the top-left box in the center column (your Portal may be customized, so the theme may vary):
Just add some “dummy text” so you have, at the very minimum, a title and a bit of text. You’ll see why in later steps, I promise!
Next, get the URL of the content you want to embed ready. Make sure it includes either HTTP or HTTPS and that the security levels matched, as we discussed!
In this case we’ll copy the Clever Sequence URL.
Step 4: Embed the External Web Page in WordPress!
By now, you should have the following:
- Underlying Knowledge Required.
- The Advanced iFrame Plugin installed on your WordPress site.
- The full URL you wish to embed (including the “http” or “https”).
- A sample page where you want to embed the link in WordPress.
- A new, favorite blog called CleverSequence (obviously!).
Note: While it isn’t required, you may benefit from learning the basics of the new plug-in! Once you’ve installed it, feel free to click on the link on your iFrame plugin Portal.
The easiest way to learn about the new plug-in is to watch the Quick Start video that comes with it. After clicking “Advanced iFrame”, there should be a link to the video at the bottom of your Portal!
Moving on, there are two ways to accomplish our mission: use WordPress shortcode, or use the graphical editor provided by the plug-in. Think of shortcode as “WordPress’s version of HTML”. The only real distinction is that elements do not use the tag notation (“<” and “/>”), but rather bracket notation (“[“ and “]”).
To begin the embedding process, return to the sample post we drafted. You’ll need to make a new Content Block (also known as a “Gutenberg Block”, included with WordPress versions 5.0 and later). Depending on the WordPress Portal theme you use, the button may appear differently or be in another location.
Click that “+” button, and you’ll see a (probably overwhelmingly) large array of options, like so:
In that search box, type in “iframe”. You should then see the “Advanced iFrame” pop up in the results below. It’ll look like this:
Click on that Widget, and then you should see the “default” (that is set automatically during installation) URL’s contents displayed on your blog. It’s pretty much an advertisement page that the plug-in developer owns, but it’s safe.
More importantly, you should see this pop up in the right column of the editor:
I know, the terminology is a bit confusing. The placeholder for URL says “Url of the iframe”, but it does not use the standard (and now mostly blocked) HTML <iframe> tag. It’s referring to the “[advanced_iframe]” shortcode.
Next, copy and paste the URL you want to embed into that box. Want to edit other properties, like the width, height, and advanced stuff? You’ll need to refer back to the Advanced iFrame documentation. There are tons of options to choose from, especially under the “Additional Parameters” section in the image above!
The end result should show up as something like this:
Next, “Publish” the blog page, and then view it outside of the WordPress Portal to ensure that the process to embed an external page in WordPress was successful. Due to size compression and detection, you’ll likely see the mobile version of CleverSequence (and any other site that supports mobile versions).
Troubleshooting Problems
Is the page not showing up? There are two common reasons. First, the site may be blocking itself from being embedded. In this case, your best chance is to contact the site administrator and get permission to embed the page.
The second common reason is local security settings. Although most browsers don’t block this by default, some people with “high” or “very high” security settings may block all embedded content. This is an attempt to prevent Cross-Site Request Forgery (CSRF), although blanket blocks are much less common than they were a decade ago.
And Finally…
We hope this article was useful to you! There are several options out there, but remember to never use HTML <iframe> tags in your WordPress pages and posts! There is a small chance WordPress won’t block it by default, but even if you can see it, most of your visitors will not be able to!
A condensed version of our steps to embed an external page in WordPress would be:
Log into your WordPress Portal.
- Install and activate the Advanced iFrame plugin from the Portal.
- On a new Blog Post, insert a new “Content Block” of type “Advanced iFrame”.
- Set parameters on the Widget inserted.
- Publish your page, and verify that the site appears!
People love Instagram. That’s because it allows you to share stories and information with others in a fun fashion. You have probably heard that images
While WordPress can work wonders, it can be equally painful to manage. Chances are, if you’re looking at this page, you’re wondering how to change
If you run a WordPress site, chances are that you’ll benefit from knowing how to change the background color of a single page in WordPress.
As a WordPress administrator, one of your main goals is likely to drive as much traffic as possible to your own website. One way to
Every business, large or small, typically has a central phone number customers can call with questions and orders. If you’ve been on a business’s website
Getting Logged In So, you’ve installed WordPress, your server is up and running, and now you’re ready to jump into making the world’s best blog