异步加载 Google +1 小部件的问题答案

【问题标题】：Issue Loading Google +1 Widget Asynchronously异步加载 Google +1 小部件的问题
【发布时间】：2011-06-01 21:16:35
【问题描述】：

我正在开发的网站上有一些小部件，我从一个 javascript 文件异步加载它们，因此它不会阻止 DOM 完成。

例如，我使用 Digg 和 Buzz 小部件执行此操作，效果很好：

// Buzz Share
function buzzShare() {
    $jQ('.sharebox').append('<div class="widget"><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a></div>');
    $jQ.getScript('http://www.google.com/buzz/api/button.js');
}
// Digg Share
function diggShare() {
    $jQ('.sharebox').append('<div class="widget"><a class="DiggThisButton DiggMedium"></a></div>');
    $jQ.getScript('http://widgets.digg.com/buttons.js');
}

当谈到新的 Google +1 小部件时，同样的逻辑不起作用：

// PlusOne Share
function plusOneShare() {
    $jQ.getScript('http://apis.google.com/js/plusone.js');
    $jQ('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
}

我尝试同时使用 HTML5 标签和<g:plusone></g:plusone>。都不行。

这是刚刚推出的服务的文档：http://code.google.com/apis/+1button/

我还注意到，如果将脚本直接嵌入 HTML，您可以执行以下操作。

 <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>

有没有办法将 {"parsetags": "explicit"} 参数与 jQuery .getScript 一起使用？

附：我还尝试在 plusOneShare 函数中切换第一行和第二行，但也没有用。

谢谢！

【问题讨论】：

标签： jquery google-buzz google-plus-one

【解决方案1】：

你用的是什么浏览器？以下整页示例适用于我：

<html>
  <head>
    <title>jQuery Dynamic load test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getScript('https://apis.google.com/js/plusone.js');
        $('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
      });
    </script>
  </head>
  <body>
    Hello world!
    <div class="sharebox"></div>
  </body>
</html>

【讨论】：

好消息。大约一两天后，我的代码开始完美运行。我没有改变想法，事实上我放弃了尝试，只是在这个线程之后保持原样离开。我认为 Google 在那段时间里仍在推出 +1 的更改。毕竟，整个服务才几天。

【解决方案2】：

我最终做了这样的事情来支持将参数传递给 +1 脚本：

var hd = document.getElementsByTagName('head')[0];
var scr = document.createElement('script');
scr.type ='text/javascript';
scr.async = true;
scr.innerHTML = "{lang: 'es-419'}"; // Magic! :)
scr.src = "https://apis.google.com/js/plusone.js";
hd.appendChild(scr);

【讨论】：

【解决方案3】：

如图所示 http://code.google.com/intl/pt-BR/apis/+1button/#plusonetag-parameters

您可以使用

进行显式加载

$(document).ready(function() { gapi.plusone.go('content'); });

【讨论】：

【解决方案4】：

异步加载的另一种解决方案。非常适合我，特别是如果您使用 php 并希望动态分配语言。

<script type="text/javascript">
    window.___gcfg = {
<? if ($lang!= 'en'){    ?>
     lang: '<?=$lang?>', 
<? } ?>
     parsetags: 'explicit',
     annotation: 'inline',
     size: 'medium'
    };
    $(document).ready(function() { 
        $.getScript('https://apis.google.com/js/plusone.js',function(){
            gapi.plusone.render("plusone-div");
        });
    });
</script>

【讨论】：

【解决方案5】：

如果您使用 getScript（或任何异步加载方法），您最终会在不受支持的浏览器上看到一个空白页面。 plusone.js 替换了您在 iphone/ipad/android 等上的整个页面。

我也在寻找一种能够将 'parsetags: "explicit"' 与 getScript 一起使用的解决方案。

【讨论】：

【解决方案6】：

我在问题中描述的方法非常有效。如果我是正确的，那么谷歌的结果只是某种错误。在他们宣布该功能几个小时后，我试图让该功能正常工作。大约两天后，它现在可以完美运行了。

.getScript 方法是通过 AJAX 加载 +1 的好方法。

【讨论】：

关于如何将参数传递给它的任何消息？我正在尝试通过 {"lang":"es-419"} 但我还找不到方法。
没有线索。我很幸运，因为默认设置是我想要的。如果我找到解决方案，我会告诉你的。
我想通了。请参阅下面的答案。

【解决方案7】：

现在，我也对此进行了一些研究——我喜欢 $.getScript——（不是以令人毛骨悚然的方式，而是因为它加快了我所有页面的初始显示速度）。如果你曾经建立过一个网站，其中包含对 Twitter、Facebook、Plusone、OpenX 等的引用，那么你就知道我在说什么了 :)

无论如何，我最近发现“plusone.js”可以异步加载（使用jQuery $.getScript），同时被指示使用某种语言：

<script type="text/javascript">
  window.___gcfg = { lang: 'sv-SE' };
  $(document).ready(function() { 
     $.getScript("https://apis.google.com/js/plusone.js");
  });
</script>

<body>
   <g:plusone size="medium"></g:plusone>
</body>

希望这对任何人都有帮助:)

【讨论】：

谢谢。这是一个很好的解决方案。