Like Button

About

Like Button is JavaScript and PHP based script that allows you to add like functionality for your projects. It's easy to install and configure. I hope you'll be happy with your purchase, if no then please let me know, I'll be try to help as much as I can.

Demo

Which color do you like more?

For more examples, please check demo page.

Files structure

.
|---. assets
|   |--- style.css
|   |--- normalize.css
|   |--- jquery.css
|---. demo
|   |--- index.html
|---. docs
|   |--- index.html
|---. src
|   |--- autoloader.php
|   |--- config.php
|   |--- db.sql
|   |--- index.php
|   |--- LikeButton.css
|   |--- LikeButton.js
|   |---. Idered
|       |---. LikeButton
|           |--- LikeButton.php
|           |--- Storage
|           |--- Helpers
|           |--- Database

assets - Contains files used on demo and docs page, you don't need this in production
demo - Presentation of Like Button
docs - Like Button Documentation
autoloader.php - PHP Class Auto Loader
* config.js - PHP Configuration File
db.sql - MySQL import file
index.php - Like Button start script
* LikeButton.css - Primary Like Button style
* LikeButton.js - Contains Like Button jQuery script
LikeButton.php - Like Button primary PHP class, handless all requests
Database - Contains files to communication with database
Helpers - Useful PHP functions
Storage - Contains database

I've marked * files which you might want to change.

Installation

Rename src directory to LikeButton and copy it to your project root.
In file where you want to add like button, add this code in <head>:
```
<link rel="stylesheet" href="/LikeButton/LikeButton.css">
```

Before </body> add this code:

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/LikeButton/LikeButton.js"></script>
<script>
    jQuery(document).ready(function() {
        $('.js-like').likeButton({
            url: '/LikeButton/'
        });
    });
</script>

Add button:
```
<button class="js-like btn-like" data-item-id="1">Like</button>
```
Important: each button needs to have unique id, to set it, use data-item-id attribute. If you want bind together two buttons then use the same id.

Configuration

HTML Attributes

data-item-id - each button needs to have unique id. Use the same id to bind buttons together. Strings and numbers are supported
data-count - how button counter should be displayed: horizontal or vertical
data-url - use this if you want counter to point to url address
data-title - use this to give counter title attribute
data-disable-counter - disable counter for single button

<button class="js-like btn-like" data-item-id="1" data-url="http://example.com" data-title="Sample counter title">Like</button>

JavaScript

url - address to LikeButton directory
disableCounter - should likes counter be disabled
customCounter - class name of custom counter
before - function called before request, there is 1 param passed:
- btn - jQuery object of button
after - function called after each request for each button, there are 2 params passed:
- btn - jQuery object of button
- response - array containing id, isLiked and count values

{
    url: '/LikeButton/',
    disableCounter: false,
    customCounter: 'btn-like-custom-counter',
    before: function(btn) {},
    after: function(btn, response) {}
}

PHP

You can find PHP configuration in config.php file:

undo - decide if second click will undo like
driver - name of database connection
connections - contains array of database connections
- file - use PHP file as database
- mysql - use MySQL as database
To use MySQL, you have to import db.sql file into your database.

Customization

Color schemes

There're 2 color schemes for inactive button:

Default - light
btn-like--default-dark - dark theme, add this to button class

There're 5 color schemes for active button:

Default - red
btn-like--blue
btn-like--green
btn-like--orange
btn-like--dark

Custom counter

To create custom counter use this:

<span class="btn-like-custom-counter" data-item-id="1"></span>

Set your data-item-id and script will handle the rest. You can change default btn-like-custom-counter class using JS customCounter setting.

PHP API

To use Like Button php api, you have to include main index.php file and load class:

include 'LikeButton/index.php';
use Idered\LikeButton\LikeButton;

You can now use api:

LikeButton::count($id) - get number of likes for given id
LikeButton::isLiked($id) - check if current user added like for given id

FAQ

Can I disable user to unlike?

Yes, you can, please check undo PHP option.

I'm using infinite scroll to add projects to my page, how do I update counter value?

Use this jQuery code:

$('.js-like').trigger('update');

Thanks for purchase!

Like Button - Docs

Easy way to add custom like button for your projects.