Как добавить кнопку Google +1 на свой сайт

google +1Здравствуйте мои уважаемые читатели, я уже давно не писал и на то есть свои «некачественные причины».

Но пора брать себя в руки и начинать работать и сегодня я напишу, как добавить на сайт кнопку google +1.

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

С помощью кнопки google +1 вы сможете посоветовать понравившуюся интернет страничку для просмотра вашим друзья в социальной сети google и, конечно же, увидеть за какие страницы проголосовали ваши друзья.

Увидите вы это прямо в поисковой выдаче google, просто набрав запрос. И если там есть страницы, за которые голосовали ваши друзья, то под результатом вы увидите сообщение.

Вот как это выглядит:

Как добавить кнопку Google +1 на свой сайт

Красным обведено, кто из друзей уже поделился.

А зеленым кнопка google +1, которую компания вам предоставляет, для возможность поделится страницей прямо из поисковой выдачи.

Вы можете мне возразить: «у меня нет таких кнопок?»

Они появятся, если у вас есть акаунт в социальной сети google plus, и вы в данный момент авторизированны.

Вы должны видеть такую строку вверху страницы.

Как добавить кнопку Google +1 на свой сайт

Как видите google +1 это аналог кнопки от facebook и вконтакте. Только она более «глобальна» так как goolge внедрила её в свою поисковую систему.

С сутью разобрались пора перейти к нашим пряникам, а именно как это чудо добавить и к себе на сайт.

Настройка кнопки GooGle +1

Переходим по этой ссылке и видим диалог настроек:

Как добавить кнопку Google +1 на свой сайт

Настроек как таких здесь минимум:

1) Выбираем размер самой кнопки. Справа сразу же видим результат.

Как добавить кнопку Google +1 на свой сайт

Google приготовила для вас несколько заготовок кнопки:

Как добавить кнопку Google +1 на свой сайт

2) выбираем язык. Выбор языка, определяет, на каком языке будет отображаться кнопка google +1. Доступно на выбор 40 различных языков.

Как добавить кнопку Google +1 на свой сайт

Потом нажимаем на кнопку «расширенные настройки». У нас выпадет меню с дополнительными настройками:

Как добавить кнопку Google +1 на свой сайт

Как видите, счетчик у меня выбран изначально и отказаться от него нельзя. Но это и не нужно. Вы же хотите знать, кто сколько раз нажал на вашу кнопку.

Как добавить кнопку Google +1 на свой сайт

Дальше у нас идет пункт про то как «Выполнять код»

Как добавить кнопку Google +1 на свой сайт

Я рекомендую вам оставить как есть. В этом случае кнопка сама активируется после загрузки страницы.

А иначе вам самим придется вызывать кнопку, используя java-script.

Дальше у нас идет строка – «Функция обратного вызова JavaScript». Это сугубо для программистов. С помощью этой строки можно заставить функцию выполнить какую-то подзадачу.

Как добавить кнопку Google +1 на свой сайт

С помощью этой строки можно научить google analytics, отслеживать нажатие по кнопке google +1. Добавив функцию обработки обратного вызова в код страницы, а в строку «Функция обратного вызова JavaScript» вставив название этой функции.

И последний параметр «URL для +1»

Как добавить кнопку Google +1 на свой сайт

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

Так же с помощью этой опции на одной странице можно разместить несколько кнопок, которые будут вести на разные страницы.

С настройкой кнопки вроде разобрались.

Вставка кода GooGle +1

Теперь в форме ниже мы видим готовый код. Который нам подготовила google, прислушавшись к нашим предпочтениям.

Как добавить кнопку Google +1 на свой сайт

Здесь у нас два блока кода.

Красный блок — нужно вставить в пределах тега «head» или перед закрывающим тегом «/body» в html код вашей странице.

Если вы, как и я используете cms wordpress, то тег «head» вы найдете в файле темы под названием header.php.

Ищите там блок «script» и вставляете после него. Если у вас такого блока нет, то вставляйте ближе к закрывающему тегу «/head», что бы не вносить путаницу в системные теги.

Пример:

1
2
3
<script type="text/javascript">VK.init({apiId: 2259850, onlyWidgets: true});</script>
-ваш код-
</head>

Зеленый блок — нужно вставить туда, где вы хотите, что бы отображалась сама кнопка.

Ищите удобное место и просто вставляете код и вуаля кнопка появилась.

В случае с wordpress. Если хотите, что бы кнопка появилась на главной под каждой статьей. То нужно вставить зеленый блок в файл index.php например, после строки

1
<?php the_content(''); ?>

Это значит, что ваша кнопка появится после самого описания каждой статьи.

Пример:

1
2
<?php the_content(''); ?>
<g:plusone></g:plusone>

Для того, что кнопка появилась после самой статьи на отдельной странице, нам понадобится файл single.php код можно вставить так же после

1
<?php the_content(''); ?>

Вот собственно и все. Кнопка установлена и работает, теперь ваши читатели могут делиться со своими друзьями вашими замечательными статьями

На этом все, удачи!!!
С уважением Тригуба Сергей.

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

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев19 комментариев

Спасибо за инструкцию, давно хотел поставить эту кнопочку!

Присоединяюсь к corel. Спасибо большое, пойду попробую поставить

Google+ — реально классный проект от Google. Активно развивается и не стал бы я пренебрегать кнопкой, чтобы засветиться и там!

Действительно интересно — открывает новые социальные возможности.

Поставил на блог кнопку по вашей инструкции, спасибо класс!

Благодаря вам, это у меня получилось)

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет