Tips on incorporating a Google Plus +1 button in a Cordova/Ionic application

Question

Tips on incorporating a Google Plus +1 button in a Cordova/Ionic application

Incorporated a +1 button within my application: https://i.sstatic.net/1IHni.png

The code used:

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

also executed this script:

(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);
})();

Ensured API access in the following files:

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" />

Encountered Issue: The functionality works on the browser (ionic serve) but fails within the app... Upon clicking, no action takes place... (no error prompts either)

Is there a feasible solution to make it function within the app? (ionic run)

Addendum/Debug Information:

After selecting the +1 button on the web interface, it does not display the red button on the app ( Indicates shared link history and lack of user identification...)
No intention to implement login/signup credentials, just aim to incorporate a +1 button...

If I insert:

<allow-navigation href="*" />

within config.xml, upon clicking the +1 button, a login prompt appears: (Not intended behaviour) https://i.sstatic.net/zAQWVl.png

Indicating that the +1 button remains non-functional due to being "in an anonymous browser", lacking authentication with the OS...

Pursued creation of a demonstration pure Android application adhering to these guidelines: https://developers.google.com/+/mobile/android/recommend Operating seamlessly... (+1 functionality present and functional...)

Tackling potential solutions:

Implementing a native Android view embedding the +1 button into the webview.
Crafting a pseudo +1 button which upon clicking, triggers a plugin invoking a request/action on the actual +1 button....
Open to suggestions/input on resolving this situation?

Feasibility of either alternatives?

Appreciate your guidance!

javascript cordova webview ionic-framework google-plus

Answer 1

Answer №1

It seems that the issue lies in the fact that the user is not logged into their Google account within the cordova browser, which is why a login prompt appears when trying to click the +1 button.

If you are looking to access the global Google account linked to the user's phone/OS and utilize it within your app, you will need to obtain credentials for accessing this data and ensure they can be accessed from the cordova browser. There is a helpful plugin available that can assist with this.

In your initialization code, you can use

window.plugins.googleplus.login(...)

to request user confirmation (if needed) and log in.

Ensure that the +1 button initialization occurs after logging in so that the correct state is displayed. Here is an example 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

It seems that the issue lies in the fact that the user is not logged into their Google account within the cordova browser, which is why a login prompt appears when trying to click the +1 button.

If you are looking to access the global Google account linked to the user's phone/OS and utilize it within your app, you will need to obtain credentials for accessing this data and ensure they can be accessed from the cordova browser. There is a helpful plugin available that can assist with this.

In your initialization code, you can use

window.plugins.googleplus.login(...)

to request user confirmation (if needed) and log in.

Ensure that the +1 button initialization occurs after logging in so that the correct state is displayed. Here is an example 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 3

Answer №2

Are you looking to avoid handling the login process? You can create a plugin to include a native PlusOneButton. I am currently developing this and plan to release it later today. Since moderators frown upon "link-only answers," I will explain here how to build the plugin and provide the link once it's completed.

Begin by reading the guide on building Cordova plugins; I won't delve into that level of detail.

Your CordovaPlugin subclass will require these variables:

private PlusOneButton mPlusOneButton;
private String URL;

Your execute method should look like this:

public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if (action.equals("show")) { // show is what you call from JavaScript
        URL = "http://www.phonegap.es"; // retrieve from plugin parameters
        mPlusOneButton = new PlusOneButton(cordova.getActivity());
        mPlusOneButton.initialize(URL, null);

        // Ensure this part runs 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 as desired, taking values from the plugin parameters
                mPlusOneButton.setX(300);
                mPlusOneButton.setY(300);
            }
        });

    } else {
        return false;
    }
    return true;
}

Finally, add the onResume method to keep the button status updated:

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

The plugin must include the

com.google.android.gms:play-services-plus

dependency.

To do this, add the following line to the plugin.xml:

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

UPDATE: The plugin is now available at 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");

Answer 4

Are you looking to avoid handling the login process? You can create a plugin to include a native PlusOneButton. I am currently developing this and plan to release it later today. Since moderators frown upon "link-only answers," I will explain here how to build the plugin and provide the link once it's completed.

Begin by reading the guide on building Cordova plugins; I won't delve into that level of detail.

Your CordovaPlugin subclass will require these variables:

private PlusOneButton mPlusOneButton;
private String URL;

Your execute method should look like this:

public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if (action.equals("show")) { // show is what you call from JavaScript
        URL = "http://www.phonegap.es"; // retrieve from plugin parameters
        mPlusOneButton = new PlusOneButton(cordova.getActivity());
        mPlusOneButton.initialize(URL, null);

        // Ensure this part runs 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 as desired, taking values from the plugin parameters
                mPlusOneButton.setX(300);
                mPlusOneButton.setY(300);
            }
        });

    } else {
        return false;
    }
    return true;
}

Finally, add the onResume method to keep the button status updated:

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

The plugin must include the

com.google.android.gms:play-services-plus

dependency.

To do this, add the following line to the plugin.xml:

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

UPDATE: The plugin is now available at 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");

Tips on incorporating a Google Plus +1 button in a Cordova/Ionic application

Answer №1

Answer №2

Similar questions

The onClick event within the pageinit function only triggers once the page has been refreshed

Issues with rendering in Three.js CanvasRender: faces continuously flicker on and off

Javascript inheritance through prototypes results in the addition of supplementary attributes within the descendant classes

Why isn't my AJAX POST request to PHP functioning correctly?

When using Cordova on Android, the getResponseHeader("Set-Cookie") function will only return the last cookie and not the entire list of cookies

Why is my canvas element not fully extending on the page even though I've set its scrollHeight property

Once invoked by an ajax request, the $().ready function is executed

The JQUERY Uncaught Error: Syntax error message popped up when trying to access an unrecognized expression on the javascript: void(0)

Learn how to toggle a React component with the help of Redux Toolkit

Obtaining the identifier of the grandparent element that is of the "

Tutorial on Removing and Re-Adding HTML Elements

What could be causing my PUT and DELETE requests to return a 404 status code?

Why isn't the unit test passing when it clearly should be?

What is the best way to concatenate two different values in React JSX using the "+" operator?

SetBootstrapTooltip at the location of the mouse pointer

How can I remove the script file from my req.params?

Implementing CSS transitions across several elements simultaneously can enhance the user experience

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

Thumbnail Centering Issue in Swiper Plugin by iDangero.us

Bringing @angular/code into a directory that is not within an Angular project