The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

JQ LiveLike : Facebook Like Counter that makes your website more interactive.

Tags :

Plugin rate :

JQ.LiveLike is Live Facebook Like Counter that makes your website more interactive.

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

Please do not forget that CSS3 effects, transtions and some properties are not working under IE7, IE8 and outdated browsers.

FAQ

  • You can use it free!
  • You can use it for e-commerce!
  • It has MIT licence
Implementation: 

1. Load jQuery and include LiveLike plugin files

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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

1
2
3
4
5
6
<!--
Insert below code somewhere between and before closing body tag.
-->
<body>
    <div id="inline"></div>
</body>

/// Fixed Theme HTML Markup

1
2
3
4
5
6
7
8
9
10
11
<!--
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

1
2
3
4
5
6
7
8
9
10
11
<!--
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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
            }
        });
    });

/// Call Fixed Theme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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
            }
        });
    });

/// Call Pop-up Theme

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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
            }
        });
    });
Options: 
url
String
Default : https://www.facebook.com/facebook - Please enter URL that you want to share with people on website.
update
Integer
Default : 10000 - Refresh time
digitGroupSymbol
String
Default : , - If abbreviation is enabled, you can separate the number by digit group symbol.
theme
String
Default : inline - Select a theme : inline, fixed and popup.
words
Object
Set prefix, suffix, marginleft, marginright, letter options
styles
Object
Set numContainerClass,digitGroupSymbolClass,letterClass,prefixClass,suffixClass,abbreviationClass,animationBlurClass CSS classes
popup
Object
Set popup theme default properties.
animation
Object
Set counter animation properties.
abbreviation
Object
Enable or disable abbreviation property or change abbreviation strings.
button
Object
Set Facebook Like Button values. If button is enabled, LiveLike appends button by using iframe into element that you entered.
storage
Object
Use one of cookie or localStorage properties to save live data.
callbacks
Object
before,start,after,error callbacks
Methods: 
before
Function
Call this function before getting data.
start
Function
Returns : array - Call this function while getting data.
after
Function
Returns : array - Call this function after getting data.
error
Function
Returns : string - Call this function when an error is occured.
Screenshots
  • Inline theme

  • Fixed Theme

  • Popup Theme

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
1.0
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Comments [0]