zebraslive / facebook-reactions-js Goto Github PK

Developed by: Zeeshan Rasool (Founder at http://www.99points.info & PHPWallScript)

This plugin allows you to generate a like button similar in Facebook style with option to select different reactions from the list. i-e Like, haha, sad, wow etc.

With very simple HTML you can convert the simple button to an interactive facebook style reaction button which will submit the selection a user will made back to the database.

See the examples here.

The button HTML will look like this:

<a class="FB_reactions" data-reactions-type='horizontal' data-unique-id="1" data-emoji-class="">
	<span>Like</span>
</a>

we can change the default button text which is LIKE in this case to anything you want. The class name FB_reactions is also changable as long as the same names in the css are also updated. data-reactions-type='horizontal', data-unique-id="1" and data-emoji-class="" are required though.

In above, you can change data-reactions-type='horizontal' to data-reactions-type='vertical' to change the reaction popup position from horizontal to vertical.

data-unique-id="1" is the control ID which we will assign to each button so we should be able to know which button is clicked. This is for backend purpose where we need to know against which button/control we have to store the reaction selected by any user. So either this can be a unique random number for all controls on same page or we can assign some unique IDs etc.

data-emoji-class will be used to set default class when the page will be loaded. It can have any of these classes like, love, haha, wow, sad, angry. If we will leave it empty, it will be considered "like" by default.

Example to make "Wow" selected by default:

<a class="FB_reactions" data-reactions-type='vertical' data-unique-id="1" data-emoji-class="wow">   
	<span> WOW </span>
</a>

To initiate the reactions:

$('.FB_reactions').facebookReactions();

We have three types of required data attributes:

data-reactions-type: horizontal and vertical

data-unique-id: Any uniqe number or ID for each instance on same page.

data-emoji-class: like, love, haha, wow, sad, angry

Passing the callback URL:

$('.FB_reactions').facebookReactions({
	postUrl: "save.php"
});

Once any user will chose a reaction, the ajax call will be made to save the selection of that button. Here the Ajax call will automatically pass the selection and control ID as POST params to save.php

Copyright (c) 2017 Zeeshan Rasool, http://wallscriptclone.com/ & http://www.99points.info

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.