【问题标题】:How to add Facebook/Google+/Twitter sharing buttons to mobile app (PhoneGap)如何将 Facebook/Google+/Twitter 分享按钮添加到移动应用程序 (PhoneGap)
【发布时间】:2012-07-24 21:57:18
【问题描述】:

我正在开发一个移动应用程序(jQuery MobilePhoneGap)。

如何将FacebookTwitterGoogle+ Sharing buttons 添加到我的应用程序中?有没有 API 或者这么简单的方法? (我的应用程序的服务器端使用ASP.NET MVC 4。)

有目的的方式是服务器端还是客户端都没关系。

(例如,Zite 应用有分享按钮)

编辑:如果您的目的方法需要打开弹出窗口,PhoneGap 是否会处理此弹出窗口并在共享后关闭它,以便用户可以返回我的应用程序?

以及如何保存用户的凭据以便用户不想每次都登录?(凭据应保存在客户端,通过 cookie 或其他方式...(我们可以允许PhoneGap 用于保存来自 FacebookTwitterGoogle 的 cookie?))

【问题讨论】:

    标签: javascript asp.net-mvc facebook cordova google-plus


    【解决方案1】:

    您的问题(在您的编辑之后)非常复杂,但这里有一些提示。

    对于 Facebook,您可以使用 PhoneGap Facebook Platform PluginJavascript SDK。您需要向他们注册您的应用并获取应用 ID。由于 FB auth 有很多步骤,请研究他们的样本并寻找一个好的tutorial

    Twitter 提供了类似的身份验证 API,但它需要一些服务器端代码才能使其工作。我从未使用过谷歌的,但我认为他们也有一个相当简单的 API。所有这些 API 的凭据都保存在 PhoneGap UIWebView 的 cookie 存储中,因此您实际上不必管理它。

    对于 PhoneGap 中的弹出窗口,您可以使用 ChildBrowser Plugin

    这是我用于按钮的内容。页面加载完成后在客户端调用。由于它们需要一段时间来加载和定位自己,因此使用 4 秒延迟给它们时间,然后它们会淡入。

    演示:

    脚本

    function showSocialButtons() {
    
        var html =
                  '<div id="social-buttons" class="fade">'
                + '<div class="fb-like" data-href="YOUR_URL" data-send="true" data-layout="box_count" data-width="50" data-show-faces="true" data-colorscheme="dark"></div>'
                + '<div class="g-plusone-frame"><div class="g-plusone" data-size="tall" data-href="YOUR_URL"></div></div>'
                + '<a href="https://twitter.com/share" class="twitter-share-button" data-url="YOUR_URL" data-text="YOUR_APP_DESCRIPTION" data-count="vertical">Tweet</a>'
                + '<div id="fb-root"></div>'
                + '</div>';
        document.getElementById( 'viewport' ).insertAdjacentHTML( 'beforeEnd', html );
    
        var script = document.createElement( 'script' );
        script.async = true;
        script.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_FB_APP_ID';
        document.getElementById( 'fb-root' ).appendChild( script );
    
        script = document.createElement( 'script' );
        script.async = true;
        script.src = document.location.protocol + '//platform.twitter.com/widgets.js';
        document.getElementById( 'social-buttons' ).appendChild( script );
    
        script = document.createElement( 'script' );
        script.async = true;
        script.src = document.location.protocol + '//apis.google.com/js/plusone.js';
        document.getElementById( 'social-buttons' ).appendChild( script );
    
        window.setTimeout( function () {
    
            document.getElementById( 'social-buttons' ).removeAttribute( 'class' );
    
        }, 4000 ); //4 second delay
    
    };
    

    CSS

    #social-buttons {
        height: 300px;
        transition:             opacity 1000ms ease;
            -moz-transition:    opacity 1000ms ease;
            -ms-transition:     opacity 1000ms ease;
            -o-transition:      opacity 1000ms ease;
            -webkit-transition: opacity 1000ms ease;
        width: 90px;
    }
    
    .fb-like,
    .g-plusone-frame {
        margin: 10px 0 10px 3px;   
    }
    
    .g-plusone-frame {
        display: inline-block;
    }
    
    .twitter-share-button {
        margin: 10px 0;
    }
    
    .fade {
        opacity: 0 !important;
    }
    

    HTML

    <div id="viewport"></div>
    

    【讨论】:

    • 谢谢,但由于我正在开发移动应用程序,所以打开弹出窗口进行登录不太好......
    • @Mahdi 我在手机 PhoneGap 应用程序上使用这些。无论您如何操作,您的用户都必须登录才能使用任何社交按钮。在我的应用中,他们已经登录了 Facebook。
    • 你能解释一下吗?用户如何在您的应用中登录 Facebook?
    • @Mahdi 我使用 Javascript FB API 进行身份验证。
    • @Mahdi 更新了更多信息。
    【解决方案2】:

    我目前在 Cordova 2.5+ 中使用 this plugin 共享选项。

    它在 Android 和 iOS 上完美运行

    【讨论】:

    • 这似乎是一个不错的插件。我将在我未来的项目中使用它。我将您的答案标记为已接受的答案。
    • 这不适用于 google plus。如何将其用于 g+ 分享?
    • 您是否启用了 Google 帐户。基本上这个插件只启动那些作为原生共享选项可用的共享选项。
    【解决方案3】:

    查看ShareThis。它使您可以轻松地将这些按钮添加到您的应用程序中。

    【讨论】:

    • ShareThis 似乎没有用于基于 Web 的移动应用程序的移动 API。
    • 如果我使用他们的javascript代码(客户端),它会打开弹出窗口进行登录吗? (因为它不适合移动开发!)
    • 糟糕,链接到了错误的 API。但是对于基于 Web 的移动应用程序,您不需要特殊的 API。您可以只使用标准生成的按钮。不,它会打开一个新标签。
    • 没有办法打开一个新标签吗? (例如,使用 iframe 打开一个虚拟弹出窗口?)
    • 我不确定。我只将它用于一个非常简单的网站。但是你不是说你不想要弹出窗口吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多