Font-Awesome Like button with jQuery

Offline

Admin
#1
Here is a simple edit to the SimpleLikes System plugin by Euantor. We will be using Font-Awesome icons, specifically the Thumbs Up icon.
This tutorial assumes the following:
  • You have Font-Awesome pre-installed on your forum.
  • You have jQuery loaded already (Default in MyBB 1.8)
To begin, go to Templates -> Like System -> simplelikes_likebutton & replace the full template with the following:

Code:
<span class="postbit_like__text"><a id="likeButton_post_{$post['pid']}" class="postbit_like {$buttonText}" title="{$buttonText}"
   href="xmlhttp.php?action=like_post&amp;post_id={$post['pid']}&amp;my_post_key={$mybb->post_code}">
</a></span>
<script>
$( "#likeButton_post_{$post['pid']}" ).click(function() {
  $( this ).toggleClass( "Like" );
});
$( "#likeButton_post_{$post['pid']}" ).click(function() {
  $( this ).toggleClass( "Unlike" );
});
</script>

This adds the Like or Unlike text as a class, which is toggled onclick by jQuery. Next we have to style these classes.
The classes are .Like and .Unlike (Caps Matter) for a simple Like button, add this to the bottom of your global.css template:

Code:
.Like.button {
    background: #56de94;
    border: 2px solid #56de94;
    color: #fff;
    padding: 5px 1px 5px 7px;
    margin-right: 2px;
}
.Like.button:hover {
    background: #44bd7b;
    border-color: #44bd7b;
}
.Like:before {
    content: "\f164";
    font-family: 'Font Awesome 5 Free';
}
.Unlike.button {
    background: #40b374;
    border: 2px solid #40b374;
    color: #fff;
    padding: 5px 1px 5px 7px;
    margin-right: 2px;
    font-weight: 800;
}
.Unlike.button:hover {
    background: #44bd7b;
    border-color: #44bd7b;
}
.Unlike:before {
content: "\f164";
font-family: 'Font Awesome 5 Free';
}
You can use this forum as example, like and unlike this post.
Hi

You may also be interested in...
How to create Font-Awesome CSS Only user group bars by Harry KLast Post: Harry K
jQuery Collapsible Posts (Like Reddit) by Harry KLast Post: Harry K




Users browsing this thread: 1 Guest(s)