We need to display FB share dialog. It can be done with either FB.ui as:
FB.ui({
method: 'share',
display: 'iframe',
href: '{{postUrl}}'
});
or even using a link/REST.
I can add a second argument to FB.ui() as function(result){...}, and FB JavaScript SDK will invoke that as a callback after the dialog is closed [either with a share taking place, or without].
How could I detect that the dialog is displayed, not dismissed?
Thank you
You can only be sure if someone shared something if you authorize the user with the publish_actions permission. In that case, you will get the Post ID in the callback, as you can read in the docs: https://developers.facebook.com/docs/sharing/reference/share-dialog#response
Keep in mind that you are not allowed to reward users in any way for sharing, or incentivize sharing. You will not get publish_actions approved by Facebook just for checking if the user shared something.
Edit 1: If you just want to know if the dialog is visible...well, it is visible when you call FB.ui, and it is not visible anymore then the callback gets called.
Edit 2: I don´t see any use case for it (please do tell), but if you want to know if the dialog showed up (and did not get blocked by a popup blocker, for example), then i would say it is impossible to detect.
Related
My site allows each user to share a link, say http://www.my-site.com, on facebook.
I'd like to count the number of times each user shared my url, as well as the date of the last share. This would have been pretty easy given one would have used the FB SDK (excuse the coffeescript):
link = "my-site.com"
FB.ui
method: "feed"
link: link
from: from
, (response) ->
unless response is null or response is undefined
$.ajax
dataType: "json"
data: response
url: some-url
success: (data, textStatus, jqXHR) ->
// Do stuff
I could have even let myself get more create and use one of facebook's event subscriptions, such as:
FB.Event.subscribe "message.send", message_send_callback
However, as far as I know, none of the dialogs offered by FB.ui() allows the user to choose which group/wall/friend he would like to post to, which is mandatory as far as I'm concerned. Fortunately, the non-SDK share dialog DOES allow for exactly that, but presents a bigger challenge when it comes to getting the post event and the response, as it forces me to add an onload event listener to the popup window (var popup = window.open(...); popup.addEventListener...), and then add another event listener to the post event, which is of course challenging because the popup opens another domain, facebook's, which I have no control over.
Is there a way to do what I'm trying to accomplish? Am I missing a FB.ui() dialog that enables the user to choose where to post? If not - is there a way to get the event and response for the share dialog?
No, I think there is no way as of now to use the Share dialog with FB.ui, or get it to give any feedback.
What you could try is using the feed dialog with the to parameter – if you are willing to put a dialog of your own in front of it that lets the user chose a post target.
Although that will limit you to their friends and pages you might be able to suggest – if the latter should be user specific, you will have to ask for permission to read their likes etc.
As you know, Facebook is filtered in many countries, and if we put a "Like" button in our page, they will see a "ACCESS DENIED" message form their internet provider instead of the Like button. so the question is, can I detect if Facebook is viewable by the user or not? so I just show the Like button if the users have access to Facebook and it's not filtered.
Thanks
Test if the domain www.facebook.com is accessible by loading the favicon.ico and if so, show the iframe:
<iframe src="http://www.facebook.com/plugins/like.php" id="fbfm" style="display:none">
</iframe>
<script>
var fbicon = new Image();
fbicon.onload = function() {
document.getElementById("fbfm").style.display = "";
};
fbicon.src = "http://www.facebook.com/favicon.ico?" + Math.random();
</script>
I guess you could set a very small width and height on the like button iframe, just enough for the button itself, and hope that any "ACCESS DENIED" message has enough padding not be visible in the iframe's viewport! :)
The alternative might be to "ping" Facebook, as in make an AJAX request and see what the response is. Hopefully any blocked response from an ISP would contain an HTTP 403 status code, or something sensible, but if not you'd have to scrape the return HTML and try yourself to determine whether you're seeing Facebook or an error page, then decide whether to render the like button or not.
My advice would be to use a service like ShareThis or AddThis. There is a chance that they aren't blocked in your country (you can test it before you use it with and without a VPN) and they give you an advantage that your users can share your website with friends on other portals that are available to them.
It would certainly be interesting for other people to know whether or not those services are available in countries where Facebook is blocked as many of them can't test it themselves.
Use the Facebook javascript library at: http://developers.facebook.com/docs/reference/javascript/
and use the FB.getLoginStatus(...) function to check and decide what you want your application to do. If they have logged in or not (connected or not_authorized) then they are logged into facebook and you can show your like button. If the status is unknown they haven't logged in yet but can see facebook.
If the facebook script does not load or return any value then facebook is probably blocked and you don't want to display your like button.
NOTE: You'll also need to create an app id with facebook to link your javascript to.
I have just tried to use the Facebook registration plugin inside an iframe page tab.
In case anyone is wondering why I would want to do this, I want to use the Facebook registration plugin to create a newsletter signup form on my FB page.
I tried with this code:
<iframe src="https://www.facebook.com/plugins/registration.php?
client_id=113869198637480&
redirect_uri=&
fields=name,birthday,gender,location,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="100%"
height="330">
</iframe>
and this code:
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>
<fb:registration
fields="name,birthday,gender,location,email"
redirect-uri=""
width="530">
</fb:registration>
In both cases I used the APP_ID of the page tab application, and the canvas url for that page tab, but I filled out the website field with the website being used.
WHen I take out the pre-filled FB info and fill out the form, a var_dump on the receiving page gives out the right info, but when I submit it with the pre-filled FB info, it does a popup saying, you are registering with APP_NAME_HERE, if you want to do this click continue, or undo if you don't (something like that) and when I click continue nothing happens.
I have used Firebug to inspect the page, and I think that the data is being sent to another iframe, but I don't know how to access it. I have tried changing target to _top, _self and _parent but this didn't work either. I also tried creating a new app specifically using the website attribute, and that failed in the same way too. ANy help gratefully received.
As far as I can tell, the target attribute is broken when using pre-filled info. Perhaps it has something to do with the way the flow must happen when the confirmation popup appears, but AFAIK it's not documented that the two cannot be used together. In any case, the pre-filled data seems to have the effect of forcing target=_top no matter what you specify in the attributes.
That being the case, you will have to specify an external page address as the redirect_uri and process the data there and then redirect back to the Facebook page address. If necessary you can pass some data back using the app_data parameter in the query string.
Most than likely you are already flagged as registered and are receiving back the cookie/header for FB connect to work. If this is the case you will need to un-register your application on facebook in the application management page. Once you do that the button will work again.
Lastly, if the user is logged into Facebook and already connected to
your application, the button will say Login and won't do anything when
clicked (but your application should detect this state using the
getLoginStatus method and not show the button).
https://developers.facebook.com/docs/plugins/registration/
You can debug your registration status using
FB.Event.subscribe('auth.statusChange', function(response) {
if(!response.authResponse) return;
console.log(response)
});
Hope this helps.
Looks to me that you are missing something:
< fb:register >
Here you can see that tha attribute onvalidate, which contains the name of the js function called after the Register button is pressed, to whom is passed the whole object containing the user info.
Greetings ;)
Luca
In the second code redirect-uri="" needs a value. It needs to be prefixed by your site url.
In my Facebook application I am displaying a message window using FB.ui { method: 'send' ...}. I would like to capture the list of recipients (stored in the 'recipitents []' hidden form field) as well as the message text in my application database.
Is there a way to do that?
Here's what I have come up with so far:
Dynamically set the onclick attribute in the DOM element (which corresponds to the Send button. So far I have been able to do that using the browser development tools (e.g. F12 in IE9) but not in code; it could be tricky since the dialog doesn't exist at load time). Unfortunately I haven't been able to define a Javascript function that was in the right scope (I thought there was only a global scope) for the onclick callback to find it.
Construct the Facebook Send dialog from more elementary building block (e.g., friend picker, send method invocation) so I 'own' the click event.
Clone the FB.ui() code and modify it to include additional parameters when calling the redirect url.
Require the user to include me in the To list (really only last resort), or default the 'to' field to the application's user id.
Finally, I expect to be able to call my web service from Javascript to record the message details in my application database.
I'm pretty sure this is not available via the API by design. The Send button operates in an iframe so browser security will prevent you from accessing its internal state via Javascript.
Some other methods (such as using FB.ui dialogs to post to the user's wall) provide a post ID in the callback and you can check this in the Graph API, but the Send button doesn't return anything like this.
For the Send button you can subscribe to the message.send event in the Javascript SDK and receive a callback with the URL which was sent, but not who it was sent to. ( https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ - the event itself isn't currently listed there, but does exist)
I can't think of why you'd want to do this type of tracking, it seems like a use-case with very few policy compliant applications.
When someone tries to login to my site via facebook, he's redirected to a page where he sees all the requested permissions and click to allow / disallow them.
Is there any way to have this page open up as a layered window through javascript without having the user leave my website? E.g so my website would be in the background while the facebook connect window hovers above it.
Any ideas at all?
The answer is no. Also, you can't load the login page within an IFrame since Facebook has a frame breaker for that page.
The page you're talking about is called the OAuth dialog. By default, requesting users to login to your app will cause a page redirect since the "display" parameter is set to "page" (other values include: popup, iframe, touch, and wap). What you want is to invoke this dialog with display set to "iframe". However, the documentation states: "If you specify iframe, you must have a valid access_token." And, to get an access_token, the user needs to first login to your app. For that reason, you won't be able show the login page within an embedded IFrame.
However, once a user authorizes your app with a basic permission set, you may prompt that user for additional permissions with the dialog's display mode to "iframe" (since you have the access_token).
I use Facebook Connect within a popup and it works pretty well.
1) "Fake" the Facebook-Login-Button
Take a Screenshot of the Button, wrap it's img-tag with an a-tag with attributes
href="<?= $facebook->getLoginUrl(...); ?>"
onclick="facebookPopup(this.href); return false"
2) Create Javascript Popup Function
function facebookPopup (url) {
popup = window.open(url, "facebook_popup",
"width=620,height=400,status=no,scrollbars=no,resizable=no");
popup.focus();
}
3) Create FB Connect "Landingpage"
Create a php-File that will handle the user's data when he finished the connect dialog, for example save his username and facebook-uid if he's new, or just log him in if his ID was already known.
Then close the Popup and Refresh your main page by Javascript:
function CloseAndRefresh()
{
window.opener.location.href = window.opener.location.href;
window.close();
}
You may trigger that function by <body onload='CloseAndRefresh()'>
Remember to specify your landingpage's URL in the Login-Url (redirect_uri).
Also, if you specify 'display'=>'popup' in the login URL, it will show a condensed version of the "Permission Request"-Dialog.
I support David's answer.
Also, If you somehow load the login dialog in an iframe or a div, the user won't be able to tell If he/she is really submitting login credentials to Facebook or some other site.
Can't comment yet. :(