Using v2.0 of the Facebook API, the share dialog popup doesn't close after the "Cancel" or "Post to Facebook" button has been selected. Previously, a 'redirect_uri' param was passed to the Feed endpoint, and this could be used to close the window. When trying to pass this param to the Share endpoint, however, I get the message: 'When using FB.ui, you should not specify a redirect_uri.'
Is there any way to force the popup window to close? And if not, might there be a problem with the API request? The link DOES get shared when "Post to Facebook" is selected, so I don't think it's an issue with login or permissions.
Here is what the API call looks like:
FB.ui({
method: 'share',
href: location.href,
)}, function(response){});
Try adding a preventDefault. I had the FB.ui action being triggered when an anchor tag was clicked. When I clicked the link, the page refreshed. Then when I'd click 'Post to Facebook' in the popup, I presume that the callback had nowhere to go.
What worked for me:
handleFbShare = (e) => {
e.preventDefault();
FB.ui({
method: 'share',
display: 'popup',
href: 'https://your-url/',
}, function(response){});
}
(...)
<a href="" className='button__facebook' onClick={this.handleFbShare}>Share on Facebook</a>
Hope that helps!
Related
I want to use facebook javascript sdk to share a page on facebook, and when a user share successfully I want to be able to track that on the current page without refreshing current page.
Now I have this code bellow, that opens the dialog successfully and share as well, but the popup doesn't close when I share or cancel. it only close when I use the cross in the top right corner.
Second problem is, I don't get notified when the user share successfully.
Note : if I use the code that fires the share dialog in $document.ready() instead of the click event on the open link, then it closes correctly, and call the attached functions as well where I console.log(response); but it has the same results for both successful share or cancel.
If I use feed dialog instead, the problem with closing the dialog stays, however the notifications is fine, I get notified back with the post_id, and that is perfect but I want to use share dialog not feed.
Bellow is all the code, sorry I couldn't make a jsfiddle, I tried but couldn't get facebook app work there.
Open
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="fb-root"></div>
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk.js', function(){
FB.init({
appId: '905779996145989',
version: 'v2.3'
});
});
$('.share').click(function() {
/*FB.ui({
method: 'feed',
link: 'https://developers.facebook.com/docs/',
caption: 'An example caption'
}, function(response){
console.log(response);
});*/
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){
console.log(response);
});
})
});
</script>
So this is probably a simple problem I'm not seeing but here goes.
FB.ui({
method: 'share',
href: $location.absUrl(),
}, function(response){});
this makes the popup come out and everything, however, after I click post and check my facebook wall. Nothing is actually posted.
What could be the issue?
I have an iframe which contains the link as shown below:
<a href="javascript:void(0)" onclick="FB.ui({method: 'send', picture: pic, name: name, description : description , to: [xxxxxxxxxx],link:'http://link.com'}, function(response) {if (response) {alert('cool!')}})>Click me</a>
Any idea about how to make the FB.ui send dialog pop not in the iframe but in the parent window?
Thanks!
There is a 'display mode' for FB.ui ,set it to what you want.For more details check,
http://developers.facebook.com/docs/reference/dialogs/#display
I am trying to show a 'Post to Your Wall' feed dialog with the following code in a facebook iframe app:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'249725835046216', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
});
</script>
The problem is that it is appearing in a new popup window like this:
Instead of appearing as like this without appearing in a popup window:
I don't want the feed dialog to appear in a new popup windows because in most modern web browsers where popups are blocked. I don't know why this is happening. Please help.
I'm pretty sure that you get a popup if the user has not authorized your application. Facebook made it work that way for security reasons. If you prompt for authorization first, then you should get the inline dialog.
Note that the request for authorization will itself be a popup, but you only have to have that happen once. I have things working this way, the way you want, in the someecards Facebook app. Feel free to grab the javascript code, it's not specific to the app.
Try this, put FB.ui inside FB.getLoginStatus:
FB.getLoginStatus(function(response) {
if (response.authResponse) {
FB.ui({
method: 'feed',
...
display: 'dialog'
});
}
});
in my case the problem seems to have been solved by seting display to async
display: 'async',
i think this is default for page tabs and canvas, but from time to time, instead of appearing within the main window it would load a new popup..
after setting it though (page tab in my case) i haven't noticed any pop up coming up since then..
I know this is a bit old, but I stumbled across this page when trying to solve this problem for myself and none of the answers here worked for me.
For the benefit of anyone else who has this problem, this was happening for me because I was trying to call the dialog on page load. Moving it to a user triggered event (such as a click) resolved it for me.
I have the same UI issue and I don't like the pop up window too.
I just found a link.
It helps us to redirect the page in same window. But it does not solve our problem perfectly.
There's a "URL Redirection" section in the docs for the Feed Dialog:
https://www.facebook.com/dialog/feed?
app_id=145634995501895
&display=popup&caption=An%20example%20caption
&link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https://developers.facebook.com/tools/explorer
So you can do window.location=(this url) in Javascript, setting the redirect_url correctly, and this should work without a popup.
Note that the Feed Dialog is now deprecated in v2.0, so check out the Share Dialog instead:
To share a link:
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
To share an Open Graph story:
https://www.facebook.com/dialog/share_open_graph?
app_id=145634995501895
&display=popup
&action_type=og.likes
&action_properties=%7B%22object%22%3A%22https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F%22%7D
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
The 'display=popup' bit affects how the share screen looks, it doesn't open a new window. Possible values for display are:
async, iframe, page, popup, touch, wap
I'd simply like to make an image-click in my FBML page to trigger facebook's ajax dialog box. How do I accomplish this?
I have an FBML tab on my facebook fan page. In the content of that tab, I would like an image to function as a share button.
By following these directions, I can customize a share button, but the image itself that the user clicks on is not customizable. I want to be able to provide my own image, not use the silver share button provided by facebook.
By following these alternative directions I can use my own image. Perfect! Except on thing... Share.php opens as a page instead of as a javascript dialog. So when the user completes the dialog, it closes the whole page!
Here's what it looks like right now. Sorry, you have to click "Like" to see the share image. When you click the image, the share page opens, but I just want the ajax dialog.
I believe you can do what you want using the facebook feed dialogs:
http://developers.facebook.com/docs/reference/dialogs/
this is the javascript that you will have to bind to your onClick event of your link:
FB.ui(
{
method: 'feed',
name: "Name",
link: "http:\\www.facebook.com\pages\#\page_id_here",
picture: "http:\\path\to\image\file.jpg",
caption: "Caption",
description: "Description",
message: "Message"
},
function(response) {
//callback function
}
);