【问题标题】:What is Facebook's standard for 'supported mobile devices'Facebook 对“支持的移动设备”的标准是什么
【发布时间】:2013-12-03 12:02:28
【问题描述】:

在 Facebook 的“Send Dialog”的文档中,它指出:

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

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

作为后备,您可以使用“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 使用的标准(以便我可以触发正确的回退)?

【问题讨论】:

    标签: javascript facebook


    【解决方案1】:

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

    因此,如果您不需要在移动端实现“发送”API,那么您可以嗅探 User-Agent 以检查它是否是桌面。

    您可能想阅读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 功能针对以下设备(垂直和水平方向):三星 Galaxy S3、三星 Galaxy Note 10.1、iPhone 4 和 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 重定向选项。至少那是我会尝试的。 ;)

    但是

    在尝试实现上述想法后,我发现无法在任何移动设备上显示“发送”对话框,因为 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 的 URL 重定向示例 URL 并在手机浏览器中输入它来测试这一点。

    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/

    虽然我不建议这样做,但有可能从服务器端更改用户代理并在此之后重定向 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

    【讨论】:

    • 您将如何实现“提交“发送”的 HTML5/jQuery Mobile 表单中的 URL 重定向选项?
    • 我重新阅读了您的问题并更新了答案以包括检测。
    • 我更新了答案以包含一个示例。很抱歉之前的困惑,我希望这会有所帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-08
    • 2012-12-27
    • 1970-01-01
    • 2011-09-11
    • 1970-01-01
    相关资源
    最近更新 更多