This blog and tutorial is an addition to the information you can find on the support page of Noforeigland.
“Note: This tutorial and its outcomes apply only to self-hosted WordPress installations and are not compatible with sites hosted on WordPress.com. WordPress.com restricts iframe embedding, allowing it solely for select services, such as Google Maps, or if the site is on a Business plan or higher.”
I assume that you already have some experience with working in WordPress and that you can create a new page or edit a page.
The procedure explained in this blog uses WordPress’s built-in Block Editor. Within the WordPress community, we used to talk about Gutenberg, but since the 6.* versions of WordPress we’ve been talking about the Block Editor.
In a later blog I will also make a version for use with Elementor. Which editor you should use for WordPress is partly a personal taste, or is decided for you when you purchase a certain theme. Nowadays I always work with the built-in Block Editor. This one is a bit less intuitive than other editors, but much less heavy and therefore faster. You also have less need for extra plugins, which improves the maintenance of the website.
Understanding iframes
To be able to show the map of Noforeignland on our webpage we need to use an iframe. An iframe is a container or an element in which we can display the content or part of the content of another website.
In standard html, the <iframe> tag is utilized to create this inline frame, with attributes such as src, width, height, and frameborder providing additional customization options.
Luckely for us, the “Custom Html Block” in Block Editor creates the necessary code and tags for us, all we have to do is enter the personal URL copied on the Noforeignland.
Add the Custom HTML Block
Create a new page, or open the page on which you want to show your personal NFL map.
To add a Custom HTML block, click on the + Block Inserter icon and search for it, or type /html
on a new line and hit enter.
You can also use your keyboard and type /html on a new line and press enter to add a new custom block
Copy Your URL
Now you need to copy your URL from the Noforeignland “Embed a map in your web page” support page.
How to do this and how to personalize your map can be found on the support page where you can also copy the URL.
Make sure you’re properly logged in to the website. Click on the “Copy HTML to clipboard” button and proceed to the next step.
Add Your URL
Once you’ve added the block, you can insert your Noforeignland URL into the html field.
Press Preview to activate the view of your map.
Publish your page
Preview your page by clicking the preview icon in the top right corner. You can of course add extra elements on your page.
If you are ready click the “Publish” button in the top right corner. Your location now shows on your website.