ClubIt! for Developers


Getting Started

The Basic Code

To include a ClubIt! Button on your site, link to the JavaScript and CSS resources (included in the code), and include the basic HTML structure.
You only have to link to the CSS and JavaScript resources once per page. If you have access to your site's <head> tag, we suggest putting the links to those resources there instead of in the code for every button.

Asynchronous JavaScript Loading

The ClubIt! Button is asynchronous, so its loading time is more in line with that of the rest of the page it's on. To make the scripts load asynchronously, the <script> tags include HTML5's async to ensure that the browser loads the files as efficiently as possible.

Sizes

The ClubIt! Button currently comes in four sizes, and more will be released in the future.

Square (55 x 53):
Rectangle (79 x 28):
Reloaded (55 x 53):
Metal (55 x 56):


Design

Typography

The ClubIt! Button's sharing menu font defaults to the web-based font face Lato. If Lato is not imported in the page, the sharing menu's default font face is sans-serif (Helvetica or Arial).

Cross-Browser Compatibility

The ClubIt! Button is being built with the latest web technologies in mind. This means that you can only see the fullest ClubIt! design in modern browsers. In non-modern browsers (like Internet Explorer 8 and below), the basic sharing functionality still works.