Like

The like component is used to indicate users that something has value.

Count Only

Interactive Count Only

No Likes

Others Like

Only You Like

You And Others Like

Light Box

Light Box - Interactive Header And High Like Count

Dojo Control

Classes

  • lotusLike - the class that goes on the outermost node.
  • lotusLikeCount - the class that goes on the link that contains the icon, like count, and bubble connector.
  • lotusIconLike - the class that goes on the icon.
  • lotusLikeText - the class that goes on the div that contains the like count.
  • lotusLikeConnector - the class that goes on the bubble connector div.
  • lotusLikeDescription - the class that goes on the "You like this" span.
  • lotusDivider - the class that goes on the separator span.
  • lotusLikeAction - the class that goes on the "Like" or "Undo" anchor.
  • lotusNoLikes - the class that goes on the lotusLikeCount node that triggers alternate styling.
  • lotusDisabled - the class that goes on the lotusLikeCount node that triggers alternate styling.
  • lotusLikeSimple - the class that goes on the lotusLikeCount node that triggers alternate styling.
  • lotusLikeHeader - the class that goes on the light box header.
  • lotusLikeHeaderText - the class that goes on the span in the header for supplemental text.
  • lotusList - the class that goes on the list of people.
  • lotusLikeAvatar - the class that goes on the div that contains the person's photo.
  • lotusPerson - the class that goes on the div that contains the person's name.

Basic Implementation

It is important for lotusLikeText to be a div because it needs a block display.

The lotusLikeConnector node needs to be a div instead of an img because the connector image is purely eye candy; the screen reader should not read this image.

In general, the title attribute isn't used for disabled links.

Count Only - add the text "Likes" in the image alt attribute. Make sure the include a space before the number in the lotusLike inner HTML.

Interactive Count Only - add the lotusLikeSimple class to the lotusLikeCount link. Do not include the lotusLikeConnector node.

No Likes - add the lotusNoLikes class to the lotusLikeCount link. This makes the bubble render properly when there is no like count. Remove the href, role, title, aria-label, and aria-haspopup because the bubble is not clickable. IMPORTANT: add role="presentation" to lotusLikeText and set the inner HTML to " ". This is necessary so the line height is consistent between 0 and 1 likes. Set the last link text to "Like".

Others Like - when setting the count, make sure to set it in the lotusLikeCount aria-label, title, and lotusLikeText div. Set the last link text to "Like".

Only You Like - add the lotusDisabled class to the lotusLikeCount link. This removes the link styling. Remove the href, role, title, and aria-haspopup because the bubble is not clickable. Set the aria-label to "1 person likes this". Include the "You like this" and lotusDivider spans. Set the last link text to "Undo".

You and Others Like - when setting the count, make sure to set it in the lotusLikeCount aria-label, title, and lotusLikeText div. Include the "You like this" and lotusDivider spans. Set the last link text to "Undo".

Light Box - add the lotusDisabled class to the lotusLikeCount link. This removes the link styling. Remove the href, role, title, and aria-haspopup because the bubble is not clickable. When there are 25 or more likes, add the lotusLikeHeaderText span.

Accessibility

Add aria-haspopup="true" to the lotusLikeCount link when clicking on it brings up the light box.

Add the aria-label="[x] people like this" on the lotusLikeCount link. When only you have liked it, change the text to "1 person likes this. Do not use an aria-label when there are no likes.

Add role="button" to the Like and Undo links, and the lotusPopupCount when it is clickable.

Add aria-live="assertive" on the span wrapping the Like and Undo links. This forces the screen reader to re-read these elements when updated.

Add role="presentation" to the lotusDivider span. Add role="presentation" to the lotusLikeText div only when there are no likes.

Examples

Sample HTML - count only

Sample HTML - interactive count only

Sample HTML - no likes

Sample HTML - others like

Sample HTML - only you like

Sample HTML - you and others like

Sample HTML - like box

Sample HTML - like box - interactive header and high like count

CSS (like.css)

Theme CSS (likeTheme.css)

May 4, 2011 - Provided preview styling for the 3.0.0 release.

May 19, 2011 - Simplified the markup to not use lotusInlinelist becuase that will most likely wrap this and other widgets. Updated to a new design that has a "bubble" around the like count. Along with adding new classes, changed lotusDash to lotusDivider. Wrapped the light box in a dijit dialog.

May 26, 2011 - Added two class names (lotusLikeDescription and lotusLikeAction) for IE6 and IE7 fixes.

August 16, 2011 - Added a span with aria-live="assertive" to all examples. Updated the Like Box - Others Like example to have left-aligned header text. The lotusLikeHeaderText element now needs the lotusRight class when aligned right.

August 17, 2011 - Moved the light box row anchors from inside the lotusPerson element to inside the li. This allows the entire row to be a click target.

December 19, 2011 - Changed light box row divs to spans to better support IE6 and IE7.

January 4, 2012 - Added the count only and interactive count only examples and updated the 3 columns, summary view example page that uses them. Changed the documentation titles to better describe the examples.

June 27, 2012 - Updated "Undo" to "Unlike".