什么是“支持移动设备”的Facebook标准

时间:2013-11-19 19:06:44

标签: javascript facebook

在Facebook的“Send Dialog”文档中,它声明:

  

此对话框可与JavaScript SDK一起使用,也可以执行完全重定向到URL。 移动设备不支持。

发送对话框(当它工作时)正是我想要使用的(因为它默认发送给特定的人):

Send Dialog

作为后备,您可以使用“Share Button”,但分享按钮的用户流量略有不同(您必须选择向其发送特定人员):

Share Button

现在我正在使用Zurb Foundation的Visibility Classes触发显示的按钮,如下所示:

<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>

有没有人知道Facebook使用的标准(所以我可以触发正确的后备)?

1 个答案:

答案 0 :(得分:10)

显然,“移动设备不支持”,确实意味着它无法在移动设备上运行。

因此,如果您不需要在移动端实施“发送”API,那么您可以嗅探用户代理以检查它是否是桌面。

您可能需要阅读Browser detection using the user agent

您可以尝试这样的事情:

    if (navigator.userAgent.indexOf("Mobi") > -1){
         //do your thing here
    }

我创建了以下示例以确认这是有效的。为了测试facebook API是否使用大小来“区分”移动设备,我尝试了全屏和小屏幕的Chrome和Firefox,然后是宽度和高度尺寸的手机。为了测试移动设备,我使用Red Hat JBoss Developer Studio中的Bowser SIM功能对抗以下(垂直和水平方向):Samsung Galaxy S3,Samsung Galaxy Note 10.1,IPhone 4&amp; 5,和iPad 4 Retina。

结论是嗅探UA工作了!

<!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>

以下是我尝试在移动环境中使用“发送”API。

Facebook SDK不是开源,但FacebookJS代码是。最初在审核FacebookJS source和文档后,我认为“移动设备不支持”这一短语并不意味着它在移动设备上被阻止。这只意味着他们没有像“共享”那样构建一个漂亮的漂亮移动版本。

这让我觉得你可以在提交“发送”的HTML5 / jQuery Mobile表单中使用URL Redirect选项。至少这是我会尝试的。 ;)

无论其

在尝试实现上述想法后,我发现无法在任何移动设备上显示“发送”对话框,因为facebook API会读取用户代理并将您从“www.facebook”网站重定向到“ m.facebook”。

在facebook上有几张关于这件事的门票。

Send dialog is not working on mobile device

Send Dialog Doesn't Work on Mobile Web

Send dialog broken for mobile devices

您可以使用Send API中的网址重定向示例网址并在手机浏览器中输入该网址来对此进行测试。

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/

虽然我不建议这样做,但有可能从服务器端更改User-Agent并在此之后重定向URL。请注意,您必须从服务器端执行此操作,因为出于安全原因,您无法在浏览器中更改此设置。正如我所说,这是黑客,你应该只作为最后的手段。有几篇与此相关的帖子:

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