Embedding Moderator with an IFRAME

One of the best ways to increase interaction with your Moderator page is to embed it on your website. You can embed Google Moderator on your site by following these instructions. These instructions should be followed by someone who understands basic HTML and JavaScript.

First, place the following code in the HEAD section of your page:

<script src="https://www.google.com/moderator/static/moderator-embed-api.js" type="text/javascript"></script>

Next, create an empty element on your page with a specified ID that will contain the embedded Moderator page, for example

<div id=”moderator-embed-target”></div>

In your browser, open the existing Moderator page that you want to embed and retrieve the URL, for example:

https://www.google.com/moderator/#16/e=409f

For basic uses, below the target element you created above, include the URL of your Moderator page and the ID of the target element in this code:

<script type="text/javascript">
MODERATOR_embed("https://www.google.com/moderator/#16/e=409f", "moderator-embed-target");
</script>

For advanced uses, you can specify the height, width and language of the embedded page using code like below, instead of using the MODERATOR_embed function:

<script type="text/javascript">
var mod = new MODERATOR("https://www.google.com/moderator/#16/e=409f");
mod.hl = "es";
mod.width = 1000;
mod.height = 500;
mod.embed("moderator-embed-target");
</script>

Putting it all together: Here’s a sample page that embeds this Moderator series using default properties:

<html>
<head>
  <title>Embedding Moderator Sample</title>
  <script src="https://www.google.com/moderator/static/moderator-embed-api.js" type="text/javascript"></script>
</head>
<body>
  <div id="moderator-embed-target"></div>
  <script type="text/javascript">
    MODERATOR_embed("https://www.google.com/moderator/#16/e=409f", "moderator-embed-target");
  </script>
</body>
</html>

You can view this example in your browser here: http://google-moderator-api-samples.googlecode.com/hg/samples/simple-embed-api/simple-embed-api-example.html

Comments