Linking to other sites is one of way to enhance the complexity and reliability of your content. The primary linking method you may already use is embedding links on a particular word or phrase.
Instead, you can display the whole page you’re referencing or parts of its content right on your post by using an iFrame on WordPress.
How to implement it? Stay with me. I will walk you through the benefits iFrames offer and how to use them.
What is an iFrame?
iFrame stands for Inline Frame – it is a way to embed an HTML document on another HTML document. This lets you add visual content like YouTube videos, Google Maps, and snippets from other web pages to your site.
The main reasons you should consider using iFrames are:
- They keep visitors on your site. When using basic anchor text, visitors will have to leave your page or tab to access the hyperlinked content. You can’t guarantee that they will come back to your site. With an iFrame, you can showcase relevant content on the very same page.
- By using an iFrame you’re keeping yourself safe from copyright infringement. The embedded page shows the content as it is on the original site, you don’t need to paraphrase and link via anchor text.
- It can be more visually appealing than anchor text embedding. Using an iFrame block will offer a convenient and attractive window to whatever you need to showcase off-page.
2 Ways to Embed IFrame in WordPress
There are two ways to implement an iFrame on your page or post:
1. Using HTML Code
This is considered the manual way to insert an iFrame. It will involve adding code snippets to your post.
Let’s break down the steps:
- On your WordPress Admin page, go to Posts and select Add New.
- If you’re using the WordPress Gutenberg editor, add a Classic block manually. If you have the Classic editor enabled by default, skip to step three. To add a Classic box, click the Add Block button on the left corner of the editor and select Classic.
- Open the editor tab by clicking the three-dotted icon on the right corner and click Code Editor.
- Here’s an example of an iFrame code snippet:
<iframe src=”link“ width=“*px” height=”*px” frameborder=”*” align=“*”></iframe>
Let’s break down each attribute in the snippet, to fully understand how the code works:
- iframe scr=”link” – add the targeted page’s URL. For instance, if you want to display HostingWiki’s homepage you’d add https://hostingwiki.org.
- width=”*px” – this value dictates how wide the frame will be. The typical value for this attribute is added in pixels. Alternatively, you can use percentages. If you wish to embed a page in its full width enter 100%.
- height=”*px” – same as before, this value dictates the height of the frame and is commonly measured in pixels.
- frameborder=”*” – this value decides if your frame will have a border. Entering 0 will create a borderless frame, while 1 adds a border.
- align=”*” – as the attribute name suggests, this option allows you to set the alignment of the iFrame. The options are left, right, middle, top, bottom. Keep in mind that if you’re using HTML5 to build your site or write your posts, you’ll have to use CSS to apply this attribute, as it is deprecated – no longer available – with HTML5.
- Say, you want to create an iFrame of a Google Search on your page. The width of the block could be 400, the height at 600, with a border. Next, the position of the block is to be aligned with the center. The code will look as follows:
<iframe src = https://google.com “ width= “400px” height=”600px” frameborder =”1” align = “center”></iframe>
- Add the code to the intended space in the Classic code editor block and click Preview to check it.
- Click Publish when everything is in order. Congratulations, your iFrame is ready!
2. Using a WordPress iFrame Plugin
If you don’t feel like playing with the code a plugin can be your way out. iFrame plugins offer simple implementation and customization.
All you need to do is find a plugin that works for you, install, activate it and open the settings of the plugin to start embedding pages and media to your site. We selected three plugins that you might want to take a look at, based on their features, price, and ease of use:
This WordPress iFrame plugin will let you do more than just resize the displayed page or visual content. It supports lazy loading – a method of loading content that loads content when it is needed, rather than as soon as a page is opened.
This speeds up the initial load time of your page. It also supports widgets and creates responsive elements that works well on both desktop and mobile screens.
What’s best is that it has a free version. Though it comes with fewer features, you can do all the basic tasks with it. The pro version will cost you a single purchase of $20, provide six months of support, that can be extended to a year for an additional $5.63.
The pro version will provide features like a slideshow effect for embedded photos, additional block shaping options, and much more. The Single Commercial license will cost $29 and is limited to one project, provides access to community support and future updates, while the Extended Commercial license ($119) allows using the plugin on unlimited projects, and additionally offers a year of premium support.
The iframe plugin is open-source and free to use. No pro versions are available. Unlike the previous plugins with additional features, this WordPress iFrame plugin offers very basic functionality – shortcodes for easy iFrame implementation. The plugin focuses on helping users adjust their iFrame block with a list of simple parameters.
In a nutshell, the iFrame is a useful tool to not only save you from copyright infringement but also beautify the way you showcase additional content, all the while keeping visitors from leaving your page. It will display the original site or visual content right on your own page.
You can implement an iFrame to your WordPress site in two ways:
- Add it manually by inserting a code snippet with the help of the Code Editor block in your WordPress text editor.
- Use a plugin and easily implement more features. We overviewed three plugins that you might just love.
Now, it is your turn to give it a try. Happy blogging!