Новинка от Google: +1!

В этом посте мы поговорим о новой кнопке от google +1: что она делает, нужна ли нам и о том как ее установить на сайт.

Установить на самом деле очень легко. Думаю Вы и без меня бы разобрались, но раз уж я влепил ее на свой блог, почему бы не поделиться тем, как я это сделал. Прежде чем приступим к установке давайте определимся: зачем нужна кнопка +1 и нужна ли она нам?

Действует она аналогично с кнопками социальных сетей и добавления в социальные закладки. Вы прочитали какой-то материал (например тот, который читаете сейчас ), он Вам понравился и Вы решили поделиться этим материалом с друзьями. Не стесняйтесь, попробуйте прямо сейчас, кликните по кнопке, она справа по тексту. После того, как кликнули по плюсодин Ваши друзья по различным социалкам в выдаче гугла увидят Ваш favicon и подпись “Уже поделились этим”, примерно вот так:

Важно: подобные вещи (подписи) видны лишь зарегистрированным в гугле пользователям и только если у Вас интегрированы аккаунты социалок. Например у меня в гугл добавлены facebook и twitter, потому мне в результатах видны рекомендации друзей из этих социальных сетей.

Добавить свои аккаунты в социалках можно на странице профиля, вот здесь.

Зачем нужна кнопка +1 разобрались, теперь давайте подумаем, а нужна ли она нам вообще? Мне кажется нужна, по крайней мере теоретически, как будет на деле время покажет.

Но в теории мне видится это так: пользователь набирает в google какой-либо запрос и Ваш сайт по этому запросу находится на второй, третьей, четвертой позиции. В большинстве случаев пользователь кликает на первую позицию, но в этот раз все не так, в этот раз он видит под одной из позиций (я уверен под Вашей!) ту самую подпись “Уже поделились этим” и видит знакомый favicon с именем, фавикон и имя его друга, родственника и т.д.. Как думаете, по какому результату он кликнет теперь?

Кроме того, все записи с которыми делится пользователь доступны из его профиля. Например, мои записи находятся здесь. А еще они публикуются с прямыми ссылками .

Ну что, установим?

Установка кнопки google +1 на wordpress

Плюсодин я устанавливал аналогично кнопке retweet. Итак, без лишних разговоров, сколько можно, они уже были выше , идем сюда. Это страница кнопки Плюс Один. Там все на английском, исправим это, прокрутив страницу вниз и в выпадающем списке языков выбираем наш, русский:

Страница перезагрузится. Следующим шагом станет выбор размера кнопки и языка сайта на котором она будет размещена. Я ее разместил под кнопкой retweet и размер выбрал соответствующий, большую, 50х60 пикселей:

В таблице ниже можете посмотреть доступные размеры кнопки и подобрать необходимую Вам под дизайн сайта:

Есть на этой странице еще пункты, они открываются по клику по ссылке “Расширенные настройки”:

Здесь можно отключить счетчик кликов по кнопке, но только если Вы, как я, не воспользовались большой кнопкой, она без счетчика никуда.

Опция “Выполнять код” имеет выпадающий список, в котором две функции: “при загрузке” и “при явном вызове”. “При загрузке” означает, что кнопка будет вызываться и загружаться вместе с отрисовкой HTML-кода страницы. А функция “при явном вызове” будет работать вот в такой последовательности:

• сначала браузер пользователя выведет все элементы страницы, т.е. отрисует весь HTML-код;
• затем, уже в последнюю очередь выполнит код кнопки +1, так как он будет размещен в конце HTML-кода страницы;
• и только после этого кнопка появится в нужном месте шаблона страницы.

Этот способ должен вроде как ускорить загрузку страниц и помочь избежать каких-либо проблем с несовместимостью кода. У меня первый вариант проблем не вызывает, а страницы и с ним прекрасно загружаются, потому оставляю по-умолчанию.

Как говорит мой знакомый – “Я программист, но не очень” , это я к тому, что за функцию обратного вызова JavaScript сказать ничего конкретного не могу.

Также функцией “URL для +1” мы пользоваться не будем, просто подставим “ручками”. Дело в том, что для списка анонсов в wordpress за URL отвечает тег <?php the_permalink(); ?>, но необходимое нам поле его искажает.

Переходим непосредственно к установке кода:

Здесь две строчки. Первый код вставляем между тегами <head></head> в Вашем шаблоне. Если Вы, как и я, работаете с wordpress, то эти теги можно найти в файле header.php. Этот код я приведу ниже, можете копировать его отсюда, разницы нет:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
 {lang: 'ru'}
 </script>

Второй код размещаем в нужном нам месте. Я разместил в списке постов (файл index.php) и в одиночной записи (файл single.php). Для одиночной записи ничего менять не надо, т.е. как есть, так и вставляем. А вот для списка постов необходимо добавить вызов URL (для wordpress – <?php the_permalink(); ?>), помните я об этом говорил выше?

Если вы желаете установить кнопку также, как она стоит у меня, т.е. справа вверху поста, тогда можете воспользоваться моим кодом. Вставляем его в файл одиночной записи single.php перед тегом <?php the_content(); ?>:

<div style="float: right; margin-left: 10px; margin-top: 10px;"><g:plusone size="tall"></g:plusone>
 </div>

А этот в файл списка постов, т.е. index.php и также перед тегом <?php the_content(); ?>:

<div style="float: right; margin-left: 10px; margin-top: 10px;"><g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone></div>

Вот и все, кнопка +1 от Google установлена, действительно не так сложно.

Не забудьте также установить кнопки социальных сетей для сайта, кнопку retweet и виджет от facebook.

Удачи Вам и удачного продвижения!

p.s. не забудьте кликнуть по кнопке +1

Постовой (как сюда попасть?): Все чаще люди задаются вопросом как заработать в интернете, причем большая часть пользователей хотят сделать этот вид заработка основным. Однозначного ответа на этот вопрос нет, это процесс не легкий, но благодаря обучающим статьям размещенным в сети все возможно.