How to embed a website inside your Moodle webpage with iframes and Bitty browser

Bitty Browser is truly an amazing web application. It allows you to embed a website within a website. 

So you can embed an entire working website inside your blog or Moodle site. Its developer is Scott Matthews. But first, a brief comparison between a normal iframed website and a Bitty framed website.

Figure 1. Cnn.com is embedded inside my Moodle coursepage using normal iframe HTML code.
This is an image only.

Figure 2. Cnn.com is embedded inside my Moodle coursepage using Bitty iframe HTML code.
This is an image only.

The difference between Figure1 and Figure2 is that in Figure2, there is a mini-address bar where you can type in a new http URL. By clicking on the extreme right-hando-side >> icon, you will be redirected within that window to your destination.

Here's a live example - normal iframe coded website:

Live website1. Normal iFrame version. Scm.moodleace.com is now embedded inside this blog post!
It's really live! Try moving your mouse over one of the round blue icons...

The embed code that I used for the "normal iframe" website above is:

<table cellspacing="0" style="width:100% !important;background:#999 !important;padding:0px !important;margin:0px !important;border:0px !important;border-collapse:collapse !important"><tr><td style="background:#999 !important;padding:1px !important;margin:0px !important;border:0px !important;"><iframe src="http://scm.moodleace.com/" scrolling="yes" frameborder="0" style="display:block !important;width:100% !important;height:400px !important;background:#D4D0C8 !important;padding:0px !important;margin:0px !important;border:0px !important;"><a href="http://www.moodurian.com/">Moodurian.com</a>; (iframes required)</iframe></td></tr></table>


Here's another live example - this time, a bitty iframe coded website:

Live website2. Bitty iFrame version. Scm.moodleace.com is now embedded inside this blog post!
It's really live! Try moving your mouse over one of the round blue icons...

 
The embed code that I used for the "Bitty iframe" website above is:

<!-- BITTY BROWSER : WWW.BITTY.COM : {BEGIN} -->
<table cellspacing="0" style="width:100% !important;background:#999 !important;padding:0px !important;margin:0px !important;border:0px !important;border-collapse:collapse !important"><tr><td style="background:#999 !important;padding:1px !important;margin:0px !important;border:0px !important;"><iframe src="http://b1.bitty.com/b2browser/?title=Bitty+Browser&width=100%25&height=400&titlebar=on&textlabels=on&searchbar=on&contenttype=website&contentvalue=http%3A%2F%2Fscm%2Emoodleace%2Ecom" scrolling="no" frameborder="0" style="display:block !important;width:100% !important;height:400px !important;background:#D4D0C8 !important;padding:0px !important;margin:0px !important;border:0px !important;"><a href="http://www.bitty.com/">Bitty Browser</a> (iframes required)</iframe></td></tr></table>
<!-- BITTY BROWSER : WWW.BITTY.COM : {END} -->

The nice thing about the embedded website is that it is self-contained. Meaning that clicking on a link will refresh the webpage within the embed code, unless "open page in new tab" is explicitly chosen by the user. So what does this mean for your Moodle site? Any ideas? Well, you could embed several websites that are related to, let's say, the topic Web 2.0. The student will then be able to access them from WITHIN the Moodle page. All embeds are live and the student can learn about the website without leaving the Moodle coursepage.

Here's another example. This time, I have created a "Compose a web page" resource on my Moodle site. When I click on it, the webpage opens and I will see four embedded websites. Cnn.com, Moodle.org, Moodlenews.com and Moodurian.blogspot.com!

I'm going to be a bit cheeky and show all this in the embedded window below. Try this out (I'm sure you've never done this before!): in the window below, scroll down until you see the embedded subwindow where Moodurian.blogspot.com has been opened. Look for this post entitled 'Bitty Browser magic - how to embed a website inside your Moodle webpage'. Click on it. You should now have TWO levels of embedded websites staring at you. You can even manipulate them! Hope you're not too dizzy by now! Hehe.

Live websites3. Seven(!) websites are embedded inside my Moodle site, which is itself embedded in this blog post!
Are the 2-Dimensional embeds confusing you?

You can access the same webpage directly from here.

To get a Bitty browser enabled and embedded website, follow these 7 Steps.

(1) Go to http://www.bitty.com and click on "Get Started..."

(2) Click on "change something..."

 (3) Click on "Click here" to change the contents.

(4) Click on "Web site URL"

(5) Type the URL of your website to be embedded. Then click the "Continue" button!


(6) Click "Get HTML" for the embed code.




(7) Copy the embed code and paste it into your Moodle site in HTML code mode.

That's it about Bitty. Hope you found this useful or interesting. If you were bored by all this, then you probably know more about iframes than I. Good on you matey!

In closing. think of all the possibilities of using iframes and the Bitty Browser in your Moodle site! Until the next time, this is DurianMan signing off! Bye.

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!