与Google+共享不起作用

Question

I'm creating a cross-platform mobile app using HTML + JS + CSS. I want to share a custom text in Google+. I have the following code segments:

        <button class="demo g-interactivepost"
            data-clientid="xxx.apps.googleusercontent.com"
            data-contenturl="https://developers.google.com/+/web/share/interactive"
            data-calltoactionlabel="INVITE"
            data-calltoactionurl="http://developers.google.com/+/web/share/interactive?invite=true"
            data-cookiepolicy="single_host_origin"
            data-prefilltext="I just tried the quiz. Check it out for yourself!">
            Google+
        </button>

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

Please note that I have already created a Google+ App, and got my client id, though I didn't do any changes to the app, cause I don't know whether I need to enable or disable something on Google Developer Console. On the other hand, in the above code segment I have replaced the "xxx" part with my client ID. The point is that when I press the button, it opens the the sign-in page from Google and after successful sign in, this page displays: http://prntscr.com/3oa1j7 But at that point wherever I press, I get just a blank screen. If anyone can help me fix the problem, I would be glad.

Answer 1

Your code is working for me, so the most likely cause for your issue is your client configuration, specifically the authorized Javascript origins field. If you use the example client IDs, nothing will work. You must configure your own client from https://console.developers.google.com

First, make sure that the script is correctly loading your profile. After you have accessed the site, you should see the toast for your profile appear in the bottom. If this is working, then your client ID is valid in the button.

Next, make sure that you have added your site to the authorized origins of your project. HTTP vs HTTPS matters. The port for your server matters (if it's not the standard port for your preferred protocol). Double check that everything matches up, this is the most likely cause. Because you're only using Javascript, the authorized origins is the only field you need to update.

Open up the developer tools in your browser and check the Javascript console for information about why the post is not rendering. If point 1. doesn't work, please share additional information about the error you're seeing.