LikEEExpression Engine like/dislike module

Download NOW

Installation

  1. Download LikEE
  2. Extract the .zip file to your desktop
  3. EE 1.6 | Copy the /system/modules/likee/ directory to your /system/modules/ directory EE 2.0 | Copy the /system/expressionengine/third_party/likee directory to your /system/expressionengine/third_party/ directory

Activation

  1. Log into your ExpressionEngine Control Panel
  2. Click the Modules tab
  3. Click "Install" in the row for LikEE

Adding Like/Dislike Functionality

Giving your users the ability to like/dislike content is actually incredibly easy. All you need to do is use the following tags in your template

For ExpressionEngine 1.6

{exp:likee entry_id="99"}
   I {like} it.
   I {dislike} it.
   {like_count} likes
   {dislike_count} dislikes	
{/exp:likee}

For ExpressionEngine 2.0

{exp:likee:like entry_id="99"}
   I {like} it.
   I {dislike} it.
   {like_count} likes
   {dislike_count} dislikes	
{/exp:likee:like}

Nesting LikEE in Entries Tags

If you are looping through a list of entries, and want to allow your users to vote on each one, just nest the LikEE tags inside your weblog/channel entries tag. Then you can pass the entry_id or url_title dynamically.

For ExpressionEngine 1.6

{exp:weblog:entries weblog="your-stuff" dynamic="off"}
   {exp:likee entry_id="{entry_id}"}
      I {like} it.
      I {dislike} it.
      {like_count} likes
      {dislike_count} dislikes	
   {/exp:likee}
{/exp:weblog:entries}

For ExpressionEngine 2.0

{exp:channel:entries channel="your-stuff" dynamic="off"}
   {exp:likee:like entry_id="{entry_id}"}
      I {like} it.
      I {dislike} it.
      {like_count} likes
      {dislike_count} dislikes	
   {/exp:likee:like}
{/exp:channel:entries}

IMPORTANT: Don't forget the jQuery!

Because LikEE uses AJAX calls to handle all the liking/disliking, there is one more step. You need to add the following tag just before the closing </head> tag.

{exp:likee:js}

There are two optional parameters for the {exp:likee:js} tag.

skip_jquery (optional)

If you already have included a jQuery library into your page, and don't want LikEE to add another one, you can pass this parameter. The only accepted parameter is true

skip_jquery="true"
ip_lockout_hours (optional)

To avoid non-logged-in users clearing their cookies and voting again, there is an ip_limit_hours parameter that can be passed to the {exp:likee:js} tag. The AJAX DB update now does a quick check to make sure the user's IP hasn't voted on a given item in the amount of time configured here. By default this is set to 24 hours.

ip_lockout_hours="48"

Parameters

entry_id, url_title or comment_id

The only required parameter to embed LikEE like/dislike buttons is one of the following: entry_id, the url_title or comment_id. You can nest your LikEE tags within standard EE entries tags, and pass any of these dynamically.

To use LikEE with standard entries, use either: entry_id OR url_title

To use LikEE for comments, use: comment_id

entry_id="23" OR url_title="your-url-title" OR comment_id="42"
like_text (optional)

By default, LikEE replaces the {like} tag with the word "like". This parameter allows you to override that with any word you like.

like_text="love"
dislike_text (optional)

By default, LikEE replaces the {dislike} tag with the word "dislike". This parameter allows you to override that with any word you like.

dislike_text="hate"
like_class (optional)

By default, LikEE adds the a class of "likee_like" to the anchor tags that are generated for the {like} tag. You can choose to apply your styles using this, or if you prefer, you can override this class name with anything you like using this parameter

like_class="dig-it"
dislike_class (optional)

By default, LikEE adds the a class of "likee_dislike" to the anchor tags that are generated for the {dislike} tag. You can choose to apply your styles using this, or if you prefer, you can override this class name with anything you like using this parameter

dislike_class="not-so-much"

Variables

{like}
The like variable creates the button that users will click to like a particular item.
{dislike}
The dislike variable creates the button that users will click to dislike a particular item.
{like_count}
The like_count variable outputs a running count of how many users have liked a piece of content.
{dislike_count}
The dislike_count variable outputs a running count of how many users have disliked a piece of content.
{like_score}
The like_score variable outputs the disliked score subtracted from the liked score. For example, if an entry / comment had 200 likes and 25 dislikes: it would have a score of 175.

Variable Pairs

{remove_after_liking}
The remove_after_liking variable pair can be wrapped around any content you want removed from the DOM after a user likes/dislikes a piece of content.

Here's an example: By default, after a user likes/dislikes any piece of content, LikEE will automatically remove the anchor tags from the DOM and put <strong> tags around the item that was liked. If you would prefer to remove all of the liking/disliking functionality, leaving only the updated like/dislike counts, you could do something like this:

{exp:likee entry_id="99"}
   {remove_after_liking}
      I {like} it.
      I {dislike} it.
   {/remove_after_liking}
	
   {like_count} likes
   {dislike_count} dislikes	
{/exp:likee}
{show_after_liking}
The show_after_liking variable pair can be wrapped around any content you want displayed after a user likes/dislikes a piece of content.

In this example, an unliked/disliked piece of content will display only the option to like content. Once a user makes a decision, the like/dislike totals will be displayed.

{exp:likee entry_id="99"}
   I {like} it.
   I {dislike} it.
   
   {show_after_liking}	
      {like_count} likes
      {dislike_count} dislikes
   {/show_after_liking}	
{/exp:likee}

The Formats

Download LikEE Formats

If you'd like to use the Thumbs or Low profile formats for LikEE, simply download them using the link above and follow these steps:

  1. Place the likee folder inside your css folder and make sure to include a link to it on any pages you wish to format.
  2. Choose your formatting option:

Thumbs Format

To use the Thumbs format, markup your template like so:

{exp:likee entry_id="{entry_id}"}
   <ul class="likEE-thumbs">
      <li class="like">I {like} it.</li>
      <li class="dislike">I {dislike} it.</li>
      <li class="liked">{like_count} likes</li>
      <li class="disliked">{dislike_count} dislikes</li>
   </ul>
{/exp:likee}

In both formats, the <li> classes remain the same. The only change is the <ul> class. For Thumbs: likEE-thumbs. For Low Profile: likEE-lowprofile.

Low Profile Format

To use the Low Profile format, markup your template like so:

{exp:likee entry_id="{entry_id}"}
   <ul class="likEE-lowprofile">
     <li class="like">{like}</li>
     <li class="dislike">{dislike}</li>
     <li class="liked">{like_count} likes</li>
     <li class="disliked">{dislike_count} dislikes</li>
   </ul>
{/exp:likee}

In this example "I like it" and "I dislike it" have been appended to "like" and "dislike" to make more succinct buttons.