How to Use GetGlue Check-in Widgets for Your Web Site and Blog

by Justin on June 30, 2011 · Comments

GetGlue’s Check-in widgets allow your users to check-in to what they are watching, reading, or listening to without having to leave your web site or application. By adding a small piece of HTML code, a widget can be embedded into a web site. Users who are already logged in to GetGlue will be able to take advantage of its functionality immediately, while new or logged-out users can sign in by email or Facebook Connect.

A check-in widget is tied to a specific object on GetGlue, meaning that a widget references exactly one movie, TV show, book, or item in any other media category that GetGlue supports. When a widget is embedded into a web site, it will appear inline as a badge displaying a GetGlue mark and the number of check-ins to the object that the widget is tied to. When a user clicks the badge, an overlay will appear showing the most recent check-ins the object from all GetGlue users, as well as a form so that the user may check-in himself.

Embedding Widgets

To enable widgets, a single JavaScript file must be included just once, anywhere on the page:

<script src="http://widgets.getglue.com/checkin.js" type="text/javascript"></script>

Under the covers, this will turn any link on the page with the class getglue-checkin-widget into a widget badge. For example, this is how one would embed a check-in widget for the Dexter TV show:

<a href="http://getglue.com/tv_shows/dexter" class="glue-checkin-widget" data-objectId="tv_shows/dexter">Check-in on GetGlue</a>

It is a regular HTML link with some extra attributes to signal that it should be transformed into a check-in widget. If for any reason the script fails, it will degrade gracefully and remain a link to the object’s page on the GetGlue web site. The key attribute in the HTML is the data-objectId attribute, as it controls which object that the widget is tied to. Each object on GetGlue has a unique object ID, and it is easy to derive. It can be found by inspecting the URL of the GetGlue page for the object. In the case of Dexter, the GetGlue URL is http://getglue.com/tv_shows/dexter and the object ID is the highlighted portion. If any difficulty arises in identifying the object ID, email support@getglue.com for assistance.

Basic Widgets

The widgets come in multiple styles to better integrate with different site layouts and requirements. There are three basic types of widget, and they can be specified by providing the data-type attribute on the widget link.

The default widget is the vertical widget. It is selected by providing the data-type="vertical" attribute, or no data-type attribute at all. It is a generically sized button that works well inside blocks of text, like blog posts.

The horizontal widget is made to fit inside space-constrained places. It is selected by providing the data-type="horizontal" attribute. Good use cases for this widget are on blog post bylines and footers, video player controls, and social media sharing link groups.

The sticker widget functions the same way as the other two widgets in addition to showcasing a sticker related to the object. It is a good fit for site sidebars and promotional landing pages. To select this widget, set the data-type="sticker" attribute on the widget link. To specify which sticker is shown in the widget, set the data-sticker attribute on the widget to the canonical name of the sticker to display. Like object ID’s, sticker names can be derived from the sticker’s URL on GetGlue. A comprehensive list of stickers is kept on the sticker group list. As an example, if one wanted to use the Experiment Subject sticker from Fringe sticker group, one would note that the URL is http://getglue.com/stickers/experiment_subject and the sticker name is the highlighted portion. To display it, one would set the data-sticker="experiment_subject" attribute on the widget. As a full example, below is a sticker widget for Fringe displaying the Experiment Subject sticker:

<a href="http://getglue.com/tv_shows/fringe" class="glue-checkin-widget" data-type="sticker" data-sticker="experiment_subject" data-objectId="tv_shows/fringe">Check-in to Fringe on GetGlue</a>

Feed Widgets

GetGlue feed widget Feed widgets provide the same functionality as the web widgets, but with features from the overlay immediately available to users. Users can check-in and see the check-in feed for the object embedded right on the page. To embed a feed widget, provide the data-type="feed" attribute on the the widget link. Another feature of the feed widget is that it can spotlight a GetGlue sticker like the sticker widget, and is configured in the same way. By providing the data-sticker attribute, the sticker that gets displayed is selected.

Further customizations for web widgets are available, and widgets for iOS devices are available as well. The documentation for them is located in the GetGlue check-in widgets developer documentation.

Previous post: GetGlue Launches m.getglue.com - A Mobile Check-In Experience For Any Phone

Next post: Check-in to Monte Carlo on GetGlue This Weekend to Earn Exclusive Stickers!