Embedding Knol Content into Other Websites

For a customized quick overview of how to embed your knol, just click the "Embed knol into other websites" link at the bottom of the "Share and invite" list in your author toolbox of the knol you'd like to embed. 

If your knol does not have a "copyright" license, It will take you to a page that looks like this: http://knol.google.com/k/knol/system/knol/pages/EmbedKnol?knolId=si57lahl1w25.233 and contains easy instructions for copy/pasting HTML into your website to embed the knol. 

Embedded Views

A new url parameter will be introduced to render a knol in one of several predefined embedded views.  Embedded views render simplified, public and read-only views of knols.  The markup is not interactive -- it lacks affordances to write, edit, manage, rate, review, comment, etc.  These affordances can be provided by consumers of embeddable knols, by linking back to the full knol representations on knol.google.com.  The url structure to link directly into write modes (e.g. edit, manage) will be documented together with the public documentation for embedding knols.

Embedded View Types

There are two predefined embedded views with different levels of details shown: content view and gadget view.

Content View

Content view is similar to the current knol view, but lacks all the sidebar information, chrome (logo, login bar and the bottom bar), search, write, edit, manage, rate affordances and comments.

An author byline is added below the title.  The information shown:

• title
• author byline (pointing to knol.google.com)
• article rating (note: can also be omitted with a parameter)
  
• subtitle and abstract
• non-interactive table of contents (note: can also be omitted with a parameter)
  
• full knol content

Recommended dimension: minimum 500px width, arbitrary height

Example:

This view also accepts additional parameters, embed.toc and embed.ratings, that can be used to exclude the respective UI components (table of contents and the article rating, see below for details).

Gadget View

Gadget view can be used for space-constrained renderings of knols, e.g. in a sidebar.  A similar view is currently used on our home page to represent featured knols.

Information shown:

• author image
• title, subtitle, byline
  
• knol snippet
• an image from the knol (NOTE: The image needs to be attached to that knol, not linked from a different domain).

Recommended dimension: 300x300px

Example:

Requesting and Embedding Knols

Embedded knols are retrieved by appending the embed url parameter with the corresponding view to a knol url.  The valid parameter values are content and gadget.  Example:
http://knol.google.com/k/jeffery-greenblatt/clean-energy-2030/15x31uzlqeo5n/1?embed=content

Example with parameters:
http://knol.google.com/k/jeffery-greenblatt/clean-energy-2030/15x31uzlqeo5n/1?embed=content&embed.toc=false&embed.ratings=false

The resulting HTML can either be included as an iframe or injected into a server-generated page.

Including Embedded Knol as an Iframe

This is the simplest method of including embedded knols.  Include an iframe tag pointing to the above url:

<iframe
  width="950" height="1000"
  src="http://knol.google.com/k/jeffery-greenblatt/clean-energy-2030/15x31uzlqeo5n/1?embed=content">
</iframe>

If the knol content height exceeds the iframe's height, the iframe will automatically resize.  The iframe includes all the supporting CSS style and JavaScript code.

Pros:

• Simplicity, requires little work on the consumer's side.
• Since the iframe runs in a sandbox, there are no security risks involved

Cons:

• Latency: since knol content is rendered in a separate request, users will see the surrounding chrome rendered before the iframe content is rendered.
• As the iframe resizes to accommodate for knol content, the surround chrome might reflow, resulting in page flicker.
  
• Iframes have usability issues with browser history tracking.
  

Including Embedded Knols on Server Side

In a server-generated page, knols can be embedded into the HTML directly:

• Perform an HTTP GET request using the above url,
• Using a DOM library, parse the resulting document and include the content of the body element directly into the page,
• In the <head> of the page, include the supporting CSS style-sheet needed to style the embedded knol:
  <link rel="stylesheet" type="text/css"
    href="http://knol.google.com/k/knol/system/knol/css/knol.css"
    media="screen" />
  
• Note: no additional JavaScript code is necessary.

Pros:

• More control over how the page is rendered.
• Improved latency.
  

Cons:

• Requires more engineering work.
  

Authorization

Embedded knols will always show the public view and will not try to authenticate viewers.  If a knol is unpublished, flagged or removed, the corresponding error message will be served in place of the knol content.

Knol Links

Links contained within any embed view of a knol will be absolute and point to knol.google.com.  This differs from the relative links served as part of the standard Knol view (on knol.google.com). 

Localization

To embed localized versions of the knol user interface, pass in the hl url parameter with the ISO 639-2language code, e.g.:
http://knol.google.com/k/jeffery-greenblatt/clean-energy-2030/15x31uzlqeo5n/1?embed=content&hl=de

The list of supported languages will be included in the public documentation for embedding knols.  As of April 2009, the supported language codes are: en, pt, es, ko, fr, de, ar, it, ru, ja, nl, iw.

Embedding Specific Knol Revisions

By default, an embedded knol will show content from the latest published version.  To point to a specific revision of the knol, the version url parameter can be added.  To determine the proper version number, use the Revisions view in Knol.  Example:
http://knol.google.com/k/jeffery-greenblatt/clean-energy-2030/15x31uzlqeo5n/1?embed=content&version=42