Web

Build Your Widget

To create your widget, visit your item's GetGlue page and grab the URL.
For sticker widgets, you'll also need to add the sticker URL from the sticker page.

Header
Background
Rollover
Borders
Links
Text
Subtext
Replies

Advanced Options

To embed a widget, you must add both the script and the link element to your pages. The script can be placed once anywhere inside the <body> element of the page.

The widget will be embedded inline anywhere the link element is placed and will display automatically.

The href of the link is what determines which TV show, recording artist, movie, etc. the widget will display. It is simply the url of the getglue.com page for that object. In the example above, the widget displayed would be a conversation widget for Big Bang Theory.

If you are implementing TV Show widgets across many pages and know the title of the show, you can construct the GetGlue object ID generically using these steps:

1) Lowercase the title and remove any non alphanumeric characters (excluding spaces). So only keep numbers, letters, and spaces.
2) Tokenize the title and drop any of these words: "the", "and", "&", "a"
3) Convert spaces to underscore
4) Prepend "tv_shows/" to the string

For example, Dancing with the stars would be tv_shows/dancing_with_stars.

If you want a broader solution or still have questions, email support@getglue.com.

Customizing the Check-in Message

Reacting to Check-ins

Widgets can fire a JavaScript callback after a successful check-in. To add the callback, specify the data-callback attribute in the widget HTML with the name of your callback function. The callback function must live on the window object, a function as an object property will not work. The parameters passed to the function will be, in order:

userId: The user ID of the checked-in user
objectId: The unique identifier of the object that was checked-in to
title: The title of the object that was checked-in to
numCheckins: The number of times the user has checked-in to the object

Theming Widgets

Widgets can be themed to better integrate with the host web site. There are 8 attributes that can be used the control the theme of the widget, and each must be specified as a hexadecimal CSS color with a leading #, e.g., #22a9bc.

data-headerBgColor: The background color of the header and footer of the widget. A gradient is automatically applied based on this color.
data-bgColor: The background color of all forms and stream items.
data-rolloverBgColor: The background color of stream items being hovered over by the viewer.
data-borderColor: The color of the border surrounding the widget container, forms, and stream items.
data-linkColor: The color of all primary links: usernames, vote and reply links.
data-textColor: The color of text in stream items and text that is entered by the user into textboxes.
data-subtextColor: The color of all secondary textual elements: timestamps, paging controls, and placeholder text
data-replyBgColor: The background color of replies within stream items. Border colors of replies are automatically applied.

iOS

The GetGlue iOS widgets are Objective-C containers for widgets hosted by GetGlue. There are two containers, one for iPhone and another for iPad. They can be used by directly adding the code into a project, or through the interface builder.

Like their web-based counterparts, widgets can be themed to better integrate with their host application. Theme information, as well as instructions on how to include the widgets in your projects, is available in the README.

GetGlue

GetGlue Widgets

Web

Build Your Widget

Advanced Options

Customizing the Check-in Message

Reacting to Check-ins

Theming Widgets

iOS

Facebook