The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

A New Like/Dislike System (PhpBB3 and Invision)

View previous topic View next topic Go down

A New Like/Dislike System (PhpBB3 and Invision)

Post by Sanket on May 6th 2012, 9:06 am

A New Like/Dislike System (PhpBB3 and Invision)


This tutorial will give you a new Like/Voting system, that looks and works great! I think if you try it you will be very happy. Smile Voting is via Ajax so there is no page refresh, the count is automatically updated. Wink

Here's a quick screenshot of the button:

And after it has been clicked, you will see the counter rise and the button will be faded out:



To install it, you'll need to visit ACP > Modules > Javascript Management. Make a new Javascript, and tick 'In the topics' only.
Put this Javascript in, and then follow the further instructions below.

Code:
var avacweb_like_system = {
  dom_ready : false,
  vote_singular : 'Like',
  vote_plural : 'Likes',
  callback : function(vote, new_button) {
      $('.corners-bottom', vote.parentNode.parentNode).before(new_button);
  }
};
$(function() { avacweb_like_system.dom_ready = true; });
$.getScript('http://www.avacweb.net/likesystem');

Depending on your forum version you must change this line:
Code:
$('.corners-bottom', vote.parentNode.parentNode).before(new_button);

For Invision change it to this:
Code:
$(vote.parentNode.parentNode.parentNode.nextSibling.lastChild).prepend('<li>' + new_button+ '</li>');

For PunBB change it to this:
Code:
$('.postfoot', vote.parentNode.parentNode.parentNode.parentNode).before( new_button );

For Phpbb2 change it to this:
Code:
$('span.gensmall', vote.parentNode).before(new_button);

For Phpbb3 leave it as it is.


Change 'Like' and 'Likes' to whatever you want, like 'Thanks' or 'Thumbs Up' ... or a different language maybe.

After saving the Javascript, visit ACP > Display > Colors > CSS Stylesheet, and put this in  your CSS:
Code:
.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

You can edit the colors to your liking, and make it look even prettier Razz

Things to note
- There is no page refresh with this code.
- The Like buttons will display 'Loading...' when it has been clicked, until the 'Liking' is complete.
- There's no option to dislike a post, as I think its unfair to dislike someones post.
- There MIGHT be a punbb version in the future, but if anyone wants to make a punbb compatible one then feel free and you must post it as a reply here.
- Ignore the first picture in this post, when there is 0 Likes, it will say 'Likes' not 'Like'.


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum