I'm trying to refine the log-in process from my front end. Right now, I have it set so the "login" button just utilizes generic data "testuser." For both username and password.
What I'd like is for the fields I have to be filled in by a user, and upon clicking the button, that user data used instead of "testuser."
<label for="username">User Name</label><input id="username"/>
<var username = username>
<label for="password">Password</label><input id="password"/>
<var password = password>
<button onClick='gamesparks.registrationRequest("testuser", "testuser", "testuser", registerResponse)'>Register</button>
<button onClick='gamesparks.authenticationRequest("testuser", "testuser", loginResponse)'>Login</button>
My code is in my header.php file and is easy for me to understand. But I'm not sure how to create a log in field that will submit user data!
To throw a curve ball at everyone, I have a facebook login API already set up. That code is included as part of a widget in wordpress and looks like this:
<?php do_action('facebook_login_button');?>
[fbl_login_button redirect="" hide_if_logged=""]
<!-- Here is my FB code-->
<head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '{193547157855095}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
<script>
var finished_rendering = function() {
console.log("finished rendering plugins");
var spinner = document.getElementById("spinner");
spinner.removeAttribute("style");
spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
style="
background: #4267b2;
border-radius: 5px;
color: white;
height: 40px;
text-align: center;
width: 250px;">
Loading
<div
class="fb-login-button"
data-max-rows="1"
data-size="large"
data-button-type="continue_with"
></div>
</div>
}
<!--End of FB code-->
So there it is. A big challenge. I want to capture the login information from the facebook button. Even just a username would be fine...and submit that into my button for loggin in. HELP!
Related
I'm taking the tutorial for the FB login button. I'm straight-up copying and pasting the code (, so I can't figure out why it's not working. Instead, I'm just getting a comment "// The JS SDK Login Button" for some reason.
I'm especially confused because it was working for a while, until I tried to modify it. I broke it somehow, then cut out everything and started over from scratch. But this version isn't working. I did everything the same as the first time, so I'm pretty confused.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log('statusChangeCallback');
console.log(response); // The current login status of the person.
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '1560520617436290',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : '5.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
(function(d, s, id) { // Load the SDK asynchronously
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
// The JS SDK Login Button
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
I am developing a chrome extension where my popup.js receives a message from a content script on the current page and creates an array. Then on a button press, popup.js creates a new tab (which has a content script running) and sends that content script a message containing the array.
My popup.js:
//this message is sent from a different content script (for current page), not shown here
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action === "getSource") {
var arr = JSON.parse(request.source);
//create new tab
chrome.tabs.create({url: "newtab.html"}, function(tab){
//send message to new tab
chrome.tabs.sendMessage(tab.id{
action: "getDataArray",
source: JSON.stringify(arr)
});
}
});
newtab-contentscript.js:
$(document).ready( function() {
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action === "getDataArray") {
$("#result").html(JSON.parse(request.source));
}
});
newtab.html:
<script src="newtab-contentscript.js"></script>
Problem: The newtab-contentscript.js never seems to receive the message.
Are the any mistakes with how I am creating a tab or sending the message. Do you have any suggestions to how to fix this issue?
As we discussed in the comments, I guess maybe $(document).ready is too late to receive messages from chrome.tabs.sendMessage, you can test it by comparing timestamps of console.log inside the callback and on the first line of the new tab's content scripts, as #wOxxOm mentioned.
I just suggest moving message logic to background (event) page and starting the message passing from newtab-contentscript.js, in which you could control when to start sending the message.
A sample code
background.js
let source = null;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
// sent from another content script, intended for saving source
if(request.action === 'putSource') {
source = request.source;
chrome.tabs.create({ url: 'newtab.html' });
}
// sent from newtab-contentscript, to get the source
if(request.action === 'getSource') {
sendResponse({ source: source });
}
});
newtab-contentscript.js
chrome.runtime.sendMessage({action: 'getSource'}, function(response) {
$('#result').html(response.source);
});
I have already been through different blogs explaning about service worker , one of them is open Web Push notification. I followed the instructions in Open Web Push notification and implemented a code which creates a curl registration id.Once the registration id is created i put it in database.but i get no notification . i normally enabled gcm in google console .
Should I also write gcm server and client code, as I have read a lot of blogs ,none said to do so.
what should i do to get notifications.
please refer below the codes if i have missed anything.
index.html
<!doctype html>
<html lang="en">
<head>
<title>Push Messaging & Notifications</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="../images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-title" content="Push Messaging and Notifications Sample">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="icon" href="../images/favicon.ico">
<!-- Include manifest file in the page -->
<link rel="manifest" href="manifest.json">
<body>
<h1>Push Messaging & Notifications</h1>
<p>
<button class="js-push-button" disabled>
Enable Push Messages
</button>
</p>
<br />
<br />
<h2>cURL Command to Send Push</h2>
<div class="js-curl-command"></div>
<script src="config.js"></script>
<script src="demo.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
'use strict';
var API_KEY = window.GoogleSamples.Config.gcmAPIKey;
var GCM_ENDPOINT = 'https://android.googleapis.com/gcm/send';
var curlCommandDiv = document.querySelector('.js-curl-command');
var isPushEnabled = false;
// This method handles the removal of subscriptionId
// in Chrome 44 by concatenating the subscription Id
// to the subscription endpoint
function endpointWorkaround(pushSubscription) {
// Make sure we only mess with GCM
if (pushSubscription.endpoint.indexOf('https://android.googleapis.com/gcm/send') !== 0) {
return pushSubscription.endpoint;
}
var mergedEndpoint = pushSubscription.endpoint;
// Chrome 42 + 43 will not have the subscriptionId attached
// to the endpoint.
if (pushSubscription.subscriptionId &&
pushSubscription.endpoint.indexOf(pushSubscription.subscriptionId) === -1) {
// Handle version 42 where you have separate subId and Endpoint
mergedEndpoint = pushSubscription.endpoint + '/' +
pushSubscription.subscriptionId;
}
return mergedEndpoint;
}
function sendSubscriptionToServer(subscription) {
// TODO: Send the subscription.endpoint
// to your server and save it to send a
// push message at a later date
//
// For compatibly of Chrome 43, get the endpoint via
// endpointWorkaround(subscription)
var sub = subscription.endpoint;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
//document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("POST", "myusers.php?id="+sub, true);
xhttp.send();
console.log(subscription.endpoint);
var mergedEndpoint = endpointWorkaround(subscription);
// This is just for demo purposes / an easy to test by
// generating the appropriate cURL command
showCurlCommand(mergedEndpoint);
}
// NOTE: This code is only suitable for GCM endpoints,
// When another browser has a working version, alter
// this to send a PUSH request directly to the endpoint
function showCurlCommand(mergedEndpoint) {
// The curl command to trigger a push message straight from GCM
if (mergedEndpoint.indexOf(GCM_ENDPOINT) !== 0) {
window.Demo.debug.log('This browser isn\'t currently ' +
'supported for this demo');
return;
}
var endpointSections = mergedEndpoint.split('/');
var subscriptionId = endpointSections[endpointSections.length - 1];
var curlCommand = 'curl --header "Authorization: key=' + API_KEY +
'" --header Content-Type:"application/json" ' + GCM_ENDPOINT +
' -d "{\\"registration_ids\\":[\\"' + subscriptionId + '\\"]}"';
curlCommandDiv.textContent = curlCommand;
}
function unsubscribe() {
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
curlCommandDiv.textContent = '';
navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
// To unsubscribe from push messaging, you need get the
// subcription object, which you can call unsubscribe() on.
serviceWorkerRegistration.pushManager.getSubscription().then(
function (pushSubscription) {
// Check we have a subscription to unsubscribe
if (!pushSubscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
isPushEnabled = false;
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
return;
}
// TODO: Make a request to your server to remove
// the users data from your data store so you
// don't attempt to send them push messages anymore
// We have a subcription, so call unsubscribe on it
pushSubscription.unsubscribe().then(function (successful) {
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
isPushEnabled = false;
}).catch(function (e) {
// We failed to unsubscribe, this can lead to
// an unusual state, so may be best to remove
// the subscription id from your data store and
// inform the user that you disabled push
window.Demo.debug.log('Unsubscription error: ', e);
pushButton.disabled = false;
});
}).catch(function (e) {
window.Demo.debug.log('Error thrown while unsubscribing from ' +
'push messaging.', e);
});
});
}
function subscribe() {
// Disable the button so it can't be changed while
// we process the permission request
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.subscribe({ userVisibleOnly: true })
.then(function (subscription) {
// The subscription was successful
isPushEnabled = true;
pushButton.textContent = 'Disable Push Messages';
pushButton.disabled = false;
// TODO: Send the subscription subscription.endpoint
// to your server and save it to send a push message
// at a later date
return sendSubscriptionToServer(subscription);
})
.catch(function (e) {
if (Notification.permission === 'denied') {
// The user denied the notification permission which
// means we failed to subscribe and the user will need
// to manually change the notification permission to
// subscribe to push messages
window.Demo.debug.log('Permission for Notifications was denied');
pushButton.disabled = true;
} else {
// A problem occurred with the subscription, this can
// often be down to an issue or lack of the gcm_sender_id
// and / or gcm_user_visible_only
window.Demo.debug.log('Unable to subscribe to push.', e);
pushButton.disabled = false;
pushButton.textContent = 'Enable Push Messages';
}
});
});
}
// Once the service worker is registered set the initial state
function initialiseState() {
// Are Notifications supported in the service worker?
if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
window.Demo.debug.log('Notifications aren\'t supported.');
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
window.Demo.debug.log('The user has blocked notifications.');
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
window.Demo.debug.log('Push messaging isn\'t supported.');
return;
}
// We need the service worker registration to check for a subscription
navigator.serviceWorker.ready.then(function (serviceWorkerRegistration) {
// Do we already have a push message subscription?
serviceWorkerRegistration.pushManager.getSubscription()
.then(function (subscription) {
// Enable any UI which subscribes / unsubscribes from
// push messages.
var pushButton = document.querySelector('.js-push-button');
pushButton.disabled = false;
if (!subscription) {
// We aren’t subscribed to push, so set UI
// to allow the user to enable push
return;
}
// Keep your server in sync with the latest subscription
sendSubscriptionToServer(subscription);
// Set your UI to show they have subscribed for
// push messages
pushButton.textContent = 'Disable Push Messages';
isPushEnabled = true;
})
.catch(function (err) {
window.Demo.debug.log('Error during getSubscription()', err);
});
});
}
window.addEventListener('load', function () {
var pushButton = document.querySelector('.js-push-button');
pushButton.addEventListener('click', function () {
if (isPushEnabled) {
unsubscribe();
} else {
subscribe();
}
});
// Check that service workers are supported, if so, progressively
// enhance and add push messaging support, otherwise continue without it.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(initialiseState);
} else {
window.Demo.debug.log('Service workers aren\'t supported in this browser.');
}
});
config.js
window.GoogleSamples = window.GoogleSamples || {};
window.GoogleSamples.Config = window.GoogleSamples.Config || {
gcmAPIKey: '<Your Public API Key ...>'
};
service-worker.js
'use strict';
self.addEventListener('push', function (event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
})
);
});
self.addEventListener('notificationclick', function (event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn’t close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(clients.matchAll({
type: "window"
}).then(function (clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow)
return clients.openWindow('/');
}));
});
demo.js
'use strict';
function Debug() {
}
Debug.prototype.log = function () {
var paragraphElement = document.createElement('p');
paragraphElement.textContent = Array.prototype.join.call(arguments, '');
document.querySelector('.js-log').appendChild(paragraphElement);
}
window.addEventListener('load', function () {
var logDiv = document.createElement('div');
logDiv.classList.add('js-log');
var heading = document.createElement('h2');
heading.textContent = 'Log';
logDiv.appendChild(heading);
document.body.appendChild(logDiv);
window.Demo = window.Demo || {};
window.Demo.debug = window.Demo.debug || new Debug();
});
after writing all this code what else can be done ??
I have not worked with gcm so finding hard time enabling,need help.
Yes, writing server-side code is required for "real" use cases. The curl command is just meant as a one-off test of the functionality.
https://github.com/gauntface/simple-push-demo is a good server-side starting point, assuming a Python App Engine backend.
Some examples
https://github.com/beverloo/peter.sh/tree/master/tests has very basic php version of the server side code. You can ignore all the encryption related stuff since that is only needed if you need to send payloads.
https://github.com/johnmellor/push-api-appengine-demo contains a python server side implementation which you can try in https://johnme-gcm.appspot.com/chat/
The actual sending code is pretty straight forward. Just send a JSON requests that looks like this
{
'registration_ids': registration_ids,
'collapse_key': "constantString",
}
Via a POST message to https://android.googleapis.com/gcm/send
The full API and some more examples (not specific to web push but still useful) in https://developers.google.com/cloud-messaging/
I created an HTML page that has some external links, when the user taps the external link how can I prompt the user that there is no internet connection available? Thanks.
You will probably need some JavaScript and Adobe's store api (for banners or store) or reading api (for html articles or web view in folios). The api provides the singleton object adobeDPS.deviceService which can tell you if the device is online or not. Additionally it provides a signal to indicate a change.
For each link element you register an onclick event handler that checks online state and either passes the click through or catches it and gives a message to the user.
The following code could work:
<script src="js/AdobeLibraryAPI.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", myLinkChecker.register, false);
var myLinkChecker = {
register: function(){
if (typeof(adobeDPS) !== 'object') {
console.log("Adobe Library not loaded :-(");
this.check = function() { return true } // Fallback
}
var linkList = document.querySelectorAll("a, map > area");
for (var i=0; i < linkList.length; i++){
var e = linkList[i];
if (e.hasAttribute('href'))
e.addEventListener('click', myLinkChecker.check, false);
}
},
check: function(ev){
if (adobeDPS.deviceService.isOnline) { // let <a> process the click
console.log("online");
return true
} else { // cancel click event and show message
event.stopPropagation();
event.preventDefault();
alert("Sorry, your device is not online")
return false;
}
}
}
</script>
Remote debugging html in DPS apps can be done using iOS developer apps and desktop Safari, or Android apps with Google Chrome.
I'm probably doing several things wrong as i am new to web programming but here is an attempt at some questions I have and then code below.
Fyi I'm working completely local in dreamweaver and just hitting f11 or whatever to test in a browser. I don't have anything uploaded to a sever except the channel file so if this is the main issue let me know.
For the channel file all I have is a completely empty file (not including html, body, etc.) just the below line.
<script src="//connect.facebook.net/en_US/all.js"></script>
Is that all I need? In order for this button to show up do I have to have all the index.html and .css etc. in the same location as the channel file?
Below is the code I'm using and below that the css for placement. No blue FB button shows up when I run test it in my browser.
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[hidden]', // App ID
channelUrl : 'http://mysite/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Here is the CSS that literally does nothing to move the above "login with facebook" text around the screen. All I'm seeing is regular text that says the above in the top left corner. No blue fb button
#charset "utf-8";
/* CSS Document */
*
{
margin: 0;
}
body
{
background-color: #FFF
}
#fb-login-button
{
position: relative;
float: right;
}
New code edit below from Purusottam's comments
again please forgive me for mistakes as I am a very new programmer.
the blue facebook login button is still not showing up only the "login with facebook" text in the upper left corner: see the image attached.
again I'm working completely local here..do I need to have all the files on a server for this button to show up?
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'hidden', // App ID
channelUrl : 'http://mysite.net/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true});
};
// Load the SDK Asynchronously
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div class="fb-login-button" show-faces="true" width="200" max-rows="5">Login with Facebook</div>
<script>
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
</script>
</body>
this is the current result:
http://s17.postimage.org/y8oz0htq7/help.jpg
As it turns out the reason this button wasn't showing up was because you need to have everything on a server. You can't test the facebook code local.
As I see your code there are couple of things that are missing. First you need to initialize oauth with FB. Below is the reference to the code.
window.fbAsyncInit = function() {
FB.init({appId: "hidden",
channelUrl : "Channel File",
status: true,
cookie: true,
xfbml: true,
oauth:true});
Loading of SDK will be simple as below.
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Once this is done then onclick of your login DIV button call a javascript function with following code.
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
Hope this helps you.