Adding an iFrame to a Movable Type Webpage

Sometimes there is a need to embed or nest a page of content within another. This often done with iFrames and can also be implemented within Movable Type webpages. The following article explains how iFrames can be added within webpages published from the Movable Type dashboard.

Inserting Iframes into Movable Type Web Pages

Adding iFrames is a two part process that will require that the content of your page be uploaded into the server as a separate HTML file and the addition of HTML code into the page where the iframe will be embedded. The first part of this tutorial explains how to upload the HTML page onto the webs.


Uploading the Iframe Web Page

The following steps will be described using the Cpanel File Manager.  If you want more information on an alternative option, try using FTP:  Getting Started: FTP.

  1. Login to the Cpanel.
  2. Scroll down to the FILES section and click on FILE MANAGER.
  3. Publishing Paths for Movable Type

    Find the directory where Movable Type is publishing the website files.  If you do not know where this is, login to your Movable Type Dashboard, then go click on SETTINGS in the menus on the left hand side.  You will see the PUBLISHING PATHS if you scroll down screen at this point.  The location of the directory will be published there.  Use this location to help you identify where you need to navigate in the File Manager (or FTP client). 

  4. Open the folder where the files have been published.  Click on UPLOAD in the menu bar the top of the file manageer interface.  Find the file that you want to use in the iframe.  Upload this file onto the server.  Make sure that you remember the exact name of the file.

Adding the Code for the Iframe in Movable Type

We will adding the code using the Movable Type interface.  
  1. Login to the Movable Dashboard as an administrator.
  2. Click on the site that want to edit.
  3. Iframe code inserted during edit of page in Movable Type

    Scroll down the interface on left until you find PAGES.  Click on PAGES, then select the page you want to edit when the list appears.  Click on the title of the page you are going to edit.

  4. Before you can add code to the page, you will need to change the FORMAT option on the far right.  Click on the drop-down arrow and click on NONE when it appears in the drop-down menu.  If you do not do this, then the code will be affected by automatic formatting changes with the editor.  The code that is inserted in the page will be similar to the following – these are the basic commands for using an iframe:
    <iframe="" name="iframename" src="contentpage.htm" width="600" height="600" frameborder="0">

    If you want more information about using the iFrame HTML command, go to The command includes a name for the iFrame (however you want to name it), the name of the source file (framcontent.htm) in the example above.  The dimensions are specified by pixels.  The last option is for a border to appear.  When it is set to 0, then there is no border.  The larger the number the thicker the border. 

  5. Click on the blue UPDATE button on the right of the screen.  This will automatically publish the changes.  
This completes the entry of the iFrame for a Movable Type page.  Checkout the screenshots below to see how the page was inserted using an iFrame.  
HTML Page before Movable Type iFrame:

HTML Page not added as iframe

After the asset is setup and added to the Movable Type webpage in an iFrame, it will appear as follows:

Movable Type page with iFrame added


Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Was this article helpful? Join the conversation!

Web Hosting Cyber Week Sale
Hurry! These Deals Won't Last Long