Friday, September 2, 2011

How to embed an OKMindMap inside your blog or Moodle webpage resource.

Hi. In this post, I will show you how to embed an OKMindMap in your website or Moodle webpage resource or label.

This method is different from adding an OKMindMap activity to your Moodle site as mentioned previously in this post. That was a pretty long post wasn't it? Don't worry, this article is short(er) and sweet(er). The method oulined in this article is quite straight-forward and easier to implement that the OKMindMap activity. The advantage of a Moodle activity is that it can be tracked and logged. Warning: a mindmap embedded (as shown in the sections below) in a Moodle label resource or Moodle webpage resource cannot be logged. With that in mind, let's begin!

The window below is an example of an embedded mindmap. One of my mindmaps saved on It is live.Go ahead click on it. Hold and drag your mouse. Click on the tip of any first level node to expand the child nodes.

Here's the embed code of the above window:

<iframe src="" width="600" height="600" ></iframe>

How did I get the embed code of the OKMindmap object? Read on to find out how. Screenshots are in gorgeous technicolour.

Step1: Start by browsing to

Step2: Click on "Sign in" button. If you have already created an account, enter your username and password to login. To create an account, click the "Sign up" link.

Figure 1. The homepage of

Figure 2. The Sign In dialogue box

Step3: Go to Basic | Map | Open and select your Mindmap

Figure 3. Selecting a saved mindmap to be opened.

Step4: Once your OKMindMap is opened, go to Transform & Share | Sharing settings

Figure 4. Set the share settings of your mindmap

Step5: Next, select the name of your mindmap from the first dropdown list. Choose type "Open". Tick the "View" permission to make the mindmap read-only. You wouldn't want others to edit it would you?

Figure 5. The Edit dialogue box

See the Edit button on the lower left corner? It should actually read "Update". Click on that button. If you look carefully at the lower left corner of your screen, you should see a URL like this appear:

Figure 6. URL of the Edit button reveals an update action!

See, I told you the button should actually be labelled as "Update" instead of the confusing "Edit".

Step6:  Click the "Edit" button to save your settings.

Figure 7. Go ahead and UPDATE your Edit settings!

When you click the "Edit" button, you will see the below dialogue box.

Step7:  Check your settings. "Open" means that one does not require a password to see your mindmap. Anyone who knows the URL of your mindmap can view it. If the settings are what you intend, then close the dialogue box.

Figure 8. This dialogue box shows lists saved mindmaps and their share settings.

Step8:  Now you are ready to get the embed code. Go to Transform & Share | Export | Embed info.

Figure 9. The menu-submenu hierarchy to generate embed the code

The window shown in Figure 10 will appear.

Step7:  You can edit the width and height settings (in pixels). Since the mindmap is of type "Open", leave the password blank.

Step8:  Click on "Code Generation". The embed code will appear inside the "Embed code" textarea.

Figure 10. There's your embed code!

Now that you have the embed code copied to your system's clipboard, it's a straightforward task to paste that code inside your blog or Moodle webpage resource. You can even create a Moodle label resource and choose HTML mode and paste the mindmap in.

So that's it. Simple and no tricks involved.

But wait! There's more. What happens at  Step5 if you chose "Password" instead of "Open" type?

Figure 11. Enter your password setting.

Well, the Password edit box will appear and you should then type in a password. That password is what is needed to open the mindmap should you access it from a webpage. If you click the "Edit" button, this will save the mindmap settings. So now when you access your webpage that loads the mindmap, the embedded object will initially look like this:

Figure 12. The mindmap awaits your password.

You are prompted for a password. Here's what my blog post looks like when I set the type as "Password":

Figure 13. A password-protected mindmap on my blog

So if I keyed in the correct password, you would expect the mindmap to appear inside the embedded object's area right? Wrong! For some strange reason, the mindmap opens in a new window. This is wrong and hopefully OKMindMap's developers can change it in future.

In summary, you can easily embed an OKMindMap as readonly or edit-mode in any blog or Moodle webpage. You can also password-protect the OKMindMap so that only those who possess the password can open the mindmap as a separate window.
Well that's it for this short and sweet tutorial. Until the next time, happy noodling, I mean Moodling.

Frankie Kam

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!

No comments:

Post a Comment

Ratings and Recommendations by outbrain