Develop Reference

Posting facebook status

I'm trying to figure out how to use PhantomJS. I wrote the script below to try and automate posting a Facebook status. As far as I'm aware, the script isn't even logging in, which I'm unsure why. My code is below:
var page = require('webpage').create();
page.open('https://www.facebook.com/', function() {
page.includeJs("//code.jquery.com/jquery-1.11.0.min.js", function() {
page.evaluate(function() {
// Login
$('#email').val('email_here'); // Set email
$('#pass').val('password_here'); // Set PW
$('#u_0_4').click();
// Set status
$('#u_0_1p').val('123');
$('#u_0_1f').submit();
});
phantom.exit()
});
});
I'm not sure why the script won't work, or even to get some sort of error message output so I can figure out why my script isn't working.

Here is code for Loging in facebook i have written this in javascript it login's and takes a screen shot of your facebook home page..
var page = require('webpage').create();
var fillLoginInfo = function(){
var frm = document.getElementById("login_form");
frm.elements["email"].value = 'your fb email/username';
frm.elements["pass"].value = 'password';
frm.submit();
}
page.onLoadFinished = function(){
if(page.title == "Welcome to Facebook - Log In, Sign Up or Learn More"){
page.evaluate(fillLoginInfo);
return;
}
else
page.render('./screens/some.png');
console.log("completed");
phantom.exit();
}
page.open('https://www.facebook.com/');
Find this on Github: https://github.com/manishjo/Automation/blob/master/facebook_automation/fbScreenshot.js
Still trying to find out after login how to Post msg.
Thanks,
Manish Joshi

FB.login pop up is blocked when page on load

I'm facing an issue when calling FB.login when page on load, the FB.login pop up is block by the browser. Currently I know I've to call FB.login after a user click event but I've to do it this way due to the business logic from client.
FB.api('/me/permissions', function(response2) {
var permsArray = response2.data[0];
var permsNeeded = ["user_events"];
var permsToPrompt = [];
for (var i in permsNeeded) {
if (permsArray[permsNeeded[i]] == null) {
permsToPrompt.push(permsNeeded[i]);
}
}
if (permsToPrompt.length > 0) {
promptForPerms(permsToPrompt);
}
});
var promptForPerms = function(perms) {
FB.login(function(response) {
}, {scope: perms.join(',')});
};
Is there any solution to call FB.login() without user click event? Or is there any tweak for this? Appreciate for the help.

You're not going to be able to code your way around the popup blocker, unfortunately.
The way to solve this is by redirecting the user to the Facebook permissions dialog when the page loads as described in the docs for manually building a login flow.
You first need to detect if the user is authenticated / connected with your application already and only redirect if they are not connected. This is best done in the window.fbAsyncInit function like this:
window.fbAsyncInit = function() {
var myAppID = 'YOUR APPLICATION ID';
FB.init({ appId: myAppID });
FB.getLoginStatus(function(response) {
if ('connected' != response.status) {
window.location.href = 'https://www.facebook.com/dialog/oauth' +
'?client_id=' + myAppID +
'&scope=user_events' +
'&redirect_uri=' + encodeURIComponent(document.URL);
} else {
alert('welcome to my app');
}
});
};
The other option is to adjust your user journey slightly; perhaps if the user is not connected then you could display an overlay with a message asking them to authenticate and a button which when clicked calls FB.login.

FB.Event.subscribe not working

I am working on a website and wanted to give my users an option to log-in using facebook.
I am successful at logging in but events are not working for me.
Whenever i logged in, the function "login" was not called.....I have tried assigning this login function to other button for checking it manually, the alert worked but it didnt get any response.
Here my Code:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: MY_APP_ID, status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.login', function(response) {
login();
});
};
function login(){
FB.api('/me', function(response) {
alert('You have successfully logged in, '+response.name+"!");
});
}
(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>
<fb:login-button autologoutlink='true'
perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
This is the facebook application setting:

Have you tried loading the all.js script in the <head> instead of #fb-root? Use the following:
(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/es_LA/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
instead of:
(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);
}());
[EDIT: updated sample]
The SDK inserts elements into fb-root which expect to be positioned relative
to the body or relative to an element close to the top of the page.
Which might replacing the SDK source as well.
resource: Facebook Javascript SDK.
--
can you try to subscribe to other event and see if its work
FB.Event.subscribe('auth.statusChange', function(response) {
// do something with response
});
From Facebook documentation (try subscribing this instead)
auth.authResponseChange
This event is fired for any auth related change as they all affect the session: login, logout, session refresh. Sessions are refreshed over time as long as the user is active with your app.
auth.statusChange
Typically you will want to use the auth.authResponseChange event. But in rare cases, you want to distinguish between these three states:
1. Connected
2. Logged into Facebook but not connected with your application
3. Not logged into Facebook at all.

Scenario 1 (New User)
Facebook Login Button's Text: "Login"
User State: User not connected
Now user clicks on login and completes the login flow.
Button's text changes to "Log Out" and this is the only time when'auth.login' triggers.
FB.Event.subscribe('auth.login', function (response) {
// do something with response
if (response.status === 'connected') {
// user connected
FB.api('/me', function (response) {
alert(response.name + " " + response.id);
});
}
});
Scenario 2 (Existing User)
If a user who is logged in to Facebook and has already authorized your app visits your app then the user automatically get's connected and Login Button's text is "Log Out".
In this case add the following code into the fbAsyncInit function:
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
// connected
alert(response.name + " " + response.id);
}
});
FB.getLoginStatus is called everytime the page refreshes but you can also call it anytime in your app by embedding it into a javascript function.

Facebook SDK loading forever

i'm loading the facebook js sdk via the window.fbAsyncInit function. it's working fine in chrome but in safari and firefox FB.Auth._loadState has the state 'loading' forever and non of the FB.* functions are working.
anyone experiencing the same problem? do i need to set some special headers?
any help would be appreciated.
update
<div id="fb-root"></div>
<script>
var app_id = <?=conf_app_id?>;
window.fbAsyncInit = function() {
FB.init({appId: app_id, status: true, oauth: true, cookie: true, channelUrl: 'https://www.example.com/channel.html'});
}
$(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>
i think it might be an issue with the loadbalancer :( does anyone know if facebook is crosschecking the ip/session or something after loading the sdk?!

How can i track Facebook like on my website via Google Analytics?

Going out of my mind on this one.
I have Facebook like buttons on my ecommerce store. I have set them up using the XFBML and JAvascript SDK.. I am using the correct Meta OG properties.. everything work fine for facebook.
Now this is where it goes wrong: I was trying to follow this guide: http://www.websharedesign.com/blog/how-do-i-track-that-little-facebook-like-button-in-google-analytics.html but it doesn't work for me as there a couple of differences. Firstly Im using the Async version of Google analytics... Secondly, my facebook like buttons get the URL automatically (In this article the user has manually put in the href...) So i changed the code to add in the gaq.push method instead;
I have tried adding:
FB.Event.subscribe('edge.create', function(href, widget) {
_gaq.push(['_trackEvent', 'facebook', 'like', href]);
});
into the main Async Facebook script, i have tried putting this on its own at the bottom of the page.. I have even tried adding this as an onclick= on the actual fb:like.
The only time i got it to register anything was when i accidentally added that code in my main Google analytics and then it generated a report for every page view as an event...
Please help!!
EDIT this is all my code: I have GA at the top of my page...
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'xxxxxxxxxxxxxxx']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Then below this FB is defined at the top of the body:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', 'test']);
});
};
(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>
You see I have a put the gaq.push in the facebook code above - with an alert. Now this alert is fired when i click like, but the trackEvent is not sent to google? (Also, ideally where it says 'test' I would like the URL of the page...)

Thanks guys.. after 7 hours i worked out what the problem was... I had my IP hidden from Google Analytics as i didn't my test visits to mess up the stats of th regular pageviews.. So i learned the hard way that it also hides your IP addres from track Events! For reference the code that I supplied before works perfectly.. the only thing I changed was the changing the 'test' to url to get the href of the page being liked, so my final Facebook code was:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxxxxxxx', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
alert('Facebook Like');
_gaq.push(['_trackEvent', 'facebook', 'Facebook like', href]);
});
};
(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>
What a muppet! Thanks for your help though!