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

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

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

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

Готово. Добавил 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

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

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

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

Во первых, в 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;
}

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

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

Удалите в файле 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 дюйма и кнопки соцсетей смотрятся совсем подругому, поэтому я предлагал их центровать.

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

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

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

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

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

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

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

Добрый день! Не хватает кода для 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 написать. Данный генератор таких кнопок не делает, хотя хорошая идея - написать генератор для кнопок поделиться, чтобы можно было кнопки использовать в независимости от платформы. Вполне реально за день написать такой генератор, но я в данный момент другие штуки пишу. Если об этой идее не забуду, возможно в течении пару недель появится и такой генератор для кнопок Поделиться.