Google rending +1 button way above and left of page content

Question

We have implemented google +1 buttons on our site and they have served reliably for some time. However we recently noticed that the buttons are not serving reliably. We rarely see them appear in their designated spaces.

For example on this page: Sample Page : you'll see a gray box of social buttons to left of the page. In it, there is SUPPOSED to be a Google +1 button.

We've requested the button with this code:

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

We've also tried this code:

<div id="social-google" class="social">
    <!-- Place this tag where you want the share button to render. -->
    <div class="g-plus" data-action="share" data-size="small" data-annotation="bubble"></div>

    <!-- Place this tag after the last share tag. -->
    <script type="text/javascript">
        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
         })();
    </script>
</div>

Occasionally we'll see a Google +1 button render but, more often than not, the space reserved for the button is apparently blank. When you examine things with firebug, you see that Google HAS attempted to render a button, but for some reason it has placed the button far above and left of the page boundaries.

Here is the top of the html Google generates for the button:

<div id="___plusone_0" style="position: absolute; width: 450px; left: -10000px;">
    <iframe id="I0_1377554650466" width="100%" scrolling="no" frameborder="0" hspace="0 marginheight="0" marginwidth="0" style="position:absolute;top:-10000px;width:450px;margin:0px;border-style:none" tabindex="0" vspace="0" name="I0_1377554650466" src="https://apis.google.com/_/+1/fastbutton?bsv=o&usegapi=1&size=medium&hl=en-US&origin=http%3A%2F%2Fwww.comicbookresources.com&url=http%3A%2F%2Fwww.comicbookresources.com%2F%3Fpage%3Darticle%26id%3D47537&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps- ...

As you can see Google gave its generated ___plusone_0 div a left position of -10000px and gave the inner iFrame a top position of -10000px. So the button is there. It's just floating out in space. If I manipulate theses position settings (to 0px) the button becomes visible in its appropriate spot.

Any idea why this would happen? Any idea how we can fix this?

Answer 1

Put the button code in a a new HTML file and put that file in an iframe. Compared to @U-D13's answer, it's less susceptible to changes by Google.

Answer 2

During the last few days I'm suffering from this problem too. I have a page building app. One of the widgets is google plus: users can enter a url, and the app generates a button. (So there can be more, than 1 button on the page.) Then user saves the page and can see it on Facebook.

Recommendations and observations...

1. Double check the protocol of google api script. For example, if your website is on https and you are trying to load http://apis.google.com/js/plusone.js, your buttons will probably fail to render.

2. When I tested this issue on my server, I occasionally opened the app in 2 browser tabs at the same time. Google buttons didn't appear in the first tab, but they did in the second one!

3. My app requires user to be authorized on Facebook. When I opened the app without authorization, the buttons were shown as expected. But when I logged in and refreshed the page - buttons disappeared.

4. When I opened the page on Facebook, buttons didn't appear, regardless of whether I was logged in or not.

I beg your pardon, if you think these notices have no sense, but they may save someone's time in future.

Workaround

Suppose, you're parsing the following code:

<!-- google button will be added into this div -->
<div class="googlePlus" data-href="http://google.com"></div>

jQuery function, which parse all .googlePlus divs.

$('.googlePlus').each(function () {
    var $googleDiv = $(this);

    // check, if button is already parsed
    if (!$googleDiv.children().length) {

        // add temporary id to the parent div
        var $id = 'googlePlus-' + new Date().getTime();
        $div.attr({
            'id': $id
        });

        // create, add and render btn (IE compatible method)
        var gPlusOne = document.createElement('g:plusone');
        gPlusOne.setAttribute('href', $googleDiv.attr('data-href'));
        document.getElementById($id).appendChild(gPlusOne);
        gapi.plusone.go($id);

        // function, correcting css styles
        if (!$.isFunction($.fn.fixGooglePlus)) {
            $.fn.fixGooglePlus = function () {
                $(this).children('div').children('iframe').addBack().css({
                    position: 'static',
                    width: 106,
                    height: 24
                });
            }
        }

        // run function, until css is fixed
        var $timer = setInterval(function () {
            $googleDiv.fixGooglePlus();
            if ($googleDiv.find('iframe').css('position') == 'static') {
                clearInterval($timer);
                $googleDiv.removeAttr('id');
            }
        }, 100);

    } // button hasn't been parsed

});

Answer 3

You can try adding the following CSS declaration to your stylesheet:

#___plusone_0, #___plusone_0 iframe {
    position:static !important;
}

This is a hackaround, so don't depend on it in long term.

Based on an old thread in Drupal Issues.