GeoGebra Advanced Tutorial 11 – Embedding GeoGebra Applet in WordPress Blogs using the Media Library

Note: This tutorial is for hosted WordPress blogs.  As of this writing, GeoGebra applets cannot still be embedded in WordPress.com blogs.

1.) Be sure that you have a WordPress iframe plugin. I use Embed Iframe in embedding GeoGebra applets so I recommend that you use it since I don’t know if the code is similar using other plugins.

2.) Export Your GeoGebra Worksheet as Dynamic HTML. Be sure to take note of the width and the height of your applet. These can found in your Advanced tab of the File Export dialog box.

3.) (Optional): Edit your HTML file using a Text Editor (see how below). Although this is optional, I recommend that you do this.

4.) Go the the Library in the Media panel your WordPress Dashboard and upload your dynamic HTML file.

5.) Once the file is uploaded, click on the Library link again in the media panel to display all the uploaded files and click the file name link of your GeoGebra html file. This will display the Edit Media page.

6. From the Edit Media page, copy the URL of your file from the File URL box (see red box in diagram below).

7.) In your blog post, type [iframe URL width height] in HTML view where you want the applet to be displayed. The URL is the URL of the GeoGebra html file that you have copied, and the width and height are the width and height of your applet. If you see a scrollbar on your applet and you don’t want it, try adding 50 pixels or more in the width or height in the iframe code.

8.) Save your file and preview to see your applet.

How to Edit your Dynamic HTML using a Text Editor

Note: You should do this before uploading your HTML to the Media Library.

1.) Open your GeoGebra dynamic HTML file with a text Editor (try Notepad++).
2.) Set the left margin from 40 to 0.
3.) Set the table border with to equal your applet width.

4.) Delete the created with GeoGebra line from <span> to </span> (see Figure below).

5.) Save the changes in your applet.