CONFIGURATION OBJECT

$('#container').livelike({
  • url : 'https://www.facebook.com/facebook',
  • update : 10000,
  • digitGroupSymbol : ',',
  • theme : 'inline',
  • words : {...
    • prefix : '''',
    • suffix : 'LIKED ME!',
    • marginleft : 10,
    • marginright : 10,
    • letter : {...
      • width : 23,
      • height : 49
      }
    },
  • styles : {...
    • numContainerClass : 'nums',
    • digitGroupSymbolClass : 'comma',
    • letterClass : 'letter',
    • prefixClass : 'prefix',
    • suffixClass : 'suffix',
    • abbreviationClass : 'abbreviation',
    • animationBlurClass : 'blur'
    },
  • popup : {...
    • styles : {...
      • popupClass : 'popup',
      • closeButtonClass : 'close',
      • overlayClass : 'popupOverlay'
      },
    • overlay : {...
      • enabled : true,
      • opacity : 0.8
      },
    • animation : {...
      • before : {
        }
        ,
      • start : {
        }
        ,
      • close : {
        }
      },
    • removeOnClose : true,
    • callback : {...
      • start : function(e){
        }
        ,
      • close : function(e){
        }
      }
    },
  • animation : {...
    • letterTransactionSpeed : slow,
    • blurEffect : true,
    • defaultCss : {...
      • before : {
        }
        ,
      • start : {
        }
        ,
      • stop : {
        }
      },
    • css3 : {...
      • before : {
        }
        ,
      • start : {
        }
        ,
      • stop : {
        }
      }
    },
  • abbreviation : {...
    • enabled : false,
    • thousand : 'K',
    • million : 'M',
    • billion : 'B'
    },
  • button : {...
    • enabled : false,
    • id : button,
    • layout : 'button_count',
    • action : 'like',
    • face : false,
    • share : false,
    • width : 90,
    • height : 21,
    • appId : 447356255394783
    },
  • storage : {...
    • cookie : {...
      • enabled : false,
      • name : 'livelikes',
      • expires : 7
      },
    • localStorage : {...
      • enabled : false,
      • name : 'livelikes'
      }
    },
  • callbacks : {...
    • before : function(e){
      }
      ,
    • start : function(e){
      }
      ,
    • after : function(e){
      }
      ,
    • error : function(e){
      }
    }
});

JQ.LIVELIKE

FACEBOOK LIVE LIKE COUNTER PLUGIN DOCUMENTATION

HOW DO I ADD THIS
TO MY WEBSITE?

1. Load jQuery and include LiveLike plugin files

Make sure both the LiveLike and jQuery 1.4.3 or higher scripts are included

<head>
<!-- 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>
</head>

2. Set up your HTML

LiveLike has three themes option (inline, fixed and popup) and each theme has different, special HTML markup according to another.

/// Inline Theme HTML Markup

<!--
Insert below code somewhere between and before closing body tag.
-->
<body>
    <div id="inline"></div>
</body>

/// Fixed Theme HTML Markup

<!--
Insert below code somewhere between and before closing body tag.
The plugin finds parent child (“.holder”) and adds a CSS class
that is named “fixed” or something else that you want to be.
-->
<body>
    <div class="holder">
        <div id="fixed"></div>
        <span>I’m HTML and not required, you can remove me…</span>
    </div>
</body>

/// Popup Theme HTML Markup

<!--
Insert below code just before closing body tag.
The plugin finds parent child (“.holder”) and adds a CSS class
that is named “popup” or something else that you want to be.
-->
<body>
    <div class="holder">
        <div id="popup" class="txt"></div>
        <span>I’m HTML and not required, you can remove me…</span>
    </div>
</body>

3. Call the plugin

Now call LiveLike Plugin initializer function…

/// Call Inline Theme

<script>
    $(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
            }
        });
    });
</script>

/// Call Fixed Theme

<script>
    $(window).load(function(){
        $("#fixed").LiveLikes({
            url: "https://www.facebook.com/facebook", //change url
            theme: "fixed",
            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
            }
        });
    });
</script>

/// Call Pop-up Theme

<script>
    $(window).load(function(){
        $("#popup").LiveLikes({
            url: "https://www.facebook.com/facebook", //change url
            theme: "popup",
            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
            }
        });
    });
</script>

HOW DO I CUSTOMIZE
THE CODE?

NameTypeDefaultDescription
urlStringhttps://www.facebook.com/facebook

Please enter URL that you want to share with people on website.

updateInteger10000

Refresh time.

digitGroupSymbolString,

If abbreviation is enabled, you can separate the number by digit group symbol.

themeStringinline

Select a theme : inline, fixed and popup.

wordsObject

prefix, suffix, marginleft, marginright, letter (See below for details)

NameTypeDefaultDescription
prefixString''

Add a word or sentence before the counter.

suffixStringLIKED ME!

Add a word or sentece after the counter.

marginleftInteger10

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

marginrightInteger10

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

letterObject

You can set letter width or height.

widthInteger23

Set letter width. Please enter pixel value.

heightInteger49

Set letter height. Please enter pixel value.

stylesObject
NameTypeDefaultDescription
numContainerClassStringnums

Set counter number container CSS class name.

digitGroupSymbolClassStringcomma

Set digit group seperator CSS class name.

letterClassStringletter

Set letter CSS class name

prefixClassStringprefix

Set prefix CSS class name.

suffixClassStringsuffix

Set suffix CSS class name.

abbreviationClassStringabbreviation

Set abbreviation CSS class name.

animationBlurClassStringblur

Set blur effect CSS class name.

popupObject

Set popup theme default properties.

NameTypeDefaultDescription
stylesObject

Set pop-up CSS class names.

popupClassStringpopup

Set pop-up container class name.

closeButtonClassStringclose

Set pop-up close button CSS class name.

overlayClassStringpopupOverlay

Set pop-up overlay background CSS class name.

overlayObject

Ser popup overlay background properties.

enabledBooleantrue

Enable or disable popup overylay background.

opacityInteger0.8

Set overlay background opacity value.

animationObject

Set popup animation properties.

beforeObject

Set CSS3 or CSS styles before starting animation.

Please check jQuery Transit Plugin documentation for CSS3 transaction.

If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQuery animate() function.

startObject

Set CSS3 or CSS styles when starting animation.

Please check jQuery Transit Plugin documentation for CSS3 transaction.

If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQuery animate() function.

closeObject

Set CSS3 or CSS styles before closing animation.

Please check jQuery Transit Plugin documentation for CSS3 transaction.

If user browser does not support CSS3, LiveLike disables CSS3 animations and uses jQuery animate() function.

removeOnCloseBooleantrue

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.

callbackObject

Start and close popup initialization callback.

startFunction

Start popup callback.

closeFunction

Close popup callback.

animationObject

Set counter animation properties.

NameTypeDefaultDescription
letterTransactionSpeedString/Integerslow

Set letter transaction animation speed.
Use string like "slow" , "fast" or integer (ms) like 10000 (10 seconds).

blurEffectBooleantrue

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.
 

defaultCssObject

Set animation properties and values effect if user browser will not support CSS3 transactions.

beforeObject

Set animation properties and values before LikeLikes counter starts animation.

startObject

Set animation properties and values when LikeLikes counter starts animation. Use jQuery animate() function.

stopObject

Set animation properties and values after LikeLikes counter stops animation. Use jQuery animate() function.

css3Object

Set animation properties and values effect if user browser supports CSS3 transactions.

beforeObject

Set animation properties and values before LikeLikes counter starts animation. Use jQuery Transit Plugin documentation for properties.

startObject

Set animation properties and values when LikeLikes counter starts animation. Use jQuery Transit Plugin documentation for properties.

stopObject

Set animation properties and values after LikeLikes counter stops animation. Use jQuery Transit Plugin documentation for properties.

abbreviationObject

Enable or disable abbreviation property or change abbreviation strings.

NameTypeDefaultDescription
enabledBooleanfalse

Enable or disable abbreviatiion property.
If this property is enabled, animations will be disabled.

thousandStringK

Set name of abbreviation for thousand.

millionStringM

Set name of abbreviation for million.

billionStringB

Set name of abbreviation for billion.

buttonObject

Set Facebook Like Button values.
If button is enabled, LiveLike appends button by using iframe into element that you entered.

NameTypeDefaultDescription
enabledBooleanfalse

Enable or disable Facebook Like Button.

idIntegerbutton

Set element id where you want to add like button.

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

actionStringlike

Set action type. Facebook button action types are 'like' or 'recommend'.

Learn more information about Facebook like button settings from Facebook Developers API Documetation.

faceBooleanfalse

Enable or disable to show friends face.

shareBooleanfalse

Enable or disable to include share button.

widthInteger90

Set button iframe width.

heightInteger21

Set button iframe height.

appIdInteger447356255394783

Set your Facebook application ID.
You can click here to get App ID or create new App.

storageObject

Use one of cookie or localStorage properties to save live data.

NameTypeDefaultDescription
cookieObject

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

Enable or disable cookie storage.

nameStringlivelikes

Set cookie name.

expiresInteger7

Set cookie expire day value.

localStorageObject

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+
enabledBooleanfalse

Enable or disable localStorage storage.

nameStringlivelikes

Set localStorage storage name.

callbacksObject
NameTypeDefaultDescription
beforeFunction

Call this function before getting data.

startFunction

Call this function while getting data.

afterFunction

Call this function after getting data.

errorFunction

Call this function when an error is occured.