There are times when you want to know if user Facebook Liked or Unliked your page. Facebook provide an API for that, also there are times when you want to generate Like button on the fly rather including the code upfront in your HTML file. This requirement can be result of N ideas.
My first attempt for generate Facebook Like buttons on the Fly where user/developer is able to detect if User Liked or Unliked your page is below
Without wasting more of your precious time lets jump straight into our code
Plugin Name
jcFacebookLike.js
The Markup
Here is an example markup required to use this plugin.
|
1 |
<div id="myDiv"></div> |
The Plugin Code
You should always get the latest version from GIT. The below source can be dated in many ways, Link to GIT hosted files is provided at the end of this post
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* * Facebook Like Unlike jQuery Plugin * Copyright 2013, Jaspreet Chahal * Free to use under the MIT license * http://www.opensource.org/licenses/mit-license.php * http://jaspreetchahal.org * Donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MHMQ6E37TYW3N */ jQuery.fn.jcFacebookLike = function (settings) { settings = jQuery.extend({ applicationId: "135793783198674", status: true, cookie: true, send: "false", href: window.location.href, layout: "standard", // standard | button_count | box_count show_faces: "true", width: "450", font: "lucida grande", colorscheme: "light", ref: "", debug: false, callbackLike: function () { }, callbackUnLike: function () { } }, settings) // place fb-root element on the page as described here https://developers.facebook.com/docs/reference/javascript/#fbroot if ((jQuery("#fb-root").length == 0)) { jQuery('<div id="fb-root" ></div>').appendTo("body"); } ; function addAtt(el, att) { if (settings[att] && settings[att].length > 0) { return el.setAttribute(att, settings[att]); } } var fbInit = false; return this.each(function () { $el = jQuery(this); // now we will create fb:like element var fbLike = document.createElement("fb:like"); addAtt(fbLike, "status"); addAtt(fbLike, "send"); addAtt(fbLike, "href"); addAtt(fbLike, "layout"); addAtt(fbLike, "show_faces"); addAtt(fbLike, "width"); addAtt(fbLike, "font"); addAtt(fbLike, "colorscheme"); addAtt(fbLike, "ref"); $el.append(fbLike); // final thing is to make sure that application ID exists if (settings.applicationId.length > 0 && !fbInit) { window.fbAsyncInit = function () { FB.init({ cookie: true, xfbml: true, appId: settings.applicationId }); FB.Event.subscribe('edge.create', function (response) { settings.callbackLike(response); if (settings.debug) { console.log(" -- Liked URL -- "); console.log(response); } }); FB.Event.subscribe('edge.remove', function (response) { settings.callbackUnLike(response); if (settings.debug) { console.log(" -- Unliked URL -- "); console.log(response); } }); }; // add all.js (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=135793783198674"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); fbInit = true; } }); }; |
Usage
Here is one example usage
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(window).load(function(){ jQuery("#myDiv").jcFacebookLike({/*href:"http://www.facebook.com/jaspreetchahal.org",*/ show_faces:"false", layout:"button_count", callbackLike:function(response) { jQuery("#log").append(jQuery("<div></div>").html("Liked: "+response)); }, callbackUnLike:function(response) { jQuery("#log").append(jQuery("<div></div>").html("Un-Liked: "+response +" - <hr>Please think about your decision again. If this plugin could be a help then keep liking my FB page. I have got lot to share :)")); } }); }) |
Donate
Yes! It take time and effort so please consider donations
You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work.
If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to
help support future updates and development.
Main uses of Donations
- Web Hosting Fees
- Cable Internet Fees
- Time/Value Reimbursement
- Motivation for Continuous Improvements
Demo
If there isn’t any demo, it doesn’t work. So here is a link to demo to make sure it works
http://jaspreetchahal.org/examples/jquery-examples/likes/jcFacebookLike.html
Get Facebook API key
https://developers.facebook.com/apps
License
MIT/GPL
Fork it on Git
https://github.com/jaschahal/jcFacebookLike
I hope that this plugin will help you. Just in case if you find a bug or you can improve the above code please leave your comments. First attempt does always have room for improvement.
Cheers
Grreat post. I was checking constantly this blog and I’m impressed!
Very useful info particularly the last part 🙂 I care for such info
much. I was looking for this certain info for a long time.
Thank you and good luck.