Hey Peeps :D. How ya all doing? And Happy New Year to you all. Its great to be back with a post on the first day of a new year. 🙂 So lets get back to business.

Recently I was working on a Joomla Website for our university. There I wanted to add a Google Map to the footer. So I tried to do it with a CustomHTML module. This was the iFrame I wanted to add.

So I went to Extensions > Module Manager and created a new module with the type of CustomHTML and added my code for the iFrame and selected the position of the module and saved it and went to the site. BAAAAAM… The map was not there. 😮

No Map is Displayed

What happened was Joomla Stripped out everything and the iFrame was removed. So no map on the website. But fortunately there is a workaround for this.

What you need to do is simple. First go to Extensions > Module Manager to open up Module Manager.

Select Module Manager from Extensions Menu
Select Module Manager from Extensions Menu

And from there Click on the New Module button to create a new module.

New Module Button
New Module Button

And you will get a popup windows to select the type of module you wanna create. What we want to do is to create a Wrapper. So select the wrapper from the popup windows.

Select Wrapper from Module Types
Select Wrapper from Module Types

The wrapper would be viewed as an iFrame at any location we want the wrapper to be positioned. You can select where it is shown using the Position setting from the module settings. Then you need to take ONLY the URL from the Google Maps iFrame you want to use. And then paste the URL in the Basic Options – URL field.

src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3947.487195748568!2d80.50291299999999!3d8.353639!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afc8a63d9e8ff6d%3A0x8e08bdb2ad12375c!2sFaculty+of+Applied+Sciences!5e0!3m2!1sen!2slk!4v1420092128987"
Module Wrapper: Options
Module Wrapper: Options

You can specify the width and height of the iFrame and other settings such as Auto Height, Frame Border etc. from Basic Options. You can set the Menu Assignments where you want this iFrame to show up from the Menu Assignment section. And the Save your changes.

And folks that is it 🙂 Now go to the page where you set the iFrame and see it in action. I have set the iFrame (Google Map) in the Footer of each page. And now you can see the Google Map is properly displayed in the Footer (or your position of choice in your site).

Map Displayed on the Footer
Map Displayed on the Footer

In this scenario I have used a Google Map, but you can use any thing that you want to embed using an iFrame.

Well that is neat and solves my problem. And hope it will help you out as well.  🙂 So once again, HAPPY NEW YEAR people. Stay with me for more posts in 2015. In that note, I’m outta here. C ya. 😀

Advertisements

One thought on “Embedding an iFrame in to your Joomla Website

  1. Howdy. This is the problem I’m also facing, trying to use an iframe wrapper for a facebook page to post within my website. I’ve done this before with previous versions of Joomla and not had a problem. Even after following your suggestion, I was unsuccessful. 😦

    Might it be specific to Facebook?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s