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>
Related
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!
I'm trying to write a polling web app that checks Google Drive and automatically downloads files without user interaction.
Using ContentService I have managed to get things working when I place the code in the doGet function.
However this only works once and there does not appear to be a way to refresh or reload the page automatically on a timer event.
Using a SetTimeout on the client side javascript I can get a function on the server side to automatically trigger at certain intervals but then I am stuck with what to do with the output from ContentService.
The on Success call back will not accept the output from createTextOutput.
My solution does not not need to be deployed and I'm happy to execute from the editor if that expands my choices.
So once I have the output from createTextOutput on my server side what am I supposed to do with it to get it back to the client in order to cause the file download?
I have included the code if that helps.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
setTimeout(
function ()
{
document.getElementById('results').innerHTML = 'Event Timer';
google.script.run
.withSuccessHandler(onSuccess)
.withFailureHandler(onFailure)
.fetchFromGoogleDrive();
}, 60000);
function onSuccess(sHTML)
{
document.getElementById('results').innerHTML = 'File Downloaded ' + sHTML;
}
function onFailure(error)
{
document.getElementById('results').innerHTML = error.message;
}
</script>
</head>
<body>
<div id="results">Waiting to DownLoad!</div>
id="Fetch">Fetch!</button>
</body>
</html>
function doGet() {
Logger.log('doGet');
return HtmlService.createHtmlOutputFromFile('form.html');
}
function fetchFromGoogleDrive() {
//Logger.Log('fetchFromGoogleDrive');
var fileslist = DriveApp.searchFiles("Title contains 'Expected File'");
if (fileslist.hasNext()) {
//Logger.Log('File found');
var afile = fileslist.next();
var aname = afile.getName();
var acontent = afile.getAs('text/plain').getDataAsString();
var output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.CSV);
output.setContent(acontent);
output.downloadAsFile(aname);
return afile.getDownloadUrl();
}
else
{
//Logger.Log('No File Found');
return 'Nothing to download';
}
//Logger.log('All files processed.');
}
EDIT: Different answer after clarification.
If this is intended to run automated as a webapp what I would do is return the getDownloadUrl and create a new iFrame using that that as the source.
Apps Script
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function getDownloadLink(){
//slice removes last parameter gd=true. This needs to be removed. slice is a hack you should do something better
return DriveApp.getFileById("0B_j9_-NbJQQDckwxMHBzeVVuMHc").getDownloadUrl().slice(0,-8);
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p id="dlBox"></p>
</body>
<script>
function buildLink(res){
var dlBox = document.createElement("iframe");
dlBox.src = res;
document.getElementById("dlBox").appendChild(dlBox)
}
//automate this as you need
google.script.run
.withSuccessHandler(buildLink)
.getDownloadLink();
</script>
</html>
I've a problem using disqus in my cordova/angularjs mobile app.
My app needs to open a blog page and shows comments using disqus.
Checking on StackOverfolow, Google and Disqus's website I found this tutorial (https://help.disqus.com/customer/portal/articles/472096) that I followed.
First I created a static page to open comments like this one https://github.com/disqus/DISQUS-API-Recipes/blob/master/mobile/js/mobiletemplate.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<div id="disqus_thread">
</div>
<script type="text/javascript">
var params;
var disqus_url;
var disqus_title;
var disqus_shortname;
var disqus_identifier;
window.onload = function () {
var match,
pattern = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
query = window.location.search.substring(1);
params = {};
while (match = search.exec(query))
params[decode(match[1])] = decode(match[2]);
if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
alert("Required arguments missing");
}
else {
loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
}
};
function loadComments(shortname, url, title, identifier) {
disqus_url = url;
disqus_title = title;
disqus_shortname = shortname;
if (identifier !== undefined)
disqus_identifier = identifier;
else
disqus_identifier = "";
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
}
</script>
<noscript>
Please enable JavaScript to view the
<a href="http://disqus.com/?ref_noscript">
comments powered by Disqus.
</a>
</noscript>
<a href="http://disqus.com" class="dsq-brlink">
blog comments powered by
<span class="logo-disqus">
Disqus
</span>
</a>
</body>
</html>
Then I open the page above using Cordova In App Browser (https://github.com/apache/cordova-plugin-inappbrowser) and I handle the login like suggested in the tutorial
$cordovaInAppBrowser.open($scope.dsqUrl, '_blank', options).then(function(event) {
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event) {
console.log(event);
if (event.url === 'http://disqus.com/next/login-success/') {
console.log("Login OK");
$cordovaInAppBrowser.open($scope.dsqUrl, '_blank', options).then(function(event) {
// success
}).catch(function(event) {
// error
});
};
});
}).catch(function(event){
//error
});
The result is:
open the comments page
click on login
fill the login form
redirect (automatically) to the comments page
Now I've to be able to comment, but the comments page ask me to login another time....
If I try to login, because the cookies, the page knows that I've already logged in and redirect to comments page
The problem is that the comments page ask me always to login.
If I click on profile button it opens correctly my profile so the login has been done successfully
The same issue if I close the comments page and I reopen it
Do you know how can I fix this issue?
Thank you very much in advance
Michele Riso
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.
I use the html code in facebook developer but it can't post the message I put in the website
there just appear a windows that you can enter some words
but the
'Facebook for Websites is super-cool' doesn't appear in the window
(just like the website did)
I have applied a appid, is there anything wrong?
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
According to this facebook platform update, since July 12 the message field is no longer supported.
You need to do:
var params = {};
params['message'] = 'Message';
params['name'] = 'Name';
params['description'] = 'Description';
params['link'] = 'http://apps.facebook.com/summer-mourning/';
params['picture'] = 'http://summer-mourning.zoocha.com/uploads/thumb.png';
params['caption'] = 'Caption';
FB.api('/me/feed', 'post', params, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Published to stream - you might want to delete it now!');
}
});
Ref link: http://daipratt.co.uk/using-fb-api-to-make-a-full-post-to-a-users-wall/
Hope it helps
<div id="fb-root"></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>
<p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
<p id='msg'></p>
<script>
FB.init( {
appId : "YOUR_APP_ID",
status : true,
cookie : true
});
function postToFeed() {
// calling the API ...
var obj = {
method : 'feed',
link : 'https://developers.facebook.com/docs/reference/dialogs/',
picture : 'http://fbrell.com/f8.jpg',
name : 'Facebook Dialogs',
caption : 'Reference Documentation',
description : 'Using Dialogs to interact with users.'
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: "
+ response['post_id'];
}
FB.ui(obj, callback);
}
I suggest you to go through the documentation first...
I would suggest you to use the facebook comment plugin instead. It free and easy to implement.
if the user really like your page, they will write something good to you.
Do check out my website -> www.wootube.woolei.com