Приветствую Вас, гости и подписчики блога 4remind.ru. Многие из Вас, уверен, знают для чего нужна кнопка Google «+1» (PlusOne). Да, эта кнопка в настоящие времена, скажем прямо, должна непременно присутствовать на страницах сайтов и блогов, так как она помогает продвижению Вашего веб-ресурса в Интернете, и чем больше посетителей накликало по кнопке «+1» на вашем сайте, тем более популярным он будет и в глазах поисковика от компании Google.
Настроить и установить код этой кнопки совсем просто — код кнопки Google +1 можно получить на станице Google-webmasters: «Добавьте кнопку +1 на свой сайт». Но здесь будет изложена информация о ручной настройке, более детальной, и использовании оптимального метода загрузки скрипта для кнопки Google «+1».
Итак, поехали…
Настроек для кнопки так уж и мало, и варьируются они от самого простого изменения размера кнопки до методов оптимальной загрузки кода скрипты.
Простая кнопка Google +1
Самый простой, и тем временем минимально необходимый, способ добавить кнопку «+1» на страницы сайта или блога, включая JavaScript, нужно всего лишь добавить следующие теги:
Скрипт должен обязательно загружаться по протоколу HTTPS и может быть вставлен в абсолютно любое место страницы сайта. Но стоит иметь ввиду, что для лучшей производительности Вашего сайта и более быстрой загрузки страниц, загружать сценарий JavaScript оптимальнее асинхронно, о чем будет рассказано далее по тексту.
Если мы вставим выше приведенный код на страницу сайта, то кнопка сразу же будет отображаться с настройками по умолчанию, примерно как на рисунке:
Синтаксис стандартного тэга кнопки Google +1 такой:
При желании можно использовать тэг в соответствии стандарту HTML5, но при этом должен быть установлен атрибут класса со значением g-plusone, а так же любой другой атрибут тэга кнопки должен быть с префиксом data- :
По умолчанию скрипт для кнопки при обходе DOM (Document Object Model — Объектная Модель Документа) будет отображать тэг «+1» как кнопку. Но Вам предоставляется возможность улучшить время рендеринга на страницах, особенно страниц с большим содержимым, при помощи JavaScript API делая обход только одного элемента кнопки на странице, или отображать какой-нибудь свой определенный элемент как кнопку «+1». Ну а в общем, добавить кнопку Google +1 с базовыми настройками, настройками по умолчанию, не должно предоставлять трудностей даже для тех, кто не обладает знаниями HTML и CSS.
Асинхронная загрузка JavaScript-кода для кнопки
Асинхронный метод загрузки позволяет продолжать загружать страницу сайта одновременно с загрузкой JavaScript-кода для кнопки. При параллельной загрузке элементов время загрузки страницы не увеличивается, а это ни что иное, как рациональное использование кода кнопки.
Для включения асинхронной загрузки скрипта рекомендуется использовать следующий код:
vars = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
16
})();
17
</script>
Конфигурация
Установка целевого URL
Три вещи, по которым «+1» определяет целевой URL, располагаются в следующем порядке:
Атрибут кнопки href
Этот атрибут явно определяет целевой URL кнопки «+1».
Тэг страницы
Если атрибут href для кнопки не установлен, то Google будет использовать канонический URL страницы.
URL, определяемый использованием document.location.href (не рекомендуется)
Если ни по одному из этих пунктов нет данных, то Google будет использовать адрес страницы, который содержится в DOM, и потому, что этот URL может содержать идентификаторы сессий, якоря, или другие параметры, которые на самом деле не являются частью канонического URL. Поэтому настоятельно рекомендуется либо установить атрибут HREF для кнопки «+1», либо добавить тэг в заголовок своей страницы:
И еще. Кнопка «+1» обязательно должна находиться на опубликованных (доступных из вне) страницах. Если же попытаться плюсануть страницу, которая не опубликована, то произойдет ошибка.
Параметры тэга Script
Этих параметров два, и они определяются в пределах элемента < script / > для установки языка (локали) и метода загрузки кнопки.
Параметр «lang»:
значение: код языка (language code), по умолчанию «en-US»
описание: устанавливает код языка для кнопки «+1». (коды для разных языков приведены в конце статьи)
Параметр «parsetags»:
значение: explicit, onload (по умолчанию «onload»)
описание: устанавливает механизм загрузки
onload
- все кнопки автоматически отрисовываются после занрузки страницы (смотрите выше пример кода web-страницы с использованием асинхронной загрузки);
explicit
- кнопки отрисуются только при явном вызове gapi.plusone.go или gapi.plusone.render;
При явном совместном использовании вызовов «go» и «render», которые указывают на специфические контейнеры вашей страницы, можно предотвратить прохождения скриптом всей DOM, что может сократить время рендеринга кнопки «+1».
<a href="#"onclick="renderPlusone();">Render the +1 button</a>
14
<div id="plusone-div"></div>
Атрибуты тэга «+1»
Эти атрибуты контролируют настройки для каждой кнопки. Вы можете использовать их как пары Атрибут/Значение в теге кнопки «+1» или как пары Ключ/Значение при вызовах gapi.plusone.render.
Атрибут «href»:
Значение: URL кнопки +1 (по умолчанию URL текущей страницы)
Описание: устанавливайте этот атрибут, когда кнопка +1 должна быть определена для другой, не текущей страницы.
Атрибут «size»:
Значение: small, medium, standard, tall (по умолчанию standard)
Описание: устанавливает размер кнопки (смотрите таблицу размеров в конце статьи).
Атрибут «annotation»:
Значение: none, bubble, inline (по умолчанию bubble)
Описание: аннотация, отображающаяся за кнопкой.
none
- нет дополнительной аннотации.
bubble
- количество пользователей, плюсанувших страницу, отображающаяся за кнопкой в графическом виде.
inline
- отображает графические профили пользователей, плюсанувших страницу и которые на странице сейчас, и общее количество пользователей, плюсанувших страницу.
Атрибут «width»:
Значение: int (целое, по умолчанию не определено)
Описание: усли атрибут «annotation» = «inline», то устанавливает ширину в пикселях для кнопки и inline-аннотации. Если ширина не указана, то ширина кнопки и inline-аннотации равна 450px.
Атрибут «align»:
Значение: left, right (по умолчанию left)
Описание: горизонтальное положение кнопки в пределах ее фрейма.
Атрибут «expandTo»:
Значение: список, разделенный запятыми: top, right, bottom, left (по умолчанию список пуст)
Описание: устанавливает позиции, в которых будет отображаться всплывающее окошко при наведении и подтверждении по отношению к кнопке. Установите этот параметр, если Ваша страница содержит некоторые элементы, такие как объекты Flash, которые могут помешать отображению всплывающего окошка. Например, «top» означает, что всплывающее окошко будет появляться над кнопкой.
Атрибут «callback»:
Значение: function(jsonParam)
Описание: если определена, то функция вызывается после нажатия на кнопку «+1». Callback-функция должна быть в глобальном пространстве имен и может принимать единственный параметр, такой как JSON object со следующей структурой:
Свойство «state» установлено в «on» для кнопки «+1» и в «off» для удаления «+1».
Атрибут «onstartinteraction»:
Значение: function(jsonParam)
Описание: если определена, то функция вызывается либо когда пользователь наводит курсор мыши на кнопку +1, либо когда появляется окошко подтверждения (когда пользователь плюсанул страницу). Вы, например, можете использовать эту функцию для изменений на вашей странице, таких, как напрмер приостановка видео, когда появляется всплывающее окошко.
Callback-функция должна быть в глобальном пространстве имен и может принимать единственный параметр, такой как JSON object со следующей структурой:
Атрибут «onendinteraction»:
Значение: function(jsonParam)
Описание: если определена, то функция вызывается либо когда отображается всплывающее окошко при наведении или подтверждении.
Вы, например, можете использовать эту функцию для изменений на вашей странице, таких, как напрмер продолжение воспроизведения видео, когда всплывающее окошко исчезает.
Эта функция принимает единственный параметр, как было показано в атрибуте «onstartinteraction».
Атрибут «count»:
Значение: true, false (по умолчанию true)
Описание: Не рекомендуется. Вместо того, чтобы отключить отображение количество плюсов, используйте annotation=«none».
JavaScript API
JavaScript кнопки «+1» определяет две функции рендеринга в пространстве имен gapi.plusone. Вам нужно только вызвать эти функции, если Вы отключили автоматический рендеринг установкой «parsetags» = «explicit»
gapi.plusone.render( container, parameters )
Описание: производит рендеринг определенного контейнера как виджет кнопки «+1».
container
- контейнер для рендеринга как кнопки «+1». Определите либо ID контейнера (строка), либо сам элемент (itself).
parameters
- объект, содержащий атрибуты тэга «+1» как пары Ключ/Значение (напримаер, {«size»: «tall», «callback»: myCallbackFunction}.
gapi.plusone.go( opt_container )
Описание: производит рендеринг всех тэгов/классов «+1» в определенном контейнере. Эта функция должна использоваться только если «parsetags» = «explicit».
opt_container
- контейнер, содержащий тэги кнопки «+1» для рендеринга. Определите либо ID контейнера (строка), либо сам элемент (itself). Если же opt_container отсутствует, то рендеринг проводится для всех тэгов/класссов «+1» находящиеся на странице.
Размеры кнопок
Кликните по изображению, чтобы увеличить
Коды языков
Язык
Код
Afrikaans
af
Amharic
am
Arabic
ar
Basque
eu
Bengali
bn
Bulgarian
bg
Catalan
ca
Chinese (Hong Kong)
zh-HK
Chinese (Simplified)
zh-CN
Chinese (Traditional)
zh-TW
Croatian
hr
Czech
cs
Danish
da
Dutch
nl
English (UK)
en-GB
English (US)
en-US
Estonian
et
Filipino
fil
Finnish
fi
French
fr
French (Canadian)
fr-CA
Язык
Код
Galician
gl
German
de
Greek
el
Gujarati
gu
Hebrew
iw
Hindi
hi
Hungarian
hu
Icelandic
is
Indonesian
id
Italian
it
Japanese
ja
Kannada
kn
Korean
ko
Latvian
lv
Lithuanian
lt
Malay
ms
Malayalam
ml
Marathi
mr
Norwegian
no
Persian
fa
Polish
pl
Язык
Код
Portuguese (Brazil)
pt-BR
Portuguese (Portugal)
pt-PT
Romanian
ro
Russian
ru
Serbian
sr
Slovak
sk
Slovenian
sl
Spanish
es
Spanish (Latin America)
es-419
Swahili
sw
Swedish
sv
Tamil
ta
Telugu
te
Thai
th
Turkish
tr
Ukrainian
uk
Urdu
ur
Vietnamese
vi
Zulu
zu
Желаю Вам получить как можно больше пользы от «батона» Google +1!
Кстати, чуть ниже этой статьи тоже есть такая кнопка, и Вы можете ею воспользоваться, если считаете, что статья полезна для начинающих вебмастеров :)
Ксения, Вы бы подробнее описали, куда и как Вы устанавливали код Explicit. Это плагин, расширение или еще что-то? Также не мешало бы знать, как у Вас была установлена кнопка +1. Да и не помешали бы ссылки на ваш сайт (и ссылки откуда брали код Explicit), чтобы увидеть что не так.
Спасибо, помогло с асинхронным кодом
Огромное спасибо за инфу. Автору респект и уважуха.
При установке кода Explicit блокируется кнопка +1 и появляется треугольник (ошибка). Подскажите как устранить ошибку.
Ксения, Вы бы подробнее описали, куда и как Вы устанавливали код Explicit. Это плагин, расширение или еще что-то? Также не мешало бы знать, как у Вас была установлена кнопка +1. Да и не помешали бы ссылки на ваш сайт (и ссылки откуда брали код Explicit), чтобы увидеть что не так.
Пример использования Explicit, который указан на Вашем сайте я установила на странице своего сайта. Пример установки кода на странице:
Для вставки кода в комментарии можно использовать BB-коды:
[text] [/text], [php] [/php], [html] [/html]