JQ.LiveLike – Facebook Like Counter plugin

Jun 04, 2014 in Social & RSS 4007 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

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

Add emptiness between prefix and the counter. Please enter pixel value.

marginright

Integer

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.

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

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	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.

JS Tutorial

JQ.LiveLike – Facebook Like Counter plugin

Features

List of Compatibility

Related Articles