Главная » Социальные сети » Кнопка Google +1: добавляем на сайт WordPress
google плюс один кнопка

Кнопка Google +1: добавляем на сайт WordPress

Здравствуйте уважаемые читатели блога history-of-blog.ru. Сегодняшний пост будет посвящен установке заключительной четвертой кнопки на блог WordPress. Кнопка Google плюс один будет расположена после кнопок других социальных сетей: кнопки твиттера, кнопки фейсбука и кнопки “Мне нравится” от в контакте.google плюс один кнопка

Кнопка Google +1 на WordPress сайт.

Что бы получить код кнопки Гугл +1 нужно перейти на эту страницу. Ставим следующие настройки:кнопка гугл плюс один

После того как Вы настроите кнопку, можно посмотреть как она будет выглядеть в Предпросмотре. Если все устраивает, то копируем и вставляем код в нужные места:

  • Копируем вторую часть кода:

2 часть кода

  • Открываем файл footer.php и вставляем этот код перед закрывающим тэгом </body>:

Вставляем код в футер

  • Теперь работаем с первой частью кода – там где будет стоять этот код, там и будет непосредственно выводиться кнопка Гугл +1. Копируем этот код:

1 часть кода

  • Открываем файл single.php и вставляем этот код после кнопки В Контакте (Не забудьте заключить его в Div (назовем его google), как мы делали с кнопками прошлых статьях. Думаю, одно и тоже каждый раз писать не надо).

Кнопка гугл +1

  • Теперь открываем файл style.css и делаем там необходимые изменения и добавки. Напомню, сейчас в конце этого файла прописано следующее:
.knopki-aga {
 width:420px; height:25px; margin:15px auto 5px;
 }
 .twit {
 float:left; width:120px;
 }
 .facebook {
 float:left; width:140px;
 }
 .vk {
 float:left; width:160px;
 }

Ширина 80 пикселей отлично подойдет для класса google. Поэтому нам надо увеличить общую ширину блока кнопок (knopki-aga), и добавить новый класс google. В итоге, код примет следующий вид:

.knopki-aga {
	width:500px; height:25px; margin:15px auto 5px;
	}
	.twit {
	float:left; width:120px;
	}
    .facebook {
	float:left; width:140px;
	}
	.vk {
	float:left; width:160px;
	}
	.google {
	float:left; width:80px;
	}

Вод промежуточный результат:4 кнопки в ряд

Конечно можно оставить и так, ведь кнопки уже отлично смотрятся, но можно пойти чуть дальше и сделать например рамочку или другой фон. Об этом будет рассказано в следующей статье, не пропустите!

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить 4 самых действенных кнопки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Кнопка Google +1: добавляем на сайт WordPress" уже 7:
  • Евгений | 15.04.2012 в 22:34

    Спасибо, Антон. Все получилось и все замечательно работает.
    Ждем следующую статью.

    • admin | 09.01.2013 в 17:20

      Хмм.. Так ни одна из кнопок не находится контейнере. Упакуйте все в div’ы и float:left; применить

  • Оксана | 13.05.2013 в 15:16

    Здравствуйте! Очень нравится ваш блок с соц сетями, конкретно ярлычок “поделись”. Можно реализовать такой же ярлык, только на посты и чтобы их можно было менять (новое, горячее и т.д) Предполагаю, что это делается через произвольные поля. Пыталась сделать сама, но картинка отражается только в single.php

    • admin | 13.05.2013 в 15:44

      Если речь идет о ленточках, то все гораздо проще. Это не произвольные поля, просто в нужном файле (single.php) все это прописано, а с помощью стилей, спозиционировано относительно блока кнопок.

  • Оксана | 13.05.2013 в 16:03

    Меня интересуют не кнопки, а записи. Хочу добавлять такую ленточку к некоторым миниатюрам, но не ко всем. И чтобы все это отражалось в списке статей.

  • Ирина | 27.01.2014 в 23:14

    Огромное спасибо долго не могла поставить гугл+ но ваш сайт мне помог в этом.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: