Download
User Rating: 0/5 ( 0 votes)
JQ.LiveLike is a live Facebook Like Counter plugin
Features
-
Simple integration.
-
Easy setup with advanced documentation.
-
CSS3 transition support.
-
Storing data on the client with localStorage (for multiple values) or cookie (for single value) support.
-
Yearly, monthly, weekly, daily, hourly or per-second data support.
-
Inline, fixed and popup theme options.
List of Compatibility
-
Internet Explorer 7+
-
Firefox
-
Chrome
-
Opera
-
Safari
Source: livelike.ubulut.com
1. INCLUDE CSS AND JS FILES
<!-- LIVELIKES STYLESHEET -->
<link rel="stylesheet" href="css/jq.livelikes.css">
<!-- LOAD JQUERY FRAMEWORK (1.4.3 version or higher) -->
<script src="js/jquery-1.4.3.min.js"></script>
<!--
LOAD JQUERY TRANSIT PLUG-IN FOR CSS3 ANIMATIONS (Optional)
This plugin enables CSS3 animations. Please check official jQuery Transit website
for documentation about plugin : http://ricostacruz.com/jquery.transit/
-->
<script src="js/jquery.transit.min.js"></script>
<!--
JSON SUPPORT FOR IE7 (Optional)
You must load this plugin if you want to save live data
by using cookie or localStorage on old Internet Explorer web browsers like IE7.
-->
<!--[if IE 7]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
<!-- LOAD JQ.LIVELIKES PLUG-IN -->
<script src="js/jq.livelikes.js"></script>
2. HTML
<div id="inline"></div>
3. JAVASCRIPT
$(window).load(function(){
$("#inline").LiveLikes({
url: "https://www.facebook.com/facebook", //change url
theme: "inline",
words: {
prefix: "WOW! DO YOU BELIEVE IT?<BR/>",
suffix: "PEOPLE LIKE MY PAGE!"
},
button: {
enabled: true,
id: "button",
layout: "button_count",
action: "like",
face: false,
share: false,
width: 90,
height: 21,
appId: 447356255394783 //change Facebook Application ID
}
});
});
4. OPTIONS
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
url |
String |
|
Please enter URL that you want to share with people on website.
|
update |
Integer |
10000 |
Refresh time.
|
digitGroupSymbol |
String |
, |
If abbreviation is enabled, you can separate the number by digit group symbol.
|
theme |
String |
inline |
Select a theme : inline, fixed and popup.
|
words |
Object |
|
prefix, suffix, marginleft, marginright, letter (See below for details)
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
prefix |
String |
'' |
Add a word or sentence before the counter.
|
suffix |
String |
LIKED ME! |
Add a word or sentece after the counter.
|
marginleft |
Integer |
10 |
Add emptiness between prefix and the counter. Please enter pixel value.
|
marginright |
Integer |
10 |
Add emptiness between the counter and suffix. Please enter pixel value.
|
letter |
Object |
|
You can set letter width or height.
width |
Integer |
23 |
Set letter width. Please enter pixel value.
|
height |
Integer |
49 |
Set letter height. Please enter pixel value.
|
|
|
styles |
Object |
|
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
numContainerClass |
String |
nums |
Set counter number container CSS class name.
|
digitGroupSymbolClass |
String |
comma |
Set digit group seperator CSS class name.
|
letterClass |
String |
letter |
Set letter CSS class name
|
prefixClass |
String |
prefix |
Set prefix CSS class name.
|
suffixClass |
String |
suffix |
Set suffix CSS class name.
|
abbreviationClass |
String |
abbreviation |
Set abbreviation CSS class name.
|
animationBlurClass |
String |
blur |
Set blur effect CSS class name.
|
|
popup |
Object |
|
Set popup theme default properties.
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
styles |
Object |
|
Set pop-up CSS class names.
popupClass |
String |
popup |
Set pop-up container class name.
|
closeButtonClass |
String |
close |
Set pop-up close button CSS class name.
|
overlayClass |
String |
popupOverlay |
Set pop-up overlay background CSS class name.
|
|
overlay |
Object |
|
Ser popup overlay background properties.
enabled |
Boolean |
true |
Enable or disable popup overylay background.
|
opacity |
Integer |
0.8 |
Set overlay background opacity value.
|
|
animation |
Object |
|
Set popup animation properties.
before |
Object |
|
Set CSS3 or CSS styles before starting animation.
Please check jQuery Transit Plugindocumentation for CSS3 transaction.
If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQueryanimate() function.
|
start |
Object |
|
Set CSS3 or CSS styles when starting animation.
Please check jQuery Transit Plugindocumentation for CSS3 transaction.
If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQueryanimate() function.
|
close |
Object |
|
Set CSS3 or CSS styles before closing animation.
Please check jQuery Transit Plugindocumentation for CSS3 transaction.
If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQueryanimate() function.
|
|
removeOnClose |
Boolean |
true |
When user clicks close popup button or overlay background and if this property is enabled, LiveLike removes popup elements from body and stops getting new data.
|
callback |
Object |
|
Start and close popup initialization callback.
start |
Function |
|
Start popup callback.
|
close |
Function |
|
Close popup callback.
|
|
|
animation |
Object |
|
Set counter animation properties.
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
letterTransactionSpeed |
String/Integer |
slow |
Set letter transaction animation speed.
Use string like "slow" , "fast" or integer (ms) like 10000 (10 seconds).
|
blurEffect |
Boolean |
true |
Enable or disable to use blur effect when LiveLike starts animation.
This is CSS3 property. If user browser does not support CSS3, this effect will not work.
|
defaultCss |
Object |
|
Set animation properties and values effect if user browser will not support CSS3 transactions.
before |
Object |
|
Set animation properties and values before LikeLikes counter starts animation.
|
start |
Object |
|
Set animation properties and values when LikeLikes counter starts animation. Use jQuery animate()function.
|
stop |
Object |
|
Set animation properties and values after LikeLikes counter stops animation. Use jQuery animate()function.
|
|
css3 |
Object |
|
Set animation properties and values effect if user browsersupports CSS3 transactions.
before |
Object |
|
Set animation properties and values before LikeLikes counter starts animation. Use jQuery Transit Plugin documentation for properties.
|
start |
Object |
|
Set animation properties and values when LikeLikes counter starts animation. Use jQuery Transit Plugin documentation for properties.
|
stop |
Object |
|
Set animation properties and values after LikeLikes counter stops animation. Use jQuery Transit Plugin documentation for properties.
|
|
|
abbreviation |
Object |
|
Enable or disable abbreviation property or change abbreviation strings.
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
enabled |
Boolean |
false |
Enable or disable abbreviatiion property.
If this property is enabled, animations will be disabled.
|
thousand |
String |
K |
Set name of abbreviation for thousand.
|
million |
String |
M |
Set name of abbreviation for million.
|
billion |
String |
B |
Set name of abbreviation for billion.
|
|
button |
Object |
|
Set Facebook Like Button values.
If button is enabled, LiveLike appends button by using iframe into element that you entered.
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
enabled |
Boolean |
false |
Enable or disable Facebook Like Button.
|
id |
Integer |
button |
Set element id where you want to add like button.
|
layout |
String |
button_count |
Set layout type. Facebook button layout types are 'standard', 'box_count' or 'button_count'.
Learn more information about Facebook like button settings from Facebook Developers API Documetation.
|
action |
String |
like |
Set action type. Facebook button action types are 'like' or 'recommend'.
Learn more information about Facebook like button settings from Facebook Developers API Documetation.
|
face |
Boolean |
false |
Enable or disable to show friends face.
|
share |
Boolean |
false |
Enable or disable to include share button.
|
width |
Integer |
90 |
Set button iframe width.
|
height |
Integer |
21 |
Set button iframe height.
|
appId |
Integer |
447356255394783 |
Set your Facebook application ID.
You can click here to get App ID or create new App.
|
|
storage |
Object |
|
Use one of cookie or localStorage properties to save live data.
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
cookie |
Object |
|
Use cookie to save data.
-
LiveLike saves the lastest data on cookie because of cookie maximum size limit.
-
If you want to save multiple data, you must use localStorage.
enabled |
Boolean |
false |
Enable or disable cookie storage.
|
name |
String |
livelikes |
Set cookie name.
|
expires |
Integer |
7 |
Set cookie expire day value.
|
|
localStorage |
Object |
|
Use localStorage to save or load previous data.
Browsers that support localStorage are listed below:
-
Internet Explorer IE8+
-
Firefox 3.5+
-
Chrome 4+
-
Opera 10.5+
-
Safari 4+
enabled |
Boolean |
false |
Enable or disable localStorage storage.
|
name |
String |
livelikes |
Set localStorage storage name.
|
|
|
callbacks |
Object |
|
NAME |
TYPE |
DEFAULT |
DESCRIPTION |
before |
Function |
|
Call this function before getting data.
|
start |
Function |
|
Call this function while getting data.
|
after |
Function |
|
Call this function after getting data.
|
error |
Function |
|
Call this function when an error is occured.
|
|