3

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

例如在此页面上：示例页面：您会在页面左侧看到一个灰色的社交按钮框。其中，应该有一个 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），按钮就会在其适当的位置可见。

知道为什么会发生这种情况吗？知道我们如何解决这个问题吗？

4

3 回答 3

2

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

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

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

基于Drupal 问题中的一个旧线程。

于 2013-08-27T15:22:25.540 回答
0

将按钮代码放在一个新的 HTML 文件中，然后将该文件放在一个iframe. 与@U-D13 的答案相比，它不太容易受到谷歌更改的影响。

于 2014-06-22T04:54:26.803 回答
0

在过去的几天里，我也遇到了这个问题。我有一个页面构建应用程序。其中一个小部件是 google plus：用户可以输入一个 url，应用程序会生成一个按钮。（所以页面上可以有超过 1 个按钮。）然后用户保存页面并可以在 Facebook 上看到它。

建议和意见...

  1. 仔细检查 google api 脚本的协议。例如，如果您的网站已打开https并且您正在尝试加载http://apis.google.com/js/plusone.js，您的按钮可能无法呈现。

  2. 当我在我的服务器上测试这个问题时，我偶尔会同时在 2 个浏览器选项卡中打开该应用程序。Google 按钮没有出现在第一个选项卡中，但它们出现在第二个选项卡中！

  3. 我的应用要求用户在 Facebook 上获得授权。当我未经授权打开应用程序时，按钮按预期显示。但是当我登录并刷新页面时 - 按钮消失了。

  4. 当我在 Facebook 上打开页面时，无论我是否登录，按钮都没有出现。

请原谅，如果您认为这些通知毫无意义，但它们可能会在将来节省某人的时间。

解决方法

假设您正在解析以下代码：

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

jQuery 函数，它解析所有的.googlePlusdiv。

$('.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

});
于 2013-09-01T10:15:39.197 回答