Настройка кнопки Google +1 (PlusOne)

Приветствую Вас, гости и подписчики блога 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-кода для кнопки. При параллельной загрузке элементов время загрузки страницы не увеличивается, а это ни что иное, как рациональное использование кода кнопки.

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

Для достижения наилучшей производительности рекомендуется располагать вышеприведенный код сразу же за кодом тэга «+1».

Если же Вы захотите установить определенные параметры для скрипта, то следуйте следующему синтаксису:

  window.___gcfg = {
    lang: 'ru',
    parsetags: 'onload'
  };

Вот пример кода web-страницы с использованием асинхронной загрузки:

Конфигурация

Установка целевого URL

Три вещи, по которым «+1» определяет целевой URL, располагаются в следующем порядке:

1. Атрибут кнопки href
   Этот атрибут явно определяет целевой URL кнопки «+1».
2. Тэг страницы
   Если атрибут href для кнопки не установлен, то Google будет использовать канонический URL страницы.
3. 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».

Пример использования Explicit:

Пример использования Explicit Render:

  
    
    
    
    
  
  
    Render the +1 button
    

  

Атрибуты тэга «+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 со следующей структурой:

{
  "href": target URL,
  "state": "on"|"off"
}

Свойство «state» установлено в «on» для кнопки «+1» и в «off» для удаления «+1».

Атрибут «onstartinteraction»:
Значение: function(jsonParam)
Описание: если определена, то функция вызывается либо когда пользователь наводит курсор мыши на кнопку +1, либо когда появляется окошко подтверждения (когда пользователь плюсанул страницу). Вы, например, можете использовать эту функцию для изменений на вашей странице, таких, как напрмер приостановка видео, когда появляется всплывающее окошко.
Callback-функция должна быть в глобальном пространстве имен и может принимать единственный параметр, такой как JSON object со следующей структурой:

{
  "id": target URL,
  "type": hover|confirm
}

Атрибут «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!
Кстати, чуть ниже этой статьи тоже есть такая кнопка, и Вы можете ею воспользоваться, если считаете, что статья полезна для начинающих вебмастеров :)

Метки: Google, PlusOne, кнопки