Генератор кнопок соцсетей

Выберите нужные вам кнопки социальных сетей, установите в настройках их внешний вид и получите код HTML и CSS, полностью готовый для вставки на вашем сайте.

Кнопки социальных сетей

  Онлайн генератор кнопок социальных сетей для сайта.

  Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.

Установите флажки для соцсетей которые нужно для вас добавить:

Цвет кнопок

Форма кнопок

Вывод SVG-иконок

Добавить Title

 

Код HTML:

  Скопируйте и вставьте данный html-код в нужном месте. Всё что вам остаётся сделать, это заменить значения в атрибуте href="#". Просто замените символ # на ссылку на вашу соцсеть.

 

Код CSS

 

Записи по теме
3D кнопки для сайта
кнопки Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.
Кнопки бутстрап
кнопки Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.
Кнопки соцсетей для сайта на чистом CSS
youtube Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Взгляните на моё решение - возможно это именно то что вы ищите.

 

 

Комментарии 45
13:13 04.04.2020 #

А на вимео можо добавить, добрый человек?)

13:17 04.04.2020 #

Да, можно. Сейчас соберу иконку и цвет для кнопки вимео и добавлю новую кнопочку.

13:30 04.04.2020 #

Поклон вам, сделайте ещё кнопочку доната у себя на сайте)

13:31 04.04.2020 #

Готово. Добавил Vimeo.

13:36 04.04.2020 #

А чтобы размер изменить, мне нужно строчку добавить ещё одну?

13:40 04.04.2020 #

Размер, это в css свойства для класса .social a. Вот такие строки:

    width: 48px;
    height: 48px;

width - это ширина, height -высота кнопки. Можно эти значения изменять.

14:32 08.06.2020 #

Добрый день. Получилось установить кнопки. В полной версии сайта все хорошо работает, а когда смотришь с мобильного, то кнопки становятся ЧБ и безразмерные. Подскажите как исправить?

14:42 08.06.2020 #

Не должно быть такого.

У вас или стили переопределяются (тут нужно смотреть на кнопки чтобы точно установить, может у вас на сайте уже прописаны какие то стили для тега svg, может для чего другого),

или может вы добавили стили внутри медиа запроса для широких экранов и поэтому на мобильном стили не подключаются. Медиа запрос это типа:

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
}

или может у вас в браузере стили закешировало и берёт стили из кеша где ещё нет стилей для этих кнопок. Тогда нужно просто почистить кеш браузера.

15:28 08.06.2020 #

мобильной версии на сайте вообще нет, в мобильном оно все отображается так же как и в компе.

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
} 

такого запроса у себя тоже не нашел...

Что я могу сделать еще или вам прислать на проверку?

15:33 08.06.2020 #

Оставьте ссылку на сайт, я её потом затру.

Чтобы по быстрому решить и не гадать в чём причина, нужно в живую увидеть что к чему и из за чего.

15:36 08.06.2020 #

-----была_ссылка-----

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

и так и так, все равно через телефон проблема остается

15:51 08.06.2020 #

Проверил - у меня всё норм, если не считать что сайт без адаптации под мобильные экраны и всё в масштабе просто уменьшилось. Но это не касается кнопок.

Наверное у вас просто закешировало файл стилей в браузере мобильного. Кеш браузера телефона почистите и всё станет норм. Просто он файл style.css не скачивает с сервера а берёт из кеша, а в кеше у него сохранился файл до того как вы в него внесли изменения, добавив эти стили кнопок. Почистите кеш в браузере смартфона.

18:27 08.06.2020 #

благодарю, да, видимо все таки дело в кеше... просто в браузере инстаграма кеш никак не удалить, если только само приложение...

а можем где-то обсудить мобильную версию сайта? если вы этим занимаетесь конечно. Благодарю!

23:20 08.06.2020 #

Чтобы кнопки встали по аккуратней чем сейчас, оберните кнопки в вот такой див:

<div class="social__block">
    <!-- вместо этой строки html-код ваших кнопок -->
</div>

И добавьте такой css:

.social__block {
    display: block;
    width: max-content;
    margin: 15px auto;
}

Кеши только придётся снова почистить чтобы изменения увидеть. Так кнопки встанут по центру и добавятся отступы. Будет лучше чем сейчас.


А что касается мобильной версии, оно конечно сделать можно и тематика очень интересная. Но есть но. Я сайт немного полистал чтобы ознакомится. Он на вордпрессе сделан, а я с таким даже связываться не хочу. На самих страницах сайта есть битые ссылки ведущие вникуда, отсутствующие изображения и куча других косяков по мелочи. Там если браться делать, то переделывать полностью, то есть делать сайт с нуля, с проверкой, редактированием и переносом всего существующего контента. Итого это по времени выйдет долго (точно больше месяца). Отсюда и цена получится которую даже не прилично озвучивать.

А сделать просто на скорую руку адаптив из существующего - получится соответствующий итог на скорую руку. Будет некрасиво. Поэтому извините, я наверное вам не подойду для такой работы. Вам наверное проще и дешевле будет найти кого то кто сделает вам тему на вордпресе или натянет на ваш сайт тему из каталога тем вордпреса.

09:02 09.06.2020 #

я понял, благодарю!

А подскажите пожалуйста еще такой момент, сейчас соц кнопки перекинул в верхнюю часть сайта, а можно как-то подложку под них сделать определенного цвета? чтобы была просто полоса вверху на всю ширину страницы?

09:36 09.06.2020 #

Да, конечно можно, хоть полоску определённого цвета, хоть изображение.

Давайте обернём наш код ещё одним дивом. Даже по более современному не дивом, а тегом section, так как семантически это у нас отдельный блок:

<section class="social__section">
    <div class="social__block">
        <!-- вместо этой строки html-код ваших кнопок -->
    </div>
</section>

И добавим вот такой css:

.social__section {
    background-color: #ffae4a;
    padding: 20px 0 100px;
}
.header {
    margin-top: -100px;
}

Так же чтобы увидеть изменения чистим кеши.

Если делать просто полоской, то получается не очень. Поэтому я сделал что полоска под шапку сайта опускается. Цвет можно поменять, у свойства background-color поставьте значение нужного вам цвета.

Вот можете цвет выбрать:

Кликните по кнопочке выше, в появившемся окошке переключите на HEX (там есть стрелочки после названия формата). Подберите цвет который нравится и укажите его значением для background-color

12:05 09.06.2020 #

о, благодарю!

А как все же сделать, чтобы я мог уменьшить размер полоски, чтобы не так сильно заходила под шапку или вообще не заходила?

и может можно регулировать его прозрачность?

18:46 09.06.2020 #

Во первых, в html вы два раза вставили <div class="social__block">. Один из них уберите и закрывающий див </div> перед </section> тоже уберите.

По стилям уберите то что я дал в предыдущем посте выше. Вместо того вставьте:

.social__section {
    background-color: #555d66;
    margin-bottom: 20px;
    padding: 5px 0;
}

Цвет поменять также для background-color задаёте значение.

Если хотите кнопки выровнять по центру, измените в style.css 482 строка:

.social__block {
    display: block;
    width: max-content;
    margin: auto;
}
14:53 14.06.2020 #

Благодарю! Вроде поправил.

Единственное в мобильной версии полоска с сдвигом влево получается, не сильно критично конечно, но есть такой момент.

15:40 14.06.2020 #

Удалите в файле style.css 494 строку:

.header {
    margin-top: -100px;
}

В строке 488 вместо:

.social__section {
    background-color: #e5e3e4;
    margin-bottom: 100px;
    padding: 0px 0;
}

замените на:

.social__section {
    background-color: #e5e3e4;
    width: 1100px;
}

На мобильном ширина страницы 112 %. При этом нет горизонтального скрола. А вот полоска заняла все 100%. Чтобы полоску сделать одноцветной, указал ей ширину 1100px, как ширина контентной части.

Вы сайт наверное смотрите на нотбуке или на планшете. У меня вот монитор 22 дюйма и кнопки соцсетей смотрятся совсем подругому, поэтому я предлагал их центровать.

16:28 14.06.2020 #

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

А может тогда можно кнопки привязать к началу контентной части? чтобы они всегда были зафиксированы в начале и не сдвигались на больших экранах

20:34 14.06.2020 #

Точно, мы же ширину задали 1100px и когда монитор больше 1100px тогда у нас блок с кнопками (эта полоска) остаётся 1100px. Упустил я это, не могу редактировать ваш css поэтому не увидел.

Поправить это просто. Добавьте в css ещё такой стиль:

@media (min-width: 1100px) {
    .social__section {
        width: 100%;
    }
}

Этот css означает что когда ширина экрана 1100px и больше, то ширина блока кнопок будет 100%. Теперь будет нормально отображаться.

15:19 21.06.2020 #

Благодарю! Все получилось!

10:48 17.08.2020 #

Добрый день! Не хватает кода для Facebook-messenger Плиз - Вы могли бы добавить код в генератор кнопок, или в ответном комментарии. Спасибо большое!

10:51 17.08.2020 #

Сейчас посмотрю что это такое, если есть - добавлю. Вроде если не ошибаюсь они вацап когда то себе купили, а про Facebook-messenger я даже и не слышал никогда.

11:18 17.08.2020 #

Добавил. Кнопка называется Messenger.

10:14 19.08.2020 #

Отлично! Спасибо Вам!!!

10:31 19.08.2020 #

Было бы великолепно, если в Ваш генератор добавить такую опцию - ВЫБОР : МЕССЕНДЖЕР | СОЦ СЕТЬ. Например я на своём сайте добавил два вида кнопок (два кода): месседжер - кнопки сделал прямоугольные, и все коды исправил .social на .messenger (что бы не конфликтовали коды меж собой, да и вообще работали!). А кнопки соц сетей оставил на Вашем коде, круглые. Тем самым, на сайте: если нужно написать в мессенджер - пользователи используют цветные прямоугольные кнопки удобных для них мессенджеров. А если нужно посмотреть инфо в соц сетях - пользователи используют круглые кнопки соц сетей. Куда и зачем нажимать (действия) - естественно указаны заголовками над кнопками. В итоге = два кода, для двух разных действий. Однако, если соц сети - это все имеющиеся кнопки генератора (кроме мессенджер фейсбук получается), то самих месседжеров 4 шт. в вашем генераторе должно тогда показываться для выбора. Есть ещё один новый к стати мессенджер: Яндекс! Во как! И он интересный, но ещё не раскрученный. А так - было бы классно! Полноценный генератор для: мессенджеров и для соц сетей! Спасибо!

19:18 23.11.2020 #

Привет!

Возможно ли сделать такую кнопку вацап = два в одном?

Например, устанавливается в карточке товара кнопка вацап.

Нажимая на неё - устанавливается не только связь (диалог, переписка) покупателя и продавца по вацап, но одновременно и передаётся ссылка на товар в котором установлена эта кнопка.

На данный момент есть две кнопки вацап:

  1. поделиться товаром - действие передаёт ссылку по вацап на товар, только имеющимся контактам
  2. связь с продавцом - действие открывает связь клиента и продавца по вацап - без добавления в контакты

Как объединить эти два варианта = в один?

Спасибо!

19:56 23.11.2020 #

Как объединить эти два варианта = в один?

При помощи javascript.


Но сама идея не очень. Попробую объяснить почему.

Самое плохое в этом случае - покупатель может запутаться и уйти, что очень вероятно. А раскидываться покупателями в современном интернете - это непозволительная роскошь.

Логика скрипта простая: нажимаем на кнопку - открывается два новых окна браузера. Первое - поделиться, второе - чат. Я в API вацапа давненько заглядывал, но по идеи он на автомате отработает перенаправив в своё приложение. И теперь у покупателя три открытых окна браузера: карточка товара, поделиться и чат. А если ссылка на вацап отработает, то ещё и приложение откроется. Большая вероятность что он может в этом всём запутаться и уйти.

Лучше где то под ценой и количеством наличия товара добавить аккуратно (ненавязчиво) блок с кнопками поделиться. Не нужно слишком агрессивно продвигаться, чтоб поисковые системы за такое не забанили.

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

У меня такое мнение по поводу вашей идеи.

20:15 23.11.2020 #

Любая сложность - это всегда заблуда конечно..... Остаётся стандартный вариант: обращение клиента в чат, и если требуется через кнопку поделиться в уже начатом чате - прилетит и ссылка на товар. Спасибо!!!

20:39 06.12.2020 #

Спасибо воспользовался! А не подскажете, как сделать кнопку с тремя номерами телефона выпадающим списком?

20:53 06.12.2020 #

Типо как кнопка в нижнем правом углу на этом сайте: https://materializecss.com/floating-action-button.html

?


Или типо как у меня здесь кнопка авторизации вверху?

Я не знаю как вы хотите чтобы это в итоге это выглядело. Вариантов то много.

Может вы вообще хотите обычный селект хтмловский использовать, так это вообще проще простого: http://htmlbook.ru/html/select

21:00 06.12.2020 #

О боги.. как быстро Вы отвечаете!!!

На том сайте что Вы указали слева вверху...

21:07 06.12.2020 #

На том сайте что Вы указали слева вверху...

это то что под логотипом (под буквой М)?

21:09 06.12.2020 #

да

21:17 06.12.2020 #

Возможно у вас на сайте уже стоит какой то css-фреймворк (например бутстрап или материалайз). В них уже есть всё готовое для создания подобных штук. Этот элемент называется Dropdown и его можно посмотреть в документациях фреймворков.

А если нужно что то уникальное, то нужно писать код этого элемента. Есть такой сайт кодпен, там много подобных штук пишут и код видно сразу. Можно там посмотреть: https://codepen.io/search/pens?q=Dropdown (это ссылка уже на результаты поиска по Dropdown) там можно очень интересные и крутые штуки найти.

21:19 06.12.2020 #

Спасибо!

12:50 11.12.2020 #

Добрый день, спасибо за разработку, очень удобный сервис! Подскажите почему у меня значки в кнопка не по центру? (в подвале сайта take my time ru) И как сделать ориентацию по левому краю для кнопок? В мобильной версии они по центу становятся.

13:13 11.12.2020 #

У вас конфликт стилей с теми что изначально прописаны для темы. Сейчас посмотрю как исправить.

13:31 11.12.2020 #

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

Удалите css который вы вставили, а вставьте вот так:

.social {display: inline-block}
.social a {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 10px 10px 0;
    text-align: center;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4), inset 1px 1px 0px rgba(255,255,255,0.5);
}
.social a:hover {
    color: #fff;
    border-color: #888;
    opacity: .8;
}
.social svg {
    margin-top: 4px;
    margin-left: 4px;
    width: 25px;
    height: 25px;
}
.facebook a {background: #3b5998}
.instagram a {background: #3f729b}
.linkedin a {background: #0e76a8}
.twitter a {background: #00acee}
.vk a {background: #4a76a8}
.youtube a {background: #c4302b}

Возможно чтобы увидеть изменения вам придётся почистить кэши сайта и браузера.

04:31 22.12.2020 #
<svg role="img" viewBox="0 0 576 512">

скажите в чем здесь ошибка Вордпресс не принимает этот код пишет "The attribute name of (viewBox) must be in lowercase.

09:54 22.12.2020 #

Может вы в код php добавляете делая синтаксическую ошибку?

Атрибут viewBox указан корректно, но для HTML.

13:23 29.12.2020 #

Здравствуйте , можно ли сделать кнопки плавающими и как это сделать, можно ли сделать чтобы при отправке сообщения с сайта в сообщении была ссылка на страницу с которой отправили сообщение. Спасибо, очень у Вас классный интернет ресурс поставьте кнопку ДОНАТ жалко если такой ресурс пропадет .

13:57 29.12.2020 #

Плавающими, это типа фиксированными? - Да, можно. Только это нужно смотреть как реализовывать, многое зависит от сайта и единого рецепта нет.

Что касается отправить ссылку на страницу, понимаете в чёт тут дело. - У этого генератора идея генерировать кнопки "Мы в соцсетях". То есть посетитель нажимает на кнопку и попадает на вашу страницу в соцсети.

А чтобы отправлять ссылку - это вам нужны кнопки Поделиться. К ним ещё дополнительно нужно небольшой javascript написать. Данный генератор таких кнопок не делает, хотя хорошая идея - написать генератор для кнопок поделиться, чтобы можно было кнопки использовать в независимости от платформы. Вполне реально за день написать такой генератор, но я в данный момент другие штуки пишу. Если об этой идее не забуду, возможно в течении пару недель появится и такой генератор для кнопок Поделиться.


*** чтобы писать комментарии.