24 июня 2011 г.

Улучшенный код для кнопки Google +1

Оригинал статьи: Better Embedding Code for Google +1 Buttons

Google хочет видеть свою кнопку «+1» на каждой веб-странице, но многие терпеть не могут виджетов и кнопок, потому что они засоряют страницы и увеличивают время загрузки на сотни миллисекунд.

Google помешан на скорости и производительности, однако с работой по оптимизации кода внедрения кнопки «+1» не справился. Как разъяснил Аарон Питерс (Aaron Peters), код Google блокирует загрузку страницы, если его разместить внутри тэга <head>, так что лучше его поместить перед закрытием тэга <body>. А ещё лучше было бы загружать скрипт Google +1 вне блоков, как это сделал Google со сценариями Google Analytics, AdSense и Google Related Links.

Аарон также заметил, что код JavaScript не минимизирован, может храниться в кэше браузера в течение всего 6 минут, а ещё там есть ошибка в адресе этой страницы: «http» следует заменить на «https», чтобы избежать лишней переадресации.

Вот улучшенный код, который предлагает Аарон:


<!— Place this tag just before your close body tag —>
<script>
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'https://apis.google.com/js/plusone.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

<!— Place this tag where you want the +1 button to render —>
<g:plusone></g:plusone>

Очевидно, этот код по умолчанию не будет работать в Blogger. Способ обойти это есть, однако не следует им пользоваться, если вы плохо знаете HTML и не пробовали редактировать шаблоны Blogger. В общем, нужно заменить <b:include data='blog' name='all-head-content'/> на код, созданный Blogger («Просмотр кода» / «View source» вам в помощь), а затем удалить: <meta content='blogger' name='generator'/>.

Как объясняет Google, «большинство браузеров загружают код параллельно с другими скриптами, что уменьшает время загрузки веб-страницы».