How To Embed External Web Page In WordPress
Do you want to know how to embed external web page in WordPress? In this tutorial, you will learn how to embed a website in WordPress using external pages.
Embedding an external page in WordPress is a great way to enrich your content and drive traffic to other sites without dramatically increasing your “bounce rate” (the percentage of visitors who leave your site after only viewing a single page).
We advise you to first seek the approval of the site’s owner. Traditionally, this function has been served by the iframe> tag. However, WordPress eliminates iFrames mechanically due to their propensity for presenting malicious content.
We will discuss (in depth) how to embed content from another website into your WordPress site without using the annoying iframe tags.
Keep in mind that despite the fact that many other pieces of writing will tell you to use iframes, nearly every popular browser and ad blocker will eliminate a standard iframe for security reasons.
This article will teach you how to use the WordPress embed shortcode to achieve the same result. Here we’ll demonstrate how to insert a link in WordPress so that the GuidEearn homepage appears in our post.
How To Embed External Web Page In WordPress Complete Guide
If you want to embed an external web page in WordPress, follow the steps outlined below.
Step 1: Install Advanced IFrame Plugin
This add-on doesn’t cost anything. The only catch is that once the author’s plugin page has been viewed 10,000 times, a tiny link will appear at the very bottom of the page.
Check out the WordPress dashboard’s left-hand navigation menu first. Follow the steps below and select “Plugins” from the “Tools” submenu. Just hit the “Add New” button afterward.
You’ll be redirected to a new page where you can look for “Advanced iFrame” in the manner depicted.
The second step is to select “Install Now.” After a short while, the plugin will be installed and a message will appear. The “Install Now” button has been renamed “Activate.” Go ahead and tap that link.
The process of embedding web pages will be much simpler now that you have this WordPress plugin installed.
Step 2: Create The External Page
You’ve taken the first steps toward embedding an external page in WordPress. We’ll create a new page for this example; to do so, click the top-left box in the portal’s central column.
Just throw in some “dummy text” to make it look like there’s text there so that people will assume there is. In the next few steps, you’ll see why.
The next step is to have the address (URL) of the material ready for embedding. Make sure it uses one of the two protocols we discussed, and that the security measures are commensurate.
Step 3: Embed The External Web Page In WordPress
This is what you should have by now:
- Installing the Advanced iFrame Plugin on your WordPress website.
- The complete URL of the content that you would like to embed (including the “HTTP” or “HTTPS”).
- A sample page in WordPress where you want the link to be embedded.
- A fresh external page that you want to attach.
Even though it’s not required, you might benefit from familiarizing yourself with the fundamentals of the new plug-in! After you’ve finished installing it, you can access the link through the iFrame plugin Portal at any time by clicking on it.
Watching the Quick Start video that is included with the new plug-in is the quickest and most convenient way to become familiar with its features. When you select “Advanced iFrame” from the drop-down menu, a link to the video you want to embed should appear at the very bottom of your Portal.
Moving on, there are two ways to achieve our goal: the first is to use WordPress shortcode, and the second is to use the graphical editor that is provided by the plug-in. Consider shortcode to be “the HTML equivalent of WordPress.” The only significant difference is that bracket notation, as opposed to tag notation (which consists of “” and “>”), is used for elements (“[” and “]”).
To get started with the embedding process, navigate back to the example post that we drafted earlier. You’ll need to generate a brand-new Content Block for this. It’s possible that the button will look different or be in a different location depending on the theme that you use for your WordPress Portal.
When you click that “+” button, you’ll see a wide variety of options, such as the following:
Enter “iframe” into the search box located there. After that, the “Advanced iFrame” should appear in the results that are displayed below. This is how it will appear:
If you click on that widget, you should then see the “default” URL’s contents, which are those that are set automatically during the installation process, displayed on your blog. The plug-in developer owns the page, and although it contains advertisements, using it is perfectly safe.
In addition to that, you should see the following message appear in the right column of the editor:
I am aware that the terminology can be a little bit confusing. The text that appears in the URL placeholder says “URL of the iframe,” but the tag that should be used instead is the standard (and now almost universally blocked) HTML iframe> tag. This is a reference to the “[advanced iframe]” shortcode that you have in your code.
Then, in that space, paste the URL you want to embed. Want to make changes to things like width, height, and the finer details? It’s recommended that you review the Advanced iFrame docs again. The “Additional Parameters” section in the aforementioned image contains a plethora of options.
Select the Publish button, then go to your browser’s incognito mode and paste the URL of the published website to see if the embedded external page is properly displayed on your website.
Issues With Embedding External Pages
Does it appear that the page is missing? There are two different explanations for this phenomenon. To begin, the website might be preventing itself from being embedded in other websites.
In this scenario, your best chance of embedding the page is to get in touch with the administrator of the website and request permission to do so.
The second typical cause is the settings for the computer’s local security. Although this is not blocked by most browsers by default, some users whose security settings are set to “high” or “very high” may prevent all embedded content from loading in their browser.
This is an effort to prevent Cross-Site Request Forgery (CSRF), although blanket blocks are used significantly less frequently than they were a decade ago.
Wrap For Embedding External Web Pages In WordPress
We sincerely hope that you find this article to be informative and helpful! There are a number of choices available. However, it is essential to keep in mind that you should never use HTML iframe tags in your WordPress posts or pages.
There is a remote possibility that WordPress will not block it by default; however, even if you are successful in viewing it, the vast majority of your site’s visitors will not be able to do so.
Here is a shortened version of the instructions we used to embed a page from another site into WordPress: Proceed to log in to your WordPress dashboard.
- Simply download the Advanced iFrame plugin from the Portal, install it, and activate it.
- Put an “Advanced iFrame” “Content Block” on a new blog post.
- Tweak the inserted widget’s settings.
- After you’ve published your site, make sure it’s visible.
Further Read:
