Skip to content

Instantly share code, notes, and snippets.

@thetrickster
Last active November 10, 2017 04:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thetrickster/5493542 to your computer and use it in GitHub Desktop.
Save thetrickster/5493542 to your computer and use it in GitHub Desktop.
Enable/Disable form fields based on Facebook Like Button events. Press Like and form fields are disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
channelUrl : 'http://YOURDOMAIN/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true, // Look for social plugins on the page
cookies : true,
logging : true,
oauth : true
});
// Additional initialization code such as adding Event Listeners goes here
// Setup a variable to contain all the form input elements to enable
var myDisabledFields = "input, textarea, select, email, button";
// If this like button is for a facebook page Like Button, tell us the page id so we can check later on if they are a fan on page load
var likedPage = "";
function enableForm() {
// Let's use some jQuery to target form with the class "fb-like-form" and find and enable
// each of the matching input elements we put in our variable above
jQuery(".fb-like-form").find(myDisabledFields).each(function() {
// Remove the "disabled" attribute for this element
jQuery(this).removeAttr("disabled");
});
}
function disableForm() {
jQuery(".fb-like-form").find(myDisabledFields).each(function() {
jQuery(this).attr("disabled", "disabled");
});
}
// The FB.Event.subscribe method lets us run some javascript on certain events. The "Like" event for the Javascript SDK is "edge.create"
FB.Event.subscribe('edge.create',
// Once we're subscribed, anytime the Like button is cliked Facebook sends us back some data in an array.
// We'll call that data array "response".
function(response) {
// If you uncomment the next line, you'll see the data returned in your console
console.log(response);
enableForm();
// Optionally, do other stuff here.
}
);
// Let's re-enable the form when someone "UnLikes" a Like button
FB.Event.subscribe("edge.remove", function(response){
disableForm();
});
// If we included a pageLiked variable above, that means this Like Button and form are on a page tab and
// the Like Button is for the parent page of the page tab, so check to see if they are a fan on page load
if ( pageLiked != "" ) {
FB.getLoginStatus(function(response) {
var page_id = likedPage;
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
console.log("LIKE");
enableForm();
} else {
console.log("NO LIKEY");
disableForm();
}
});
} else {
FB.login(function(response) {
if (response && response.authResponse) {
var user_id = response.authResponse.userID;
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
FB.Data.query(fql_query).wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
console.log("LIKE");
enableForm();
} else {
console.log("NO LIKEY");
disableForm();
}
});
} else {
console.log("NO LIKEY");
disableForm();
}
}, {scope: 'user_likes'});
}
});
} // End if pageLiked
}; // end fbAsyncInit
// Load the SDK asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="YOUR_URL_TO_GRAPH_ITEM" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
<form class="fb-like-form" method="post" action="">
<fieldset>
<span class="req">*</span> Required
<label for="FirstName">First Name <span class="req">*</span></label>
<input type="text" name="FirstName" id="FirstName" class="" maxlength="255" disabled="disabled"/>
<label for="LastName">Last Name <span class="req">*</span></label>
<input type="text" name="LastName" id="LastName" class="" maxlength="255" disabled="disabled" />
<label for="EmailAddress">Email Address <span class="req">*</span></label>
<input type="email" name="EmailAddress" id="EmailAddress" class="" maxlength="255" disabled="disabled" />
</fieldset>
<button type="submit" disabled="disabled" >Submit</button>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment