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

Приветствую Вас, гости и подписчики блога 4remind.ru. Многие из Вас, уверен, знают для чего нужна кнопка Google «+1» (PlusOne). Да, эта кнопка в настоящие времена, скажем прямо, должна непременно присутствовать на страницах сайтов и блогов, так как она помогает продвижению Вашего веб-ресурса в Интернете, и чем больше посетителей накликало по кнопке «+1» на вашем сайте, тем более популярным он будет и в глазах поисковика от компании Google.

Кнопка Google +1


Настроить и установить код этой кнопки совсем просто — код кнопки Google +1 можно получить на станице Google-webmasters: «Добавьте кнопку +1 на свой сайт». Но здесь будет изложена информация о ручной настройке, более детальной, и использовании оптимального метода загрузки скрипта для кнопки Google «+1».

Итак, поехали...
Настроек для кнопки так уж и мало, и варьируются они от самого простого изменения размера кнопки до методов оптимальной загрузки кода скрипты.

Простая кнопка Google +1

Самый простой, и тем временем минимально необходимый, способ добавить кнопку «+1» на страницы сайта или блога, включая JavaScript, нужно всего лишь добавить следующие теги:


 

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

Если мы вставим выше приведенный код на страницу сайта, то кнопка сразу же будет отображаться с настройками по умолчанию, примерно как на рисунке:
Кнопка Google +1 по умолчанию

Синтаксис стандартного тэга кнопки 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-страницы с использованием асинхронной загрузки:


  
    +1 — асинхронная загрузка
    
  
  
    

    
  

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

Установка целевого 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:


  
    +1 Пример: Explicit загрузка
    
    
  
  
    

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


  
    +1 Пример: 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» находящиеся на странице.

Размеры кнопок

Кликните по изображению, чтобы увеличить

Размеры кнопок Google +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, кнопки

Поделитесь материалом с другими, воспользуйтесь этими кнопками:
Получать обновления и новые материалы блога по E-mail

8 комментариев к “Настройка кнопки Google +1 (PlusOne)”

  1. Путешественник:

    Спасибо, помогло с асинхронным кодом

    Ответить
  2. креатин:

    Огромное спасибо за инфу. Автору респект и уважуха.

    Ответить
  3. Ксения:

    При установке кода Explicit блокируется кнопка +1 и появляется треугольник (ошибка). Подскажите как устранить ошибку.

    Ответить
    • Ксения, Вы бы подробнее описали, куда и как Вы устанавливали код Explicit. Это плагин, расширение или еще что-то? Также не мешало бы знать, как у Вас была установлена кнопка +1. Да и не помешали бы ссылки на ваш сайт (и ссылки откуда брали код Explicit), чтобы увидеть что не так.

      Ответить
      • Ксения:

        Пример использования Explicit, который указан на Вашем сайте я установила на странице своего сайта. Пример установки кода на странице:

Новости блога в социальных сетях

Новости блога 4remind.ru в Твиттере Персональная страница блога 4remind.ru в Facebook Персональная страница блога 4remind.ru в Google+ Новостная лента блога 4remind.ru в FriendFeed

4remind.ru - персональный блог вебмастера