Google Plus Button and Polymer

Question

I am working on a Polymer application and I am having trouble adding a Google Plus (+1) button to the page. It seems the javascript for creating the button is not compatible with shadow DOM. I am trying to add this element deep inside several shadow DOMs as this is a large application.

Using the normal method of adding the button to the page just does nothing

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plusone></g:plusone>

This, and any other method where the script auomatically tries to find the element do nothing. This is because the query selecter being used by the script doesn't look within the shadow DOM.

Now explicitly rendering the button works.... sort of

<script src="https://apis.google.com/js/platform.js">
         {parsetags: "explicit"}
</script>
<div id="gplus" class="g-plusone"></div>

Then in the script for the parent element

gapi.plusone.render(this.$.gplus,{href : "THE URL"});

The button shows up properly, and it almost works. When you click it, it does add 1 and opens the internal dialog to add a comment. But its broken, the dialog size is wrong, and when it tries to load information about the url it just loads forever, and most of the interface in the dialog doesn't work.

enter image description here

You get an error in the console too

cb=gapi.loaded_0:91     Uncaught TypeError: Cannot read property 'src' of null

That line is

window.document.getElementById(a)

Obviously that wont work with Shadow DOM because the document of the window will be the top level of the DOM and it won't find the actual element.

It's weird that Google would do this and look all the way up from the window document when I gave them the only element they would ever need to touch when I called the render function.

If I put all this in a separate document and load it in via an iframe (that's what I did for the facebook one) I loose functionality because it tries to open the internal dialog inside the tiny iframe and it's unusable.

Does anyone know a workaround that will allow you to use a Google Plus button within the shadow, or at the very least a way to force the Google plus button to use a popup window for the comment dialog like the facebook button does?

I have found a few different polymer elements made by other people for Google Plus buttons but none of them have templates, and all add the elements in dynamically so there is no shadow dom for that element, but these elements dont work if they are already inside of a shadow dom.

In my case I have a "share" paper-dialog that I want to put these buttons in, and the paper-dialog puts everything inside it's own shadow dom. So I cannot eliminate shadow dom from the application.

Any help here would be greatly apreciated

I have the same problem and tried the same things with you with no success. It's weird Google's own projects interfere with each other. — Etherealone

John B John B · Accepted Answer · 2015-06-11T10:53:03

The trick seems to be with this.async(), see the following code for an example:

https://github.com/kunalnagar/googleplus-badge/blob/master/googleplus-badge.html

Here are the pertinent parts:


    <polymer-element name="googleplus-badge" attributes="type href layout showphoto showcoverphoto showowners showtagline theme width">
        <template>
            <div id="gplusbadge"></div>
            <div id="gpluserrors"></div>
        </template>
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <script>
        Polymer({
        ...
        renderBadge: function() {

                var params = {
                        'class': 'g-page',
                        'href': this.href,
                        'layout': this.layout,
                        'showcoverphoto': this.showcoverphoto,
                        'width': this.width,
                        'theme': this.theme
                    };
                    gapi.page.render(this.$.gplusbadge, params);
                ...
        },

        ready: function() {

            this.async(this.renderBadge, null, 1000);
        }

Google Plus Button and Polymer

1 Answers