4 Simple Steps to Embed External Pages in Your WordPress Site
-
by
Jay Herrera
- Updated On September 26, 2021
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!
The above article may contain affiliate links, which help support Clever Sequence
Previous Next I know what happened. You tried indenting your sentences, paragraphs, bullet points in WordPress, but couldn’t find a
So, What Does “NoIndex” Mean? Some people call it “crawling” or “spidering”, but the official term for when a search
When you make a website for your business or organization, you need to make a domain name. You have to
Is It Time to Optimize? With page speed being one of the biggest factors in upticks in bounce rates, any
Previous Next From our series: Massive SEO Mistakes – Part 1 This is how you fix broken links in WordPress
Gmail is a free email service that can be used for personal messages or for business purposes. It’s trusted by
If you’ve ever used any kind of spreadsheet program before, you know how easy it is to accidentally throw off
A margin is the space that exists between the content and edge of a page. They are blank and do
Google Docs is popular among individuals from every walk of life, including business representatives and personal users. It allows for
Yahoo is one of the best email platforms that users around the world enjoy. It has several features that help
Instagram is one of the most popular social media platforms that let you connect with other users around the world.
Instagram is the best social media platform for sharing visual content. As a business owner, you have to stay abreast
Every social media user has to deal with a fake account from time to time. Most of the time, the
Being part of a Facebook Group allows you to stay connected to others, no matter where you are located in
It could be some of your friends’ birthdays today, but without the power of social media, you may never know
After you buy a Mac, you are probably eager to open it and get it set up. When the computer turns on, it is time
Spotify is one of the most popular music streaming services available. You can listen to your favorite tunes on the browser, mobile app, or desktop
Venmo is one of the best payment platforms that are available for free. You can use this “digital wallet” as a social platform as you
The internet is constantly changing and evolving; what’s popular one day may fall out of favor the next, and trying to stay up-to-date on the
Anyone who knows about the internet recognizes the name Google. This digital tech giant has a mass array of software available to the public for