WordPress iFrame using Azure
There was a need to host some javascript in a WordPress page due to how sessionize embeds speaker sessions. Due to WordPress’ limitations on javascript usage, the script could not be used in the page. To bypass this limitation, an Azure website can host the script; and then be used as an iFrame inside the WordPress page. To accomplish this requires the following steps:
- Create an Azure Website
- Change the page to include the script
- Host the script as an iFrame in WordPress page
Create an Azure Website
Azure Web Apps provides a highly scalable, self-patching web hosting service. This quickstart shows how to deploy a basic HTML+CSS site to Azure Web Apps. You’ll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.
If you don’t have an Azure subscription, create a free account before you begin.
Open Azure Cloud Shell
Azure Cloud Shell is a free, interactive shell that you can use to run the steps in this article. Common Azure tools are preinstalled and configured in Cloud Shell for you to use with your account. Just select the Copy button to copy the code, paste it in Cloud Shell, and then press Enter to run it. There are a few ways to open Cloud Shell:
Select Try It in the upper-right corner of a code block. | |
Open Cloud Shell in your browser. | |
Select the Cloud Shell button on the menu in the upper-right corner of the Azure portal. | |
Install web app extension for Cloud Shell
To complete this quickstart, you need to add the az web app extension. If the extension is already installed, you should update it to the latest version. To update the web app extension, type az extension update -n webapp
.
To install the webapp extension, run the following command:
az extension add -n webapp
When the extension has been installed, the Cloud Shell shows information to the following example:
The installed extension 'webapp' is in preview.
Download the sample
In the Cloud Shell, create a quickstart directory and then change to it.
mkdir quickstart
cd quickstart
Next, run the following command to clone the sample app repository to your quickstart directory.
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
Create a web app
Change to the directory that contains the sample code and run the az webapp up
command.
In the following example, replace <app_name> with a unique app name.
cd html-docs-hello-world
az webapp up -n <app_name>
The az webapp up
command does the following actions:
- Create a default resource group.
- Create a default app service plan.
- Create an app with the specified name.
- Zip deploy files from the current working directory to the web app.
This command may take a few minutes to run. While running, it displays information similar to the following example:
{
"app_url": "https://<app_name>.azurewebsites.net",
"location": "Central US",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "appsvc_rg_Windows_CentralUS ",
"serverfarm": "appsvc_asp_Windows_CentralUS",
"sku": "FREE",
"src_path": "/home/username/quickstart/html-docs-hello-world ",
< JSON data removed for brevity. >
}
Make a note of the resourceGroup
value. You need it for the clean up resources section.
Browse to the app
In a browser, go to the Azure web app URL: https://<app_name>.azurewebsites.net
.
The page is running as an Azure App Service web app.
Congratulations! You’ve deployed your first HTML app to App Service.
Change the page to include the script
In the Cloud Shell, type nano index.html
to open the nano text editor. Change the body of the app to include only the javascript tag you need.
Save your changes and exit nano. Use the command ^O
to save and ^X
to exit.
You’ll now redeploy the app with the same az webapp up
command.
az webapp up -n <app_name>
Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.
Host the script as an iFrame in WordPress page
In your WordPress page, add the following text in square brackets – iframe src=”https://<app_name>.azurewebsites.net/” where app_name is the name of the application you created in Azure.