Добавляем кнопку Google +1

Добавляем кнопку Google +1

Продолжаю тему о том, как добавить социальные кнопки в блог. В предыдущей статье я уже говорил как вставить кнопки Твитнуть, поделиться, нравится, класс, а вот на кнопке Гугл +1 решил остановиться по подробнее.

Для начала немного о том, что это “за фрукт” такой – кнопка +1. Всем известные кнопки социальных сетей созданы для того, что бы посетитель сайта мог легко поделиться интересным материалом с друзьями. И посетителю хорошо – легко и удобно, и социальной сети – “лишний раз” к обратились, и вебмастеру – популяризация его ресурса в соцсети. Подобным образом и действует кнопка Google +1, но ко всему этому, +1 показывается при выдачи результатов поиска в Гугле. То есть, при поиске “искатели” видят на каком ресурсе и сколь раз была нажата кнопка Гугл +1. А это значительно добавляет авторитет, правда пока только в глазах людей, а вот Гугл только планирует сортировать выдачу с учетом Гугл +1.

Сразу приведу пример работы этой кнопки: на статью “Сколько сайтов в Рунете” я поставил +1. Теперь при выдачи на запрос “Сколько сайтов в Рунете” видна такая картина:

Как видно, к дополнению ко всему, появилось сообщение, что +1 была нажата на этой странице.

Хватит теории, переходим к практики.

И так, заходим в специальный раздел Гугла по этой ссылки.

Перед вами откроется окно, с некоторыми настройками кнопки Google +1, о которых и пойдет речь.

Первое, с чем вам предлагают определится – это с размером кнопки, и видом счетчика (Annotation).

Вот какие варианты могут быть:

Тип кнопки Вид Размеры, px

Маленькая кнопка без счетчика 24х15

Маленькая кнопка со счетчиком 65х15

Маленькая кнопка со списком 215х15

Стандартная кнопка без счетчика 38х24

Стандартная кнопка со счетчиком 86х24

Стандартная кнопка со списком 225х24

Средняя кнопка без счетчика 32х20

Средняя кнопка со счетчиком 76х20

Средняя кнопка со списком 220х20

Большая кнопка без счетчика 50х20

Большая кнопка со счетчиком 50х60

Большая кнопка со списком 240х220

Определившись с тем, что вас устраивает переходим к дальнейшей настройки. Выбираем родной язык и можно переходить к коду, но в расширенных настройках есть кое что полезное. Поэтому открываем их и смотрим, то что может быть вам полезным.

Асинхронный код: ставьте эту галочку. Данная “примочка” позволяет одновременно загружать год страницы и скрипт +1, таким образом эта кнопка практически не увеличивает время загрузки страницы. Вначале я не ставил эту галочку и страницы этого блога стали долго грузиться: после отображения всех элементов страница грузилась еще 2-3 секунды. Так что обязательно ставьте.

Синтаксис HTML5: если его выбрать, то в коде будет заключен в теги <div>, что позволяет произвести более тонкую настройку внешнего вида блока через CSS. На ваше усмотрение.

Выполнять код: при загрузке или при явном выборе. На сколько я понял, выполнять при явном выборе предпочтительнее, поскольку опять же уменьшается время загрузки страницы. Но только при явном выборе нельзя установить асинхронную загрузку, так что выбирайте сами – или асинхронная загрузка или при загружать при явном выбор. Лучше первое.

При выборе стандартной кнопки с всплывающим счетчиком, русского языка, асинхронной загрузки получаем такой код:

<!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->

<g:plusone></g:plusone>

<!-- Поместите этот вызов функции отображения в соответствующее место. -->

<script type="text/javascript"> window.___gcfg = {lang: 'ru'};

(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></g:plusone> размещаете в том месте, где хотите видеть кнопку Google +1.

А все остальное (код, написанный ниже <!– Поместите этот вызов функции отображения в соответствующее место. –>) рекомендуется размещать непосредственно после вывода последней кнопки +1 (исходя их этого, можно догадаться, что на странице может быть ни одна такая кнопка).

Вот собственно и все. Ни чего сложного. Ставьте себе на сайты социальные кнопки, а мне можно нажать на +1 и/или другую социалку :)


Карта сайта


Информационный сайт Webavtocat.ru