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

Question

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

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

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

(For example, Zite app has sharing buttons)

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

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 PhoneGap for saving cookies from Facebook, Twitter and Google?))

Solution 1

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

Its working perfectly for Android and iOS

Solution 2

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

For Facebook, you can use the PhoneGap Facebook Platform Plugin or 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.

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.

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

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

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

Solution 3

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