google-plus - 谷歌在页面内容的上方和左侧呈现 +1 按钮

Question

我们已经在我们的网站上实现了 google +1 按钮，它们已经可靠地服务了一段时间。但是，我们最近注意到按钮的服务不可靠。我们很少看到他们出现在他们指定的空间。

例如本页:Sample Page :您会在页面左侧看到一个灰色的社交按钮框。其中，应该有一个 Google +1 按钮。

我们已请求使用此代码的按钮:

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

我们也试过这段代码:

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

有时我们会看到 Google +1 按钮呈现，但通常情况下，为按钮保留的空间显然是空白的。当您使用 firebug 检查事物时，您会看到 Google 已尝试呈现一个按钮，但出于某种原因它已将该按钮放置在页面边界的上方和左侧。

这是 Google 为按钮生成的 html 的顶部:

<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- ...

如您所见，Google 为其生成的 ___plusone_0 div 提供了 -10000 像素的左侧位置，并为内部 iFrame 提供了 -10000 像素的顶部位置。所以按钮就在那里。它只是漂浮在太空中。如果我操纵这些位置设置(到 0px)，按钮将在其适当的位置可见。

知道为什么会这样吗？知道我们如何解决这个问题吗？

Answer 1

您可以尝试将以下 CSS 声明添加到您的样式表中:

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

这是一个 hackaround，所以不要长期依赖它。

基于 an old thread in Drupal Issues .