Following Facebook's Guide for the new open graph, I have managed to implement Timeline and "Read Article" Action on our WordPress-based site. But the guide makes you click a button to post the action. It might be silly question, but how do we make it automatically posting once user enters the article? Is that something that's happening AFTER the action has been approved by Facebook?
Does recommendation bar do that? Is that its purpose?
Yes, the Recommendations Bar does this. You could implement something similar in your own code but the Recommendations Bar supports a bunch of things out of the box like sending the activity only once the user scrolls X% of the way down and/or after a specified time interval.
Using this markup the action should be tracked in 5 seconds after the bar has loaded:
<div class="fb-recommendations-bar" data-href="{YOUR URL}" data-read-time="5"></div>
The Recommendation Bar is still in beta and won't work for anyone other than the App Administrators / Developers / Testers.
End-users will only get actions published once Facebook has approved the action. This usually takes a day or two if you provide adequate instructions. You will need to make sure users are able to remove their activity from within your site - this is a requirement for submitting a action:
Please make sure your users can
Turn sharing on/off globally on each page an article appears.
Remove articles they shared within your app on each page an article appears.
Only generate read actions when you're sure someone is interested in reading the article.
For my WordPress site, I used some code like:
setTimeout( function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// publish action to facebook
FB.api( '/me/{$action}', 'post', { article : '{$permalink}' } );
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}, 2000 );
Use some JavaScript to post the action after the page loads:
window.onload=postCook;
Related
I search a solution for the problem highlighted in this question.
Unfortunately, the accepted solution (which dates back to 21/11/2012) doesn't work anymore, as you can this in this demo.
Does someone know why?
Body
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '179378788777832',
status : true,
cookie : true,
xfbml : true
});
</script>
<div id="login">
You are not logged in to FB, Please click here to login.
</div>
<div id="container_notlike">
YOU DONT LIKE
</div>
<div id="container_like">
YOU LIKE
</div>
JS
var hideLogin = function(){
$("#login").hide();
}
var showLogin = function(){
$("#login").show();
}
var doLogin = function(){
FB.login(function(response) {
if (response.session) {
hideLogin();
checkLike(response.session.uid)
} else {
// user is not logged in
}
});
}
var checkLike = function(user_id){
var page_id = "40796308305"; //coca cola
var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
var the_query = FB.Data.query(fql_query);
the_query.wait(function(rows) {
if (rows.length == 1 && rows[0].uid == user_id) {
$("#container_like").show();
//here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.
} else {
$("#container_notlike").show();
//and here you could get the content for a non liker in ajax...
}
});
}
$(document).ready(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
hideLogin();
checkLike(response.authResponse.userID)
} else {
showLogin();
}
});
$("#login a").click(doLogin);
});
CSS
body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}
#container_notlike, #container_like, #login {
display:none
}
I search solution for hours but I didn't find anything what works.
Thank you for help.
Like Gating is not allowed anymore, that´s why it is not possible. The only reliable way to get that information is by authorizing a user with the user_likes permission and using /me/likes/[page-id]. But you will not get that permission approved for like gating in the Login Review.
People need to like something because they really want to, not because they get something for it:
Only incentivize a person to log into your app, enter a promotion on your app’s Page, or check-in at a place. Don’t incentivize other actions
Source: https://developers.facebook.com/policy/
Btw, you can also subscribe to the edge.create event to find out if a user just clicked your like button, but you can´t find out if the user liked it before: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
The problem on that code is that FQL is deprecated .
You can't do what you want to, and thats why changes are necessary .
Your code would work if your app is old, created before changes that turns like gating not allowed, but anyway, you cannot use that for show content. You can use that kind of implementation for creating an interactive experience, where you can for example changing the content, saying "Thanks for liking".. Or "Connect with us, liking our page.." ..
You can also think about interfaces, where you show up the page plugin, and just after user likes, you say Thank you ... and hide the page plugin ... But user must always be able to close without liking .
For checking if user likes a page, you need use :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") {
}
I repeat, One thing has nothing to do with another ..
You can check if user likes a page, but you cannot restrict content, based on this kind of resource .
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You will waste time trying do that for controlling content consumption .
Your app must be aprooved for asking user_likes permission, and its better you think about creating another experience for users, instead of submitting something like that .
I also think that content with good open graph for sharing, commenting and optional liking is very much more efetive, because i noticed that many people used to like and dislike the page after getting the content .
If you just... Prompt a FB.UI for sharing after 1 minute, for example, you will have much more results .. Aways positioning the page plugin in strategic places, people will naturally like your page ..
Than you can say change the page plugin element :
Thank you for liking, please share with your friends ....
Who would also like ...
Or use a callback for triggering the share dialog ..
OLD SCHOOL API CALL
The method FB.Event.subscribe() allowed apps to subscribe to a range of events, and define callback functions for when they fire, is deprecated .
Also FQL Query is deprecated .
For checking if user likes a page, you need user.likes permission, so you can try :
FB.api get on '/me/likes', and with the response ...
if (response.data[likes].name == "Coca-Cola")
or... better
if (response.data[likes].id == "40796308305") { }
There are other ways to check it, for exaple :
Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .
You can check if user likes a page using this call, but you cannot restrict content, based on this kind of resource .
2018 UPDATED SOLUTION
But nowadays, in 2018 the best method for is setting Webhooks .
Webhooks are a subscription based system between Facebook and your server. Your app subscribes to receive updates from Facebook via a specified HTTPS endpoint .
This allows your to app to receive notifications whenever there are updates to a chosen set of topics and their fields, so, you can track changes to most sections of the user's profile, such as About, Photos, Posts, Friends, and Likes.
Webhooks update notifications are sent as POST requests to a callback URL that you supply. Notifications can be lightweight, indicating only that a field has been updated, or can include the newly updated value .
webhooks user reference
Full list of user profile fields that you can subscribe to, such as About, Photos, Posts, Friends, and Likes.
webhooks page reference
The easiest way to set up your app to receive Webhooks updates is to use the App Dashboard's, check out Facebook Platform documentation for more info .
Webhooks documentation
I'm trying the Facebook login API for the first time on a web app deployed locally.
I init the API with the snippet in their documentation and have a button on my HTML page
<button type="button" onclick="fbLogin()">
Where fbLogin() is
function fbLogin() {
FB.login(function(response) {
console.log(response);
// handle the response
if (response.status === 'connected') {
// Logged into your app and Facebook.
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
}
}, {scope: 'public_profile,email,user_friends'}); // TODO: If the user doens't provide the email address prompt it for email. Also, don't ask for friend list when its a simple logout maybe? Specify why it's needed first. If it doesn't provide the friends access, re-prompt the request, explaining him it can have a more social experience if he accepts (can see when its friends win and congratulate with them, (we can also prom him to invite some friends))
}
When I try to log in the message
"You are using a display type of 'popup' in a large browser window or tab. For a better user experience, show this dialog with our JavaScript SDK without specifying an explicit display type. The SDK will choose the best display type for each environment. Alternatively, set height and width on your window.open() call to properly size this dialog if you have special requirements precluding you from using the SDK. This message is only visible to developers of your application."
shows up.
Screenshot
As you can see though, I am not specifying any specific display type; so I really don't know what to do with this message.
Other Google entries didn't have a solution for this problem.
What action do I need to take in order to remove it?
I created an Android App with PhoneGap:Build and the FB Connect Plugin. The app works fine and the FB Plugin, too. Just one tiny thing isn't working yet. I won't to post something after submiting a button which works, too. At the first time the user has to login and grant permissions to the FB App and them the post is published. That's the way it should be. And the next time the user submits the post should be published without the whole permission thing but this isn't working!? FB shows a message like "You already granted permission ... to the app." and the user has to push the Ok-button before the post is published???
Because I still haven't found an answer for my question, maybe I just do something wrong in my FB Javascript call? Here is the current code:
FB.login(function(response) {
if (response.authResponse) {
var data = {
...
}
FB.api('/me/feed', 'post', data, function(response) {
// Callback
if (!response || response.error) {
// ERROR
}
});
} else {
// ERROR
}
}, {scope: 'publish_stream'});
Well, to better understanding here a picture of the screen that apears every post:
http://i.stack.imgur.com/bZrde.png
Thx,
Daniel
I think the solution to this problem is to not include the login request every time you want to post something. You can check login status, and/or permissions, without performing a login. Then, if the user is not logged in, do the login first, and come back to the new post action.
I can't seem to get a post to work for our news items as FB News items. I was able to create a whole custom type and I discovered the News specific option after I had implemented a standard object:action setup successfully so conceptually this should work since we had all the pieces working before.
Originally we (GlobalPost) created out own app and Auth for our own name space gp_storyshare for our article object with a action read.
Then I ran over this
https://developers.facebook.com/docs/opengraph/news/
and sighed, since it wasn't linked to any of the other documentation and started over. Here is where I'm at.
Since then I have added in all the news specific OG tags and altered our og type to
without any name space
see good example page with tags here
http://www.globalpost.com/dispatch/news/regions/asia-pacific/111206/burma-myanmar-aung-san-suu-kyi
I have not done anything to our App, not sure if I need to make any auth changes or anything as the developer page says nothing and the object isn't mine to control. ** I have a feeling this is the issue but no real proof.**
on window.load I call newsRead() seen below, like I did before. This doesn't work.
function newsRead()
{
FB.api('/me/news:reads' +
'?article=http://www.globalpost.com/$node->path','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
I just have no idea what to try next. Any help is appreciated.
For any of the open graph actions (including built-in) you'll need the publish_actions permission, but it's still in beta at the moment and will only work for registered developers and testers of the app - I'm not aware of any other specific restrictions, but I think you're probably going to be posting 'Article' objects ( https://developers.facebook.com/docs/beta/opengraph/objects/builtin/ )
I used the old rest api for showing the Permission Dialog in Facebook before.
Now, with the new graph API, what can I do? (I'm in IFrame Apps).
I know that I can cheat and popup the permission in a seperate window:
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'offline_access'});
like that.. call the FB.login again (let say I want people to click on a different button and trigger the extended permisison dialog)
However,it looks ugly,and it doesn't look like a dialog.
Is there a way to generate the dialog? I try to figure out whether FB.ui can help but there is only little information about that.
In addition, I don't think the 'response' callback ever execute. Neither I click "Don't allow" or "allow", won't trigger any call back. any idea?
hihih..anyone can help me?
Finally. find out the solution from another website.
first. after FB.init( ... ); do that:
FB.provide("UIServer.Methods",
{ 'permissions.request' : { size : {width: 575, height: 300},
url: 'connect/uiserver.php',
transform : FB.UIServer.genericTransform }
} );
Then, whenever you need to call the permssion dialog, do that:
FB.ui({method: "permissions.request", "perms": 'email,offline_access'},
callBack);
It took me so long to figure out by looking at the FB object and find out there is UIServer with permissions.request then from that, I keep searching and find this solution. and FB.ui talks nothing about it.. and FB.provide is not documented. THANKS facebook.
You don't need to use javascript or any SDK for this although it would make it easier. You need only to redirect the user to a url like this:
https://graph.facebook.com/oauth/authorize?
client_id=...&
redirect_uri=http://www.example.com/callback&
scope=user_photos,user_videos,publish_stream
You should always redirect the user to the top window either with javascript or the link.
window.top.location = <login_url> or Login
If you are using the PHP SDK or the C# SDK you could have the sdk generate the url for you, but the process is the same.
Also, not that the redirect_uri has to be on the same domain as your iFrame application's url. This will cause Facebook to redirect your user outside of Facebook to your website, you then should redirect the user back to the app inside of facebook. For example:
User clicks login
user goes to Facebook login page
User clicks allow
Facebook redirects the user to http://www.example.com/callback
Your app redirects the user to http://apps.facebook.com/myapp/loggedin
One of the answers suggests a hack in which you call FB.provide() and then FB.ui() to pop up the extended permissions dialog. That solution doesn't work for me, but there is a documented solution now that does. Just call FB.login() to get the permissions you need.
FB.login(function(response){
if (response.authResponse) {
alert('success!');
} else {
alert('fail!');
}
},{scope: 'email'});
Even better, you can ask for extended permissions with the login button.