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

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

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

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

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

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

    width: 48px;
    height: 48px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давайте обернём наш код ещё одним дивом. Даже по более современному не дивом, а тегом 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

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

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

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

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

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

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

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

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

Привет!

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

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

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

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

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

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

Спасибо!

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

При помощи javascript.

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

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

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

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

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

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

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

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

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

?

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

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

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

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

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

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

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

да

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

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

Спасибо!

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

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

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

Удалите 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}

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

<svg role="img" viewBox="0 0 576 512">

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

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

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

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

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

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

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

у меня проблемы.на сайте *** нету кружочка и цвета не меняются

Я не вижу на вашем сайте кнопок.

на главной.в контактах

Из того что я вижу - нет css. Вы код css точно добавили?

А вот css /css/default.css в самом низу

Похоже у вас синтаксическая ошибка в файле /css/default.css

Смотрите вот тут не закрыта фигурная скобка (в конце нет символа }):

#toTop:active, #toTop:focus {
    outline:none;

Видите?

внутринний логотип куда то сместился и меняется только фоновый цвет

Это стили из иконочного шрифта FontAwesome. Я специально в генераторе заменил FontAwesome на svg-элементы. Так круче по оптимизации. А вы иконки вставили как <i class="fa fa-vk fa-2x"></i> поэтому для них подтягиваются свои стили.

Если хотите исправить, можно в css добавить:

.social .fa {
    padding: 0;
}
.social a:hover {
    color: #fff !important;
}

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

В файле /css/default.css cтрочка 816 исправьте так:

.social a:hover {
    color: #fff !important;
}

теперь фоновый цвет пропал

от вк

У меня нормально.

Но если что, можно так сделать:

.telegram a:hover {background: #249bd7 !important}
.vk a:hover {background: #4a76a8  !important}

Сделал. Работает все. Спасибо

Не забудьте в HTML в атрибуте href="#" заменить # на ссылки ваших соцсетей.

Заменил.Спасибо

@nter-NetPro Не сочтите за наглость. Но нет подобной кнопки для отправки электронного письма? Чтоб пользователь по нажатию мог отправить НАМ письмо?

Такое сделать можно. Принцип очень простой. Это ссылка у которой значение атрибута href начинается с mailto:

Пример хтмл:

<a href="mailto:example@gmail.com">Написать письмо</a>

Вместо example@gmail.com указать адрес электронного ящика. При нажатии будет открываться почтовый клиент и адрес получателя будет заполнен из атрибута.

Всё это дело можно стилизовать под кнопку. Часто просто делают ссылкой где текстом ссылки указывают так же адрес почты:

<a href="mailto:example@gmail.com">example@gmail.com</a>

Да это я понимаю, спасибо! Но я имел в виду именно подобной универсальной как для соц сетей

Круглую с иконкой? Типо так:

Вот ХТМЛ:

<div class="social email" title="Написать нам письмо">
    <a href="#" target="_blank">
        <svg role="img" viewBox="0 0 512 512">
            <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>
        </svg>
    </a>
</div>

Во второй строке замените href="#" на href="mailto:example@gmail.com" только ваш Емаил поставьте

Вот CSS:

.social {display: inline-block;}
.social a {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 10px 10px 0;
    text-align: center;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
}
.social a:hover {color: #fff;}
.social svg {
    margin-top: 7px;
    width: 32px;
    height: 32px;
}
.social.email a:hover {background: #5bc7ff}

Если уже добавлен css для кнопок, то из этих стилей только последнюю строчку добавьте к стилям кнопок.

Это именно, что нужно! Спасибо, Вам!

А можно сделать кнопку со своей надписью? Например: "я не использую месенджеры" или что-то вроде этого.

Можно. А как она должна визуально выглядеть?

Стиль можно такой же сохранить (у меня ч/б и квадратные), и ширину чтобы можно было менять (чтобы подогнать под мобильную версию). Установлены кнопки: месенджер, телеграм, Вк

Можно ли сделать в виде конвертика (для email)

Благодарю!

Здравствуйте, а как кнопки в линию сделать, сейчас вот так вот ** , svg-спрайт + HTML код и ещё, можно ли добавить steam?

1. Может у вас стили закешированы в браузере и css берётся до того как вы его изменили.
2. А что такое steam ? Ссылку дайте, я даже логотипа не знаю.

коды не вставляются, поэтому скриншот ***

Кнопку Стим добавлю в генератор через десяток минут (нужно иконку подобрать и код генератора поправить).

Я так не вижу. Дайте ссылку на свой сайт. Я потом ссылку удалю.

О, по второму скриншоту вижу что вы вставили svg второй раз. Удалите тот что перед

<div class="social youtube">

Или удалите полностью и сгенерируйте код заново. Похоже вы пока вставляли закосячили html.

Не помогло, ссылка на сайт htt*****.ru , кэш чистил и на сайте, и в браузере, и на cloudflare. Кстати, сайт на dle

На страницу не подключены CSS стили. Вы их добавляли? Сейчас на странице просто нет CSS-стилей кнопок.

Стилей действительно нет, но ведь svg показываются без них же, там цвет и форма задана, а так же приписана ширина и высота, или стили тоже надо подключить и в них указывать ширину и высоту?

Стили нужно подключать. Там выравнивание в ряд, отступы, цвет и всё остальное.

Добавил Steam :

Спасибо, подключил стили - помогло, а можно ещё логотип гугла типа такого?

Единственный нормальный генератор, была бы кнопка доната - задонатил бы спокойно пару соток за такое :)

Мне гугл подключить несложно. Возможно даже раньше и была такая кнопка. Но ведь гугл+ закрыли ещё пару лет назад.

Для чего такая кнопка нужна сейчас?

Ну, у каждого свои предпочтения. Мне не в соц.сети нужна эта кнопка, и не гугл плюс это будет, это в другой блок

Добавил Google :

Если цвет неправильный, можно подобрать и мне сообщить (желательно в HEX-формате #e34133) код цвета:

Огромное спасибо :))))

Как изменить ширину кнопки отдельно от остальных? У меня кнопки стоят в два ряда в одном месте: три сверху и одна снизу. Ту, которая снизу, нужно сделать шире.

Вот такой HTML:

<div class="social myNameClass">
    <a href="#" target="_blank" >
        Какой то текст
    </a>
</div>

Замените myNameClass на своё название (английскими). И в css добавьте:

.myNameClass {
    width: 150px;
}

.myNameClass a:hover {
    background: #c4302b;
}

Обратите внимание начинается с точки. width - это будет ширина в пикселях. background - это цвет фона кнопки при наведении.

Что-то нифига... Ширина такая же ((

Вот так:

.myNameClass {
    width: 150px !important;
}

Может я не туда код добавляю? Все равно без изменений... ((

Мобильная версия отображается некоректно. Сайт .....

хтмл-код вставлен корректно. А вот CSS вами отредактирован, правда с ошибками. Вот таких значений не нужно делать:

background: " ";

Лучше закомментировать эту строчку, поставив спереди и сзади слеш со звёздочкой вот так:

/* background: #fff; */

и тогда этот стиль не применяется. При ненадобности его потом можно удалить.

Если вам нужно изменить размер иконок внутри кнопок, то делается это тут:

.social svg {
    margin-top: 5px;
    width: 19px;
    height: 19px;
}

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