Menu
In the documentation for Facebook's "Send Dialog" it states:
This dialog can be used with the JavaScript SDK and by performing a full redirect to a URL. It is not supported on mobile devices.
The Send Dialog (when it works) is exactly what I am trying to utilize (in that it defaults to sending to specific people):
As a fallback you can use the "Share Button", but the share button has a slightly different user flow (you have to select to send it specific people):
Right now I'm using Zurb Foundation's Visibility Classes to trigger which button is shown, like this:
<button id='actionShare' class='button large-12 hide-for-touch'>share on facebook</button>
<a href='https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.nytimes.com%2F2011%2F06%2F15%2Farts%2Fpeople-argue-just-to-win-scholars-assert.html' class='button small-12 show-for-touch' target='_blank'>share on facebook</a>
<script>
$('#actionShare').on('click', function() {
FB.ui({
method: 'send',
link: window.location.href
});
});
</script>
Does anyone know the criteria that Facebook uses (so I can trigger the correct fallback)?
537
Apparently, "not supported on mobile devices", really does mean that it won't work on a mobile devise.
So if you don't need to implement the "Send" API on the mobile side then you could sniff the User-Agent to check if it is desktop or not.
You might want to read Browser detection using the user agent.
You might try something like this:
if (navigator.userAgent.indexOf("Mobi") > -1){
//do your thing here
}
I created the following example to confirm that this works. To test if the facebook API uses size to "discriminate" against Mobile devises, I tried both Chrome and Firefox in both full screen and smaller then a phone in width and height sizes. To test Mobile devises, I used the Bowser SIM feature in Red Hat JBoss Developer Studio against the following (in both vertical and horizontal orientations): Samsung Galaxy S3, Samsung Galaxy Note 10.1, IPhone 4 & 5, and IPad 4 Retina.
The conclusion is that sniffing the UA worked!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$("#button-1").click(function(event) {
if (navigator.userAgent.indexOf("Mobi") > -1){
window.location.assign("#page-2");
} else {
window.location.replace("https://www.facebook.com/dialog/send?" +
"app_id=123050457758183" +
"&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html" +
"&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/"
);
}
});
})
</script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '123050457758183', // App ID from the app dashboard
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div data-role="page" id="page-1" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Try to Send.</h1>
</div>
<div data-role="content">
<a href="#" id="button-1" data-role="button" data-theme="b">Send</a>
</div>
</div>
<div data-role="page" id="page-2" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Share</h1>
</div>
<div data-role="content">
<div class="fb-share-button" data-href="http://developers.facebook.com/docs/plugins/" data-type="button_count"></div>
</div>
</div>
</body>
</html>
The following was my attempt to use the "Send" API in a Mobile environment.
The Facebook SDK is not Open Source, however the FacebookJS code is. Initially after reviewing the FacebookJS source and the docs I thought that the phrase "It is not supported on mobile devices" did not mean that it is blocked on mobile devices. It only means that they didn't build a nice pretty mobile version like they did for "share".
That led me to think that potentially you could use the URL Redirect option in a HTML5/jQuery Mobile form that submits the "send". At least that is what I would try. ;)
HOWEVER
After trying to implement the above idea I found that it is not possible to display the "send" dialog on any mobile devise because the facebook API reads the User-Agent and redirects you from the "www.facebook" site to "m.facebook".
There are several tickets open on facebook about this very thing.
Send dialog is not working on mobile device
Send Dialog Doesn't Work on Mobile Web
Send dialog broken for mobile devices
You can test this by using the URL Redirect example URL from the Send API and entering it in your phones browser.
https://www.facebook.com/dialog/send?app_id=123050457758183&link=http://www.nytimes.com/2011/06/15/arts/people-argue-just-to-win-scholars-assert.html&redirect_uri=https://www.bancsabadell.com/cs/Satellite/SabAtl/
It may be possible, though I don't recommend it, to change the User-Agent from the server side and redirect the URL after that. Note that you must do this from the server side, as you are prevented from changing this from within the browser for security reasons. As I said this is hack that you should only try as a last resort. There are several posts related to this:
Want to load desktop version in my webview using uastring
Force webview to display desktop sites
Setting WebView to view Desktop Site and Not Mobile Site
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
