The Embed Widgets module allows site owners to create embeddable widgets from site content. Widgets can then be embedded and distributed across the web in various formats.

Project Status

This module is currently a Google Summer of Code (GSoC) project and is under active development.
Project Page: http://drupal.org/project/embed_widgets
SoC Wiki page: http://groups.drupal.org/node/10984
Demo Site: http://deviable.com/widgets

Currently, widgets are only available in IFrame format. The Google Gadgets format is planned as part of the Google Summer of Code project. Many widget formats are possible and contributors are welcome to contribute additional modules after GSoC.

A widgets API will also be developed as part of GSoC. This will allow modules to define widgets in code, much like blocks can be defined by modules.

Please note that embed widgets currently only supports embedding pages and blocks. Views can be embedded if a page or block view is embedded, but further integration with the Views module is planned. Widget customization is very limited at this point. A user interface to configure the look of a widget is planned.

Installation

To install, place the entire embed_widgets folder into your modules directory. Enable the embed_widgets and embed_widgets_ui modules along with any "widget type" modules, by visiting Administer -> Site building -> Modules.

If you would like to use JavaScript tabs to navigate IFrame widgets, make sure that the Tabs module is installed and enabled. (http://drupal.org/project/tabs)

You should also grant users the correct permissions after installing by going to Administer -> User management -> Permissions.

Usage

To create a widget you must do define a source, create a widget, and then copy the embed code.

Widget Sources

Sources may be added as tabs to widgets. To define sources:

  1. Go to Administer -> Site Building -> Embed Widgets.
  2. Click "Add Source."
  3. Enter a description of your source.
  4. Select the type of source you would like to embed.
  • When adding a page, enter the relative path to the page that you would like to embed (i.e. node/25 instead of http://example.com/node/25).
  • To add a block, select the block that you would like to embed from the drop down menu. Please note that blocks must be configured to show up in some Drupal region in order to be used. Blocks can alternatively be added as sources on each block configuration page by checking the box that says "Provide this block as a source to be embedded in widgets."

Creating & Editing Widgets

  1. Go to Administer -> Site Building -> Embed Widgets.
  2. Click "Add Widget."
  3. Enter a title, description, and footer (optional) for your widget.
  4. Select the format(s) in which you would like to build your widget.
  5. Select a source to add as a new tab in your widget from the dropdown menu labeled "Source." Additional tabs my be added by editing the widget.
  6. Tabs may be removed from a widget by editing the widget and checking the box next to a tab title in the "Remove Tabs" section.

Embedding Widgets

For users with "administer embed widgets" permission:

  1. Go to Administer -> Site Building -> Embed Widgets.
  2. Click the "Preview" link next to the widget that you would like to embed.
  3. Copy the code from the textbox.
  4. Paste the code into your site.

For users with "view code for embedding widgets" permission:

  1. Navigate to http://example.com/embed-widgets
  2. Click the "Get Code" link next to the widget that you would like to embed.
  3. Copy the code from the textbox.
  4. Paste the code into your site.