Widget herding made simple - Introducing the Widgets module

sheep herd

Widget herding made simple - Introducing the Widgets module

Have you ever needed to put Service links or ShareThis into block? How about AddToAny in a node link? Want to have different share buttons per content type? Want a simple way to add the latest widgets from Twitter, Facebook or Google to your site. Want to enable admins to customize widgets without having to dig into the API docs? It's time to start wrangling in all those widgets. Virtually all the sites we have built over the last several years involve integration with sharing sites and social media through various code widgets, gadgets and plug-ins. The typical process of adding widgets by mixing modules, widget API configuration and custom blocks is tedious at best. To help organize and streamline this process, we recently released the Widgets module.

Defining the problem

Widgets are small snippets of code that enable people to do a variety of things such as share content, visit social media profiles, view updates and so forth. Some widgets are simply copy and paste. Others require dynamic data such as a page title or URL. Many widgets can be customized by changing various parameters in their code. The main challenges with widgets are:
  • How do we place them on the site?
  • How do we deal with dynamic data?
  • How do we manage custom settings?
  • How do we keep a diverse set of widgets organized?
There are several modules that solve these problems for specific types of widgets in their own way. For example, Service links, AddThis, ShareThis and AddToAny all enable you to add content sharing buttons to your site. There are others that help pull in Twitter and Facebook widgets. There are those that provide links to social media profiles – and the list goes on. The main issue is that each has their own UI and feature set. Some allow you to place widgets into blocks, some in node links, some embedded into content, but there is no consistent standard. Some allow you to build one set of widgets, some multiple. Each deal with dynamic content in their own way, often through a specialized, single-use token system. Each has different support for caching. That is not to say that these modules are bad, many are pretty great with their own slick interfaces. However, on today's highly socially-integrated sites, an array of widget types is needed. We need a standardized system for dealing with all these widgets.

The Widgets module

Widgets definition list screenshotThe Widgets module is meant to act as an API to help centralize management of various code snippets. It has an API for modules to provide code snippets via widget definitions. You can also add custom definitions via the admin.

Widgets set form screenshotWidgets definitions can be organized and customized into widget sets. Widget sets are built using an interface similar to core's image style admin. Just create a new widget set then add widget elements from a drop down list. You can sort widgets via drag and drop and modify customizable widgets via configuration forms.

Widgets visibility settingsSets can be displayed in blocks, tokens and node links by content type and display modes.

Widgets definition preview screenshotDrupal's core token system is used as the standard for managing dynamic data. Widget definitions can include standard tokens and special variable tokens which enable admins can configure settings per widget. A simple syntax makes it easy for widget definitions to auto-generate configuration forms from variable tokens.

Widgets set list screenshotTo make things even more plug and play, the API enables modules to define pre-built widget sets. These can be overridden and customized.

Widgets cache settings screenshotFinally, a tunable caching layer is used to assure widget sets load quickly. Caching can be set across all pages, by node authors, by page and by logged in user.

We hope you find the Widgets module as useful as we have for wrangling in the widget herds. Got any improvements, suggestions or comments? Let me know below. photo by kidicarus222

Related Posts

Drupal Mega Menus Made Simple

Mark Carver
Read more

Building custom widgets

Tom McCracken
Read more

A Simple Entity Data API for Module Builders

Tom McCracken
Read more

Top 3 Social Sharing Widgets and Why You Should Use Them

Kayla Wren
Read more

What are social media widgets? Oooh, give me.

Tom McCracken
Read more

Introducing the LinkedIn Share Button for Drupal

Michael Kasberg
Read more