Проблема Загрузка виджета Google +1 Асинхронно - PullRequest
Новая
       20

Проблема Загрузка виджета Google +1 Асинхронно

5 голосов
/ 02 июня 2011

У меня есть несколько виджетов на сайте, который я разрабатываю, и я загружаю их все асинхронно из файла 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?

PS Я также пробовал переключаться между первой и второй строками в функции plusOneShare, которая тоже не работала.

Спасибо!

Ответы [ 7 ]

2 голосов
/ 07 августа 2011

Как показано на http://code.google.com/intl/pt-BR/apis/+1button/#plusonetag-parameters

, вы можете выполнить явную загрузку используя 

$(document).ready(function() { gapi.plusone.go('content'); });
2 голосов
/ 01 декабря 2011

Другое решение для асинхронной загрузки.У меня отлично работает, особенно если вы используете 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>
2 голосов
/ 15 июня 2011

Я закончил тем, что делал что-то подобное для поддержки передачи параметров в сценарий +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);
2 голосов
/ 02 июня 2011

Какой браузер вы используете?Следующий пример полной страницы работает для меня: 

<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>
1 голос
/ 27 августа 2011

Теперь я также провел некоторые исследования по этому вопросу - и я ЛЮБЛЮ $ .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>

Надеюсь, это кому-нибудь поможет:)

1 голос
/ 04 июня 2011

Метод, который я описал в моем вопросе, работает отлично. На моей стороне Google была просто какая-то ошибка, если я прав. Я пытался заставить функцию работать через несколько часов после того, как они объявили об этом. Примерно через два дня все работает отлично.

Метод .getScript - это хороший способ загрузить +1 через AJAX.

1 голос
/ 03 июня 2011

Если вы используете getScript (или любой другой метод асинхронной загрузки), вы получите пустую страницу в неподдерживаемых браузерах. plusone.js заменяет всю вашу страницу на iphone / ipad / android и т. д.

Я также ищу решение, которое могло бы использовать 'parsetags: "явный"' с getScript ..

...