
Кнопка 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 – эта статья
- Как красиво отобразить четыре кнопки в ряд (под статьей)
Похожие статьи:
-
Оксана | 13.05.2013 в 15:16
Здравствуйте! Очень нравится ваш блок с соц сетями, конкретно ярлычок “поделись”. Можно реализовать такой же ярлык, только на посты и чтобы их можно было менять (новое, горячее и т.д) Предполагаю, что это делается через произвольные поля. Пыталась сделать сама, но картинка отражается только в single.php
-
Оксана | 13.05.2013 в 16:03
Меня интересуют не кнопки, а записи. Хочу добавлять такую ленточку к некоторым миниатюрам, но не ко всем. И чтобы все это отражалось в списке статей.
-
Ирина | 27.01.2014 в 23:14
Огромное спасибо долго не могла поставить гугл+ но ваш сайт мне помог в этом.
Спасибо, Антон. Все получилось и все замечательно работает.
Ждем следующую статью.