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 TypeFind 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 TypeScroll 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="/support/contentpage.htm" width="600" height="600" frameborder="0">
    If you want more information about using the iFrame HTML command, go to W3Schools.com. 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

 
 
 
 
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 200883

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!