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

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

Кнопка Google +1


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

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

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

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

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script>
<g:plusone> </g:plusone>

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

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

Синтаксис стандартного тэга кнопки Google +1 такой:

<g:plusone size="tall" ... ></g:plusone>

При желании можно использовать тэг в соответствии стандарту HTML5, но при этом должен быть установлен атрибут класса со значением g-plusone, а так же любой другой атрибут тэга кнопки должен быть с префиксом data- :

<div class="g-plusone" data-size="tall" ... ></div>

По умолчанию скрипт для кнопки при обходе DOM (Document Object Model - Объектная Модель Документа) будет отображать тэг «+1» как кнопку. Но Вам предоставляется возможность улучшить время рендеринга на страницах, особенно страниц с большим содержимым, при помощи JavaScript API делая обход только одного элемента кнопки на странице, или отображать какой-нибудь свой определенный элемент как кнопку «+1». Ну а в общем, добавить кнопку Google +1 с базовыми настройками, настройками по умолчанию, не должно предоставлять трудностей даже для тех, кто не обладает знаниями HTML и CSS.

Асинхронная загрузка JavaScript-кода для кнопки

Асинхронный метод загрузки позволяет продолжать загружать страницу сайта одновременно с загрузкой JavaScript-кода для кнопки. При параллельной загрузке элементов время загрузки страницы не увеличивается, а это ни что иное, как рациональное использование кода кнопки.

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

<script type="text/javascript">
  (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>

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

<g:plusone size="tall" ... ></g:plusone>

<script type="text/javascript">
  (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>

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

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

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

<html>
  <head>
    <title>+1 — асинхронная загрузка</title>
    <link rel="canonical" href="http://www.moysait-primer.com" />
  </head>
  <body>
    <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>
  </body>
</html>

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

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

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

  1. Атрибут кнопки href
    Этот атрибут явно определяет целевой URL кнопки «+1».
  2. Тэг страницы
    Если атрибут href для кнопки не установлен, то Google будет использовать канонический URL страницы.
  3. URL, определяемый использованием document.location.href (не рекомендуется)

Если ни по одному из этих пунктов нет данных, то Google будет использовать адрес страницы, который содержится в DOM, и потому, что этот URL может содержать идентификаторы сессий, якоря, или другие параметры, которые на самом деле не являются частью канонического URL. Поэтому настоятельно рекомендуется либо установить атрибут HREF для кнопки «+1», либо добавить тэг в заголовок своей страницы:

<head>
   ...
   <link rel="canonical" ...>
   ...
</head>

И еще. Кнопка «+1» обязательно должна находиться на опубликованных (доступных из вне) страницах. Если же попытаться плюсануть страницу, которая не опубликована, то произойдет ошибка.

Параметры тэга Script

Этих параметров два, и они определяются в пределах элемента < script / > для установки языка (локали) и метода загрузки кнопки.

Параметр «lang»:
значение: код языка (language code), по умолчанию «en-US»
описание: устанавливает код языка для кнопки «+1». (коды для разных языков приведены в конце статьи)

Пример:

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

Параметр «parsetags»:
значение: explicit, onload (по умолчанию «onload»)
описание: устанавливает механизм загрузки

onload
- все кнопки автоматически отрисовываются после занрузки страницы (смотрите выше пример кода web-страницы с использованием асинхронной загрузки);

explicit
- кнопки отрисуются только при явном вызове gapi.plusone.go или gapi.plusone.render;

При явном совместном использовании вызовов «go» и «render», которые указывают на специфические контейнеры вашей страницы, можно предотвратить прохождения скриптом всей DOM, что может сократить время рендеринга кнопки «+1».

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

<html>
  <head>
    <title>+1 Пример: Explicit загрузка</title>
    <link rel="canonical" href="http://www.moysait-primer.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
    <div id="content">
      <g:plusone></g:plusone>
    </div>
    <script type="text/javascript">
      gapi.plusone.go("content");
    </script>
  </body>
</html>

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

<html>
  <head>
    <title>+1 Пример: Explicit render</title>
    <link rel="canonical" href="http://www.moysait-primer.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>
Атрибуты тэга «+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!
Кстати, чуть ниже этой статьи тоже есть такая кнопка, и Вы можете ею воспользоваться, если считаете, что статья полезна для начинающих вебмастеров :)

Метки: , ,
Другие статьи похожей тематики:

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

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

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

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

  2. cheap sports jerseys from china:

    Thanks for creating information. I seemed to be deciding on what to do together with excellent 3-D piece of equipment

Оставить комментарий

Подписаться на обновления блога 4remind.ru по RSS
Новости блога в социальных сетях

="4remind.ru

Rambler's Top100
Рейтинг@Mail.ru


Яндекс.Метрика