javascript 如何将 Facebook/Google+/Twitter 分享按钮添加到移动应用程序 (PhoneGap)

How to add Facebook/Google+/Twitter sharing buttons to mobile app (PhoneGap)

提问by Mahdi Ghiasi

I'm developing a mobile application (by jQuery MobileAnd PhoneGap).

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

How to add Facebook, Twitterand Google+Sharing buttonsinto my application? Is there any API or such easy way? (The server-side of my application uses ASP.NET MVC 4.)

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

It doesn't matter that purposed way is server-side or client-side.

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

(For example, Zite app has sharing buttons)

（例如，Zite 应用有分享按钮）

EDIT:If your purposed method needs opening popup window, will PhoneGaphandle this popup and close it after sharing, so user can come back to my application?

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

And How to save user's credintals so user don't want to login every time?(credientals should be saved on client-side, by cookies or something else... (Do we can allow PhoneGapfor saving cookies from Facebook, Twitterand Google?))

以及如何保存用户的凭据以便用户不想每次都登录？（凭据应保存在客户端，通过 cookie 或其他方式...（我们是否可以允许PhoneGap从Facebook、Twitter和保存 cookie Google？））

采纳答案by Hammad

I am currently using this pluginfor sharing options in Cordova 2.5+.

我目前正在使用此插件在 Cordova 2.5+ 中共享选项。

Its working perfectly for Android and iOS

它适用于 Android 和 iOS

回答by ThinkingStiff

What you're asking (after your edit) is pretty involved, but here are some pointers.

你所问的（在你的编辑之后）非常复杂，但这里有一些提示。

For Facebook, you can use the PhoneGap Facebook Platform Pluginor use the Javascript SDK. You'll need to register your app with them and get an app ID. Since there are quite a few steps to FB auth, study their samples and look for a good tutorial.

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

Twitter provides a similar auth API, but it requires some server-side code to get it working. I've never used Google's, but I assume they have a fairly simple API as well. Credentials with all of these API get saved in the PhoneGap UIWebView's cookie store, so you don't really have to manage that.

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

For popups in PhoneGap, you can use the ChildBrowser Plugin.

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

Here's what I use for the buttons. This is called on the client after your page is done loading. Since they take awhile to load and position themselves, a four second delay is used to give them time, then they fade in.

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

Demo:

演示：

Script

脚本

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

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

HTML

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

回答by jeff

Check out ShareThis. It allows you to easily add these buttons to your application.

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