Question

我正在开发一个移动应用程序（jQuery Mobile和PhoneGap）。

如何将Facebook，Twitter和Google+ Sharing buttons添加到我的应用程序中？有没有API或这么简单的方法？（我的应用程序的服务器端使用ASP.NET MVC 4。）

有意的方式是服务器端或客户端无关紧要。

（例如，Zite app有共享按钮）

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

如何保存用户的信用卡，以便用户不想每次都登录？（信誉应该保存在客户端，通过cookie或其他东西......（我们可以允许） PhoneGap用于保存Facebook，Twitter和Google的Cookie？））

Answer 1

你所要求的（编辑之后）非常复杂，但这里有一些指示。

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

Twitter提供了类似的auth API，但它需要一些服务器端代码才能使其正常工作。我从未使用过谷歌，但我认为它们也有一个相当简单的API。包含所有这些API的凭据都会保存在PhoneGap UIWebView的Cookie商店中，因此您无需对其进行管理。

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

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

演示：

脚本

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>

Answer 2

结帐ShareThis。它允许您轻松地将这些按钮添加到您的应用程序中。

Answer 3

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

它适用于Android和iOS

如何将Facebook / Google + / Twitter共享按钮添加到移动应用程序（PhoneGap）

3 个答案:

脚本

CSS

HTML