Кнопка Google +1: добавляем на сайт WordPress
Здравствуйте уважаемые читатели блога history-of-blog.ru. Сегодняшний пост будет посвящен установке заключительной четвертой кнопки на блог WordPress. Кнопка Google плюс один будет расположена после кнопок других социальных сетей: кнопки твиттера, кнопки фейсбука и кнопки “Мне нравится” от в контакте.
Кнопка Google +1 на WordPress сайт.
Что бы получить код кнопки Гугл +1 нужно перейти на эту страницу. Ставим следующие настройки:
После того как Вы настроите кнопку, можно посмотреть как она будет выглядеть в Предпросмотре. Если все устраивает, то копируем и вставляем код в нужные места:
- Копируем вторую часть кода:
- Открываем файл footer.php и вставляем этот код перед закрывающим тэгом </body>:
- Теперь работаем с первой частью кода – там где будет стоять этот код, там и будет непосредственно выводиться кнопка Гугл +1. Копируем этот код:
- Открываем файл single.php и вставляем этот код после кнопки В Контакте (Не забудьте заключить его в Div (назовем его google), как мы делали с кнопками прошлых статьях. Думаю, одно и тоже каждый раз писать не надо).
- Теперь открываем файл 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;
}
Вод промежуточный результат:
Конечно можно оставить и так, ведь кнопки уже отлично смотрятся, но можно пойти чуть дальше и сделать например рамочку или другой фон. Об этом будет рассказано в следующей статье, не пропустите!
- Почему именно кнопки социальных сетей?
- Установка кнопки твитнуть на блог
- Установка кнопок твиттера на главную страницу (в анонсах)
- Установка кнопки “мне нравится” от Facebook
- Установка кнопки “мне нравится” от Вконтакте
- Установка кнопки Гугл +1 – эта статья
- Как красиво отобразить четыре кнопки в ряд (под статьей)
