FB Open Graph script with default 'Watch' action does not work - javascript

//Update:
With help I managed to catch some errors which fixed the token issue. I've updated the code to reflect that. The code still doesn't produce an event on the timeline though so I'm leaving the question up.
Original question:
I'm trying to build a simple script using the Open Graph API that will push a link to a visited page (containing a movie) to Facebook, once the visitor hits the page.
I'm not using a custom action and object, but the standard Watch action (https://developers.facebook.com/docs/opengraph/video/) and Video.movie object.
I came up with this based on FB's example code:
<!-- first login-button with scope publish_actions: -->
<fb:login-button show-faces="false" width="200" max-rows="1" scope="publish_actions" ></fb:login-button>
<!-- Then script that should push update to timeline: -->
<script type="text/javascript">
function fbPublish(){
FB.api(
'/me/video.watches',
'post',
{ 'video.movie': '<?php the_permalink(); ?>',
'access_token': 'blablabla' },
function(response) {
if (!response || response.error) {
alert('Nope.');
} else {
alert('Yes.'); // any stuff
}
});
}
This triggers the alert 'Nope'.
I have added the Watch action through curl.
Any ideas as to what could be going on?

You still need to FB.login before you can automatically post to the user's timeline.
FB.login(function(response) {
// Post the action
}, {scope: 'publish_actions'});
While I didn't check the validity of your actual code to post the action, you problem is that before you can do this, you'll need the user's permission. The publish_actions permission is the one you'll need but I think its already included in new Auth Dialogs. Just leave it there to be sure.
Do the FB.login code first, you'll get a popup "Allow" dialog, after that, is the time you can freely post in the user's wall. It's a part of the security, Facebook users wouldnt want you posting on their timeline without them knowing.

Related

How to change the login button to logout when user loggs in via iframe form

I have not been able to find a close enough answer to this question to find a solution that works.
I am working in a custom website, and at various points, the user login status is checked before the user can proceed with the action. If they are not logged in, they are asked to login first, and then they are allowed to proceed. To keep the user experience clean, most of this is done through in-page pop-ups that contain an iframe.
The login functionality is working perfectly, but when the user is done with the action and closes the window, the "login" button still shows, making it appear that they have not logged in. They actually have to refresh the page to see their login status. I would prefer, however, that the login status to appear seamless as well.
Currently, I have the login link contained in a div in the parent page:
<div class="top_nav">
<div class="contest_buttons">
<div class="c_button bkg_gray c_bottom w_quarter" id="#login_tab">
<?php echo showif(!empty($_SESSION['userID']),'
Logout','
Login'); ?>
</div>
<div class="c_button bkg_gray c_bottom w_quarter" id="#profile_tab">
<?php echo showif(!empty($_SESSION['userID']),'
My Profile','
Register'); ?>
</div>
<div class="c_button bkg_gray c_bottom w_half">
Wayne Daily News
</div>
</div>
</div>
The closest I have gotten to anything that could work is:
$('#login_tab', window.parent.document).html('Logout');
I'm not really sure where to go from there.
At the least, I want the #login_tab to read "Logout" when login has completed, but being able to update the #profile_tab to read "My Profile" would be great as well.
I am a PHP programmer that is just dabbling in JS and jQuery so far, so even pointing me in the right direction might be helpful. :)
I found something that shows some promise. It's not as clean as I would like, but this code seems like it might hold a solution...
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto(
{
callback: function(){
document.location.reload(true);
}
})
});
</script>
Because I am using PrettyPhoto to create the popups and iframes, I may be able to integrate a method or call another script that would handle my needs and it would occur on the event that the window is closed by the user.
What would it take to make something work this way?
There are many ways you could accomplish this.
You could have the login button on the page(s) inside iframe.?
or You could create the html for the 2 buttons inside php vars and call through said button links.?
However I would try using JS & CSS, check out this simple example of Button state switching.
http://css-tricks.com/swapping-out-text-five-different-ways/
After reading your latest comments, Maybe try to create login buttons depending on session state.
eg:
if( !isset($_SESSION) ){
//echo login links here
}
also don't forget to use
session_start();
in the page shown in iframe.

Javascript Ui share dialog post link without og meta information of page when if shared manually does

I have problem with Facebook ui share dialog (visit https://developers.facebook.com/docs/sharing/reference/share-dialog).
I'm using this code for share a page (where is setting the correct og metatags) with this Javascript Code:
FB.ui({
method: 'share',
href: '{{ user_share_path }}'
}, function(response){
if (response && !response.error_code) {
alert('Thank you');
} else {
alert('Ops! Something goes wrong');
}
});
When the user shares link with the Javascript Facebook code the result in user wall is a very poor content element with just the title. If the user copy manually the link "user_share_path" to their wall everything is fine and every og metatag in the page is showed in post.
I've also tried to use share_open_graph method but I had the same effects.
Here there is a screenshot with the two post, once with JS the other manually posted:
Any idea why? Thanks

Facebook like actions - Check if URL is liked

I've read the documentation about like actions, but can't get this to work.
I'm trying to get a status if a logged in user is liking an URL with the Javascript SDK. But doesn't get any progress.
How could this be done?
Below I use this code to "like" an URL.
FB.api(
'me/og.likes',
'post',
{
object: liked_url
},
function(response) {
// handle the response
}
);
HTML
<div class="like_button">Like This</div>
And when I click the above like button it likes the URL and add a class to the above div, but I want to be able to refresh the page and still have the "liked"-class on the objects that are liked.
I might have picked you up wrong but you could try using this to create your like button

Facebook Send Dialog identify whether send or cancel has been clicked

I'm using the Facebook Send Dialog to send messages to friends. As documented here: https://developers.facebook.com/docs/reference/dialogs/send/ and am using a link like the one in Facebook's example:
https://www.facebook.com/dialog/send?app_id=123050457758183&name=People%20Argue%20Just%20to%20Win&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=http://www.example.com/response
On the page I have specified as the redirect_uri I am displaying text saying: "Your message has been sent". However I've realised that you see this page even if you've clicked cancel in the Facebook dialog.
Is there any way to determine whether save or cancel has been clicked?
Update: I've found a workaround using the FB.ui method which solves the immediate issue I was having. I would still be interested to know if anyone has a better solution using a Send Dialog link like the one above.
I've found a work around by using Facebook's Javascript SDK's FB.ui method.
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
});
N.B. display must be set to popup for this to work!
As it does not require a redirect_uri, the issue of knowing whether save or cancel has been clicked is not an issue. If however you do wish to know this, you can access a response object:
FB.ui({
method: 'send',
name: 'People Argue Just to Win',
link: 'http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html,
display: 'popup'
},
function(response) {
if (response){
// save has been clicked
} else {
// cancel has been clicked
}
});
Small complement to Andy's response:
the response-object does not give much info about what has been sent, actually (returns [] in console), but the mere EXISTENCE of the reponse object indicates the "SEND" button has been pressed
FB.ui(obj, function (param) {
if (param) {
// The "SEND" button has been pressed
}
else{
// The "Cancel" button has been pressed
}

Create Facebook Dialog Popup with Link

I am trying to create a Facebook Dialog using the new improvements that were released last week.
http://developers.facebook.com/blog/post/437
What I want is to be able to have a link so when it's clicked a popup is generated, or have it show up in the page. I've tried putting it in a DIV and then showing with JQuery but it won't center on the page. I've gotten the code to work for posting to the users wall... just don't know how to either format the JS code and or create the link for the popup.
Thanks in advance!
As long as you have the Facebook js on your page, it's as easy as this to create a friend invitation:
<script>
FB.ui(
{
method: 'friends.add',
id: fbid // assuming you set this variable previously...
},
function(param){
// If you have FireFox + FireBug or Chrome + developer tools:
console.log(param); // log response to javascript console
// If they cancel params will show:
// {action:false, ...}
// and if they send the friend request it'll have:
// {action:true, ...}
// and if they closed the pop-up window then:
// param is undefined
}
);
</script>
You can test this by using the javascript console app on Facebook:
http://developers.facebook.com/tools/console
Paste in the script above, including the tags, or click the "Examples" button on the bottom of the text area and find the "fb.ui — friends.add" example.

Categories