2011-06-01 16 views
5

Mam kilka widżetów na stronie, którą rozwijam i ładuję je wszystkie asynchronicznie z pliku javascript, aby nie blokować DOM.Problem Ładowanie widżetu Google +1 Asynchronicznie

Na przykład, zrobić to z widżetów Digg i Buzza i działa prawidłowo:

// 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'); 
} 

Jeśli chodzi o nowy widget Google +1, ta sama logika nie działa:

Próbowałem użyć tagu HTML5 i <g:plusone></g:plusone>. Ani praca.

Oto dokumentacja dla świeżo uruchomionego serwisu: http://code.google.com/apis/+1button/

Zauważyłem również można wykonać następujące czynności, jeśli osadzanie skrypt bezpośrednio w HTML.

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

Czy istnieje sposób na wykorzystanie parametrów {"parsetags": "explicit"} z jQuery .getScript?

P.S. Próbowałem również przełączania pierwszej i drugiej linii w ramach funkcji plusOneShare, która również nie działała.

Dzięki!

Odpowiedz

1

Sposób Opisane w moim pytaniu działa doskonale. Był tylko jakiś błąd na końcu Google, jeśli mam rację. Próbowałem uruchomić tę funkcję kilka godzin po tym, jak ją ogłosili. Dwa dni później wszystko działa idealnie.

Metoda .getScript to dobry sposób na załadowanie +1 za pośrednictwem AJAX.

+0

Jakieś słowo na temat przekazywania parametrów? Próbuję przekazać {"lang": "es-419"}, ale nie mogłem znaleźć jak dotąd. – Danita

+0

Nie ma pojęcia. Miałem szczęście, ponieważ ustawienia domyślne były tymi, które chciałem. Dam ci znać, jeśli znajdę na to rozwiązanie. –

+1

Wymyśliłem. Zobacz moją odpowiedź poniżej. – Danita

2

Z jakiej przeglądarki korzystasz? Poniższy przykład pełna strona działa na mnie:

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

Dobra wiadomość. Mój kod zaczął działać idealnie dzień lub dwa później. Nie zmieniłem sposobu myślenia, zrezygnowałem z próbowania i po prostu odszedłem, jeśli jest po tym wątku. Wydaje mi się, że Google wciąż wymuszał zmiany w zakresie +1 w tym czasie. W końcu cała usługa ma zaledwie kilka dni. –

1

Jeśli używasz getScript (lub dowolnej metody asynchronicznego ładowania), możesz skończyć z pustej strony na nieobsługiwanych przeglądarek. plusone.js zastępuje całą stronę na iPhone/iPad/Android etc ..

Ja również poszukuje rozwiązania, aby móc korzystać z 'parsetags: "explicit"' z getScript ..

+1

OK, najwyraźniej google naprawił problem. – levent

2

skończyło się robić coś tak aby wesprzeć przekazując parametr do +1 skryptu:

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); 
1

Teraz też zrobiłem kilka badań na ten temat - i KOCHAM $ .getScript - (nie w przerażający sposób, ale tylko dlatego, że przyspiesza początkowe wyświetlanie całej mojej strony s). Jeśli kiedykolwiek zbudowałeś stronę internetową zawierającą odniesienia do Twittera, Facebooka, Plusone, OpenX, itp., Wiesz o czym mówię :)

W każdym razie, ostatnio odkryłem, że "plusone.js" można załadować async (używając jQuery $.getScript) i jednocześnie być poinstruowany, aby użyć pewnej język:

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

Hope this helps ktoś :)

+0

Dzięki. To świetne rozwiązanie. – kushin

2

Innym rozwiązaniem dla async załadunku. Działa doskonale dla mnie, szczególnie jeśli używasz php i chcesz dynamicznie przypisywać język.

<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> 
Powiązane problemy