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.
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'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 building a basic AngularJS Login page and the $window.location.href did not re-direct the page to a new html in my system, hosted by WAMP. I even tried re-directing it to google. Nothing happens. I tried all the available solutions here and nothing seems to work. Any solutions ?
JS followed by HTML
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.submit = function() {
if ($scope.username && $scope.password) {
var user = $scope.username;
var pass = $scope.password;
if (pass == "admin" && user == "admin#admin.com") {
alert("Login Successful");
$window.location.href = "http://google.com"; //Re-direction to some page
} else if (user != "admin#admin.com") {
alert("Invalid username");
} else if (pass != "admin" && user == "admin#admin.com") {
alert("Invalid password");
}
} else {
alert("Invalid Login");
}
}
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="login.js"></script>
<link rel="stylesheet" href="login.css">
</head>
<body ng-controller="MainCtrl">
<form>
<label>Username:</label>
<input type="email" ng-model="username" class="lab1" />
</br>
</br>
<label></label>Password:</label>
<input type="password" ng-model="password" class="lab2">
</br>
<button type="submit" ng-click="submit()" class="buttonclass">login</button>
</form>
</body>
</html>
In angular js you can use $location. Inject it in your controller :
app.controller('MainCtrl', function($scope, $location) { ... }
And if you want to redirect to google use its url() method :
$location.url('http://google.fr');
you can also use path() method for relative url :
$location.path('home'); // will redirect you to 'yourDomain.xx/home'
https://docs.angularjs.org/api/ng/service/$location
It is worth noting the current documentation for $location. Specifically the quote:
When should I use $location?
Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.
What does it not do?
It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.
If you need to redirect the browser to a new page, $window.location is definitely recommended.
Try this,
var homeApp = angular.module('HomeApp', []);
homeApp.controller('HomeController', function ($scope, $http, $window) {
$scope.loginname = "Login To Demo App";
$scope.login = function () {
var name = $scope.username;
var pwd = $scope.password;
var req = {
method: 'POST',
url: '../Account/LoginAccount',
headers: {
'Content-Type': undefined
},
params: { username: name, password: pwd }
}
$http(req).then(function (responce) {
var url = '';
if (responce.data == "True") {
url = '../Account/WelcomePage';
$window.location.href = url;
}
else {
url = '../Account/Login';
$window.location.href = url;
}
}, function (responce) {
});
}
});
You can use $window.location.href in AngularJS
app.controller('MainCtrl', function ($scope,$window) {
$scope.formData = {};
$scope.submitForm = function (formData){
$window.location.href = "jobs";
};
})
Angular has its own location handler named $location which I prefer to use in angular app;
app.controller('MainCtrl', function($scope, $location) {
inject to your controller and use as following;
$location.path('http://foo.bar')
My two cents -
I could not get $window.location.href or $location.path to work to navigate away from a page. In the documentation for $location (under caveats) it says:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.
$location Caveats
Documentation for $window is... lacking. Regardless, neither of the services worked for me in the controller (though $location.path works in my index.run file).
In this project I am using ui-router, so doing this worked:
$state.go('state.name'); -- where state.name is the string of the state/page name to which the user wants to go, i.e. 'index.users'
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
I have a form on a facebook page. seen here: http://on.fb.me/ocsqMR
It is an iframe tab but the form at the bottom is not rendering. When using IE8 or 9, the form does not appear. When using chrome, firefox, or safari, the form does appear. Using chrome I can see it when I do inspect element but it's there but not visible.
Ideas?
Looking at the source code for your page you need to make a few changes and additions.
Make sure you declare a DOCTYPE for the page.
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Next, remove the onLoad attribute from the body tag:
<Body onLoad="FB.Canvas.setSize({width: 515, height: 1350})"><Div id="fb-root"></div>`
And also, you'll need to update this code:
Make sure you're using the app ID from https://developers.facebook.com/apps for your app.
You'll also want to make sure the OAuth attribute is in your call.
<Script src="http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<Script type="text/javascript">
FB.init({
appId: FB_APP_ID,Status: true,Cookie: true,Xfbml: true
});
window.fbAsyncInit = function().{
fb.canvas.setautoresize();
}
</Script>
Here is an example of how it should look:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'PUT THE APP ID FROM https://developers.facebook.com/apps HERE',
status: true, cookie: true,
xfbml: true, oauth: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>