GeoGebra Advanced Tutorial 2 – Embedding GeoGebra Applets in Blogger/Blogspot

In the last advanced tutorial, we have learned how to export a GeoGebra worksheet to a Dynamic HTML. As we have observed, the GeoGebra worksheet is exported as a single page; therefore, we have very little control over it, unless, of course, we know how to code HTML or CSS. This also means that if we link the dynamic HTML to our blog or webpage, we will have to go to a new page to view it.

There are instances, however, that we do not want to open a new page; that is, we want to embed our GeoGebra applet in our web page or blog post. To do this, we will extract the GeoGebra HTML code (contains Javascript) and paste it in our blog post or web page.

In this tutorial, we will use Blogger as a sample blog to embed a worksheet since Blogger allows Javascript embedding. Note that there are websites or applications that do not allow Javascript embedding, so you have to consult with your technical support, in case your GeoGebra worksheet didn’t show up after you embedded it.

Instructions in Embedding

In this post, we will assume that you have already a GeoGebra worksheet to embed. If you just want to follow this tutorial, and you do not have a GeoGebra worksheet, you can download a sample GeoGebra worksheet here and follow the instructions below.

Steps in Embedding GeoGebra to a Blogger/Blogspot Post

  1. Open your GeoGebra file.
  2. Resize the GeoGebra window so that it will fit the place where you will embed it. Note that the size of the GeoGebra window in a GeoGebra worksheet will also be the size of the applet after embedding.
  3. Select File>Export>Dynamic Worksheet as Webpage(html) from the menu bar to display the Export dialog box.
  4. In the Export dialog box , select the Advanced tab, and then select Clipboard: HTML from the Files section.
  5. Click the Clipboard button to copy the HTML code. » Read more