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's asynchronous JavaScript loading allows the sharing menu of ClubIt! Buttons to load at around the same time as the page it's on loads.The ClubIt! Button has double-asynchronous technology built in to ensure the best loading times of the button. Since the class of the ClubIt! Button (image)'s link is share-this a2a_target, the ClubIt! Button's JavaScript kicks in and makes the loading time asynchronous. 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 Open Sans. The Open Sans font is linked to from the ClubIt! Button's CSS, so the menu will appear in Open Sans (unless viewed in IE8 and below) on any website. Otherwise, the sharing menu's font face backs up to Helvetica Neue and 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.