How to place a Google Plus +1 button inside cordova/ionic app?

Question

I've added a +1 button in my app:

I've used this code:

<div class="g-plusone" data-size="tall" data-href="GOOGLE PLAY STORE LINK TO MY APP"></div>

and

(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

I've also allowed the api:

index.html:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com">

config.xml:

<allow-navigation href="https://apis.google.com" />

The problem: This works on the browser (ionic serve) but It doesn't work on the app... When I click nothing happens... (no errors...)

Anyway I can make this work on the app? (ionic run)

More information/debug info:

1. If I've clicked the +1 button on the web it doesn't show me the red button on the app (Read means I've already shared that link)(It doesn't know who I am..)
2. I don't want to make a login/signup, just a +1 button...

If I add:

<allow-navigation href="*" />

in config.xml, it asks me to login when I click the +1 button: (It shouldn't)

This means the +1 button doesn't work because is "in an anonymous browser", not authenticated with the OS...

I also created a demo pure Android app following this instructions: https://developers.google.com/+/mobile/android/recommend It works perfectly... (I can +1 the link...)

My possibilites:

1. Some way to make a native Android view with the +1 button appear on the webview.

2. Make a fake +1 button and when it's clicked it calls a plugin that makes some king of request/click on the real +1 button....

3. Any suggestion on how to do it?

Are any of these two possibilities possible?

Thanks for your help!

Answer 1

Your problem is that the user isn't logged in with their Google account inside the cordova browser, so obviously, you see a login prompt when clicking the +1 button.

I understand you want to access the global Google account connected to the user's phone/OS and use this one inside your app. First, your app needs credentials to access this data, then those need to be accessible from within the cordova browser. There's this plugin which does that for you.

In your initialization code, you can then call window.plugins.googleplus.login(...), which will prompt the user for confirmation (if necessary) and log in.

Make sure that the +1 button is initialized after logging in, so the state is indicated correctly. For instance (assuming you're using jQuery):

$(document).ready(function() {
  loginToGoogle();
  initPlusOneButton();
}

function loginToGoogle() { ... }

function initPlusOneButton() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
}

Answer 2

If you don't want to handle the login, you can build a plugin to add a native PlusOneButton. I'm working on it right now, I'll try to release it this afternoon, but as moderators don't like "link only asnwers" I'll explain here how to build the plugin, and I'll add the link once I finish developing it.

First of all, read the guide about how to build a cordova plugin, I'm not going to enter into that level of detail.

Your CordovaPlugin subclass will need this variables:

private PlusOneButton mPlusOneButton;
private String URL;

Your execute method should be like this:

public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if (action.equals("show")) {//show is the name of the method you call from javascript
        URL = "http://www.phonegap.es";//you should pick it from the plugin params
        mPlusOneButton =  new PlusOneButton(cordova.getActivity());
        mPlusOneButton.initialize(URL, null);

        //you have to run this part making sure you run it on the UI Thread
        cordova.getActivity().runOnUiThread(new Runnable() {
            public void run() {
                cordova.getActivity().addContentView(mPlusOneButton,new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT));


                //position the button wherever you want, you should pick the values from the plugin params
                mPlusOneButton.setX(300);
                mPlusOneButton.setY(300);

            }
        });

    } else {
        return false;
    }
    return true;
}

Finally add the onResume method to keep the button status up to date.

@Override
public void onResume(boolean multitasking) {
    super.onResume(multitasking);
    mPlusOneButton.initialize(URL, null);
}

The plugin will have to add the com.google.android.gms:play-services-plus dependency

You can do that adding this line to the plugin.xml

<framework src="com.google.android.gms:play-services-plus:+" />

EDIT: The plugin is ready https://github.com/jcesarmobile/plusOneButtonPlugin

To install it

cordova plugin add https://github.com/jcesarmobile/plusOneButtonPlugin

To use it:

var params = {};
params.url = "http://www.example.com";
params.position = {x:100,y:100};
plusOneButton.show(params);

Or

plusOneButton.show("http://www.example.com");