Cleverley.ru
Главная / Новичкам / Добавляем на сайт социальные кнопки
11 июля 2012

Добавляем на сайт социальные кнопки

Добавляем на сайт социальные кнопки

Социализация сайта уже давно стала нормой, поскольку это дополнительный трафик на сайт, и в некоторой степени брендирование. Я хочу показать, как за 5 минут можно установить на свой сайт социальные кнопки vk, twitter, facebook и google +1.

Шаг №1 – Получаем код кнопок –
Для получения кода кнопки vk.com, необходимо перейти по ссылке и заполнить поля, после чего нажать «Сохранить» и скопировать получившийся код в текстовый редактор, к примеру, в «Блокнот».

добавляем социальную кнопку вконтакте

Для получения кнопки twitter переходим по ссылке, заполняем нужные поля и копируем полученный код в «Блокнот».

добавляем социальную кнопку Твиттер

Для получения кнопки facebook переходим по ссылке, выбираем дизайн кнопки и жмем Get code, который копируем в «Блокнот».

добавляем социальную кнопку фейсбук

*URL to Like заполнять не советую поскольку, если ввести туда адрес сайта то счетчик будет считать общее нажатия на кнопку, а не лайки отдельных страниц.

Для получения кода для кнопки Google +1 переходим сюда, выбираем кнопку и копируем код в «Блокнот».

добавляем социальную кнопку гуггл

Шаг №2 – Добавляем код на сайт –
Когда у нас есть код всех кнопок, мы можем вставить его на сайт, открываем шаблон полной новости, если движок WordPress, то это файл single.php, находим место сразу под текстом, обычно это под

1
 <?php the_content() ?></div>

и вставляем следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="socials">
<div class="social facebook">
Код facebook
</div>
<div class="social vkontakte">
Код Vk.com
</div>
<div class="social  google">
Код Google +1
</div>
<div class="social twitter">
Код twitter
</div>
</div>

Осталось применить стили, и подкорректировать фон. Заходим в style.css и вставляем код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* ~~~ Socials */
.socials {
 position: relative;
 height: 34px; - высота блока
 background-image: url('images/socials-bg.jpg');
}
.socials div.social {
 position: absolute;
 z-index: 9999;
}
.socials div.facebook {
 left: 30px; - отступ от левого края
 top: 7px; - отступ сверху
}
.socials div.vkontakte {
 left: 194px;
 top: 9px;
}
.socials div.google {
 right: 153px; - отступ от правого края
 top: 7px;
}
.socials div.twitter {
 right: 7px;
 top: 7px;
}

А вот собственно картинка, для фона — тыц.

Собственно это все, если что-то не получается, пишите в комментариях!

Приглашаю вас в свой паблик Вконтакте! Подписывайтесь.

Комментарии
  • Блин супер, можешь помочь в 2 строки такое чудо сделать? мне нужно еще одноклассники и майл

    • clevz

      В стилях можно все по левому краю выровнять и разделить блоки на 3 равные части, как раз получится в 2 слоя, только картинку придется переделать 🙂

  • кнопки не идеально в линию. одна выше- другая ниже. в чем проблема?

  • Разобрался. Тут кнопки вставляются внутрь класса, но если код кнопки сам идет в классе, то у меня сбивались настройки позиции. по крайней мере на лицокниге. указывайте дополнительно позицию в <div style="…
    это была моя проблема, вдруг поможет кому нить

Категории
Связь со мной
Reg.ru
Связь со мной

Ваше имя:Ваш E-Mail: Сообщение: Капча:captcha

Связь со мной
Пользуясь данным ресурсом вы даёте разрешение на сбор, анализ и хранение своих персональных данных согласно Правилам.
Orphus
Автор блога


Мой личный блог, в основном здесь буду публиковать статьи о заработке в сети, делиться личным опытом и писать о жизни!

Подписка на блог
Инструменты
Личный опыт
03.10.2017
Как проверить сайт на уязвимости?

Помимо самого создания веб – сайта, естественно требуется...

Читать Комментить0
12.09.2017
Как работают очки виртуальной реальности?

Если выделить в целом очки, или же шлем виртуальной...

Читать Комментить0
06.09.2017
Кредитный юрист: специализация

Порой в жизни каждого человека возникают непредвиденные...

Читать Комментить0
17.08.2017
Краткое обучение работе на сайте госзакупок

Получить требуемый объем знаний по аудиту можно в...

Читать Комментить0