Кнопки соцсетей для сайта html: Кнопки социальных сетей для сайта: зачем, где и как

Содержание

Как добавить на свой сайт блок с кнопками, ведущими на ваши страницы или группы в социальных сетях, а так же на RSS ленту

Обновлено 22 сентября 2022 Просмотров: 126 215 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно, да и одним плагином в WordPress будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из бесплатного конструктора кнопок Share42, о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).

Теперь останется только скопировать ссылки (адреса ваших страниц в соцсетях, если вы их уже создали). Читайте об этом в следующих постах:

Добавление своей группы во Вконтакте
Регистрация и вход в Твиттер

А также я посчитал уместным добавить кнопку подписки на RSS ленту и кнопку Feedburner для подписки на новости сайта по Емайлу.

Создаем спрайт из кнопок и вставляем Html код на сайт

После того, как все нужные группы и страницы в соцсетях вы создали, а значит получили все необходимые ссылки, можно озадачиваться добавлением кнопок на сайт. Можно, конечно же, в соответствии с моим постом про иконки и значки для сайта, подобрать для каждой соцсети подходящую иконку и при необходимости уменьшить ее размер до необходимого в простенькой программе FastStone Image Viewer и бесплатном онлайн-фотошопе.

Но это не есть лучший вариант. Почему? Ну, потому что для подгрузки каждой картинки соцсети будет осуществляться отдельный запрос к вашему серверу. Будет у вас десяток иконок — значит десять запросов, которые по-любому будут создавать дополнительную нагрузку на сервер и снижать скорость загрузки страниц. Нам такое расточительство не подходит, тем более, что уже давно изобрели CSS спрайты.

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше).

В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php.

Html код при этом получается крайне простой:

<a rel="nofollow" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo. ru" target="_blank"></a>
<a rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a>
<a rel="nofollow" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a>
<a rel="nofollow" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a>

На всякий случай я добавил rel=»nofollow», чтобы эти ссылки не учитывали поисковики при распределении весов на сайте. Атрибут Title в теге гиперссылки A служит для отображения заключенного в него текста при подведении курсора мыши к иконке. Я не стал им пренебрегать, ибо не для всех посетителей сайта иконки могут представлять исчерпывающую информацию. Выглядеть это будет примерно так:

Привязываем спрайт к Html коду и оформляем кнопки в CSS

Однако очевидно, что для описанного выше кода нужно будет еще

несколько строк в файле стилей добавить (у меня он называется style.

css и живет в папке с используемой мною темой оформления — читайте про них по приведенной чуть выше ссылке). У меня получилось примерно так (может быть и корявенько, но работает):

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;}
.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -24px 0 no-repeat;}
.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat}
.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat}
.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.   png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}

CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т.е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.

С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).

Ну, и самое интересное. С помощью сборного правила background мы определяем, какая именно область нашего спрайта будет отображаться на данном конкретном месте в виде фона (в нашем случае этот фон подкладывается под гиперссылку). Объяснять как так получается очень долго, поэтому читайте приведенную по ссылке статью и все станет понятно (там и наглядные примеры приводятся). Если лень, то просто поэкспериментируйте с циферками, которые, как вы могли заметить, не даром кратны 24.

Да, файл спрайта залейте по ФТП на свой сайт и укажите в background до него путь (в относительном или абсолютном виде). Вот и все. Если не получится, что читайте внимательнее материалы по приведенным выше ссылкам, ну, а если совсем уже ничего не получится, то описывайте вашу ситуацию в комментариях (подробненько — для вставки кода на забудьте его в теги PHP заключить с квадратными скобками).

Как сделать красивую кнопочку самому

Давайте начнем с онлайн сервис Da Button Factory, предназначенного для создания и детальной настройки внешнего вида кнопок для своего сайта.

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

Так же вы сможете создать рамку для кнопочки, включить отбрасывание ею тени, задать точный размер и, наконец, выбрать формат, в котором она будет сохранена (png, gif, jpeg или ico).

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

Теперь давайте поподробнее рассмотрим возможности по редактированию создаваемых на Da Button Factory кнопок. Для начала в поле «Text» можно вписать текст, который будет отображаться на ней, а в поле «Font» — выбрать из выпадающего списка тип шрифта (не все имеющиеся там шрифты поддерживают русский язык). Для текста можно будет также задать жирное или курсивное начертание, просто оставив галочки в полях «Bold» и «Italic».

Размер шрифта можете выбрать из выпадающего списка в поле «Size», а щелкнув по квадратику с текущим цветом рядом с надписью «Color», у вас появится возможность выбрать из открывшейся палитры нужный оттенок текста на создаваемой вами кнопке.

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

В области «Output type» можете выбрать, в каком именно виде будет сохраняться создаваемая вами кнопка. Можно выбрать из выпадающего списка либо вариант сохранения в виде графического файла, либо в виде CSS свойств. В случае выбора сохранения в графический файл, у вас еще появится возможность выбрать формат (png, gif, jpeg или ico).

В области «Style» выбираете из выпадающего списка один из трех возможных вариантов стилевого оформления углов:

rectangular box — кнопка с прямыми углами (квадратными)
rounded box — со скругленными углами, причем радиус скругления можно задать в поле «Corners radius»
round box — с полукругами по бокам

В области «Background» задаете фоновую заливку создаваемой кнопки одним или несколькими цветами. Из выпадающего списка есть возможность выбрать варианты заливки:

unicolored — заливка одним цветом, который можно выбрать в области «Color»
two colors — заливка двумя оттенками, которые можно выбрать в области «Color». Цвета будут заливать ровно по половине кнопки. Поменять их расположение можно при помощи «swap»
gradient — градиентная заливка двумя оттенками. В этом случае цвета будут плавно перетекать один в другой. Направление перетекания можно задать при помощи «swap»
pyramid — вариант градиентной заливки, но при этом один оттенок перетекает в другой, а затем опять осуществляется плавный переход к первому цвету. Ссылка «swap» позволяет менять их последовательность

В области «Border» вы можете задать рамку для кнопки, указав ее толщину и цвет в соответствующих полях. В области «Size» можете задать ее размер по высоте и ширине. После окончания всех настроек загружаете итоговый файл к себе на компьютер, нажав на ссылку «download» в середине страницы. Он будет сохранен в том графическом формате, который вы выбрали в области «Output type».

Но кнопку можно нарисовать и в Фотошопе, если этот редактор имеется в вашем распоряжении (кстати, есть официально бесплатная версия фотошопа, которую несложно скачать):

Как вставить созданную онлайн кнопку в шаблон своего сайта

Для того, чтобы вставить скачанный графический файл с изображением кнопки в нужное место вашего сайта и сделать ее активной (чтобы осуществлялся переход при щелчке по ней мышью), вам нужно для начала загрузить файл картинки на свой сайт по протоколу ФТП, а затем вставить в нужное место шаблона тег картинки IMG (тут еще описана вставка картинок в подробностях), заключив его в тег ссылки A. Ссылка будет вести на ту страницу, которая должна открыться по ее нажатии.

Например, так:

<a target="_blank" href="http://feeds.feedburner.com/Ktonanovenkogoru"><img src="https://ktonanovenkogo.ru/image/button.png" /></a>

Для того, чтобы у вас была возможность позиционировать кнопку относительно соседних элементов дизайна, вы заключаете данный код в открывающий и закрывающий Html теги DIV (создать контейнер). В DIV прописываете атрибут CLASS, а затем прописываете нужные свойства для этого класса в файле CSS вашего шаблона (см. статьи рубрики уроки CSS здесь).

Например, так:

<div><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru&loc=ru_RU"><img src="https://ktonanovenkogo.ru/image/button2.png" /></a></div>

В файле CSS для этого класса imgleft прописать, например, так:

.imgleft {
	float:left;
	margin: 5px 15px 5px 40px;
}

В результате получим кнопку расположенную следующим образом:

Поясню строки свойства для класса imgleft:

float:left; — заставляет данный блок с кнопкой прижаться к соседнему элементу дизайна расположенному слева
margin: 5px 0px 5px 40px; — задает отступ в пикселях данного блока с кнопкой относительно соседних. Отступы перечисляются в таком порядке: сверху, справа, снизу, слева

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

Конструктор кнопок работающий прямой на вашем сайте

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

Если вы недостаточно хорошо разбираетесь в таблицах стилей CSS и PhotoShop (здесь описан онлайн вариант этого фоторедактора) для того, чтобы самостоятельно создать красивую кнопку для своего сайта, то предложенный автором онлайн сервиса набор уже готовых к использованию красивых и бесплатных кнопочек, придется очень даже кстати.

Набор вариантов очень велик и способен перекрыть потребности практически любого вебмастера. Вот пример красивостей, созданных при помощи него:

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

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

Если вы решили испробовать данный бесплатный конструктор кнопок на своем ресурсе, то для начала необходимо скачать набор с онлайн сервиса автора. На странице загрузки скачайте последнюю версию (на данный момент это SB v1.2).

Скачали? Теперь распакуйте архив с файлами и посмотрите, что находится внутри. Папка IMAGES содержит две подпапки: ICONS и SKINS. В папке ICONS находится каталог SILK, в котором содержатся иконки для ваших будущих шедевров размером 16 на 16 пикселей.

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

Теперь вам нужно подключиться к серверу вашего хостинга по протоколу FTP и скопировать на сервер всю папку SexyButtons (можно не копировать файлы changelog.txt и index.html). В какое именно место вы скопируете эту папку не так важно. Я, например, разместил папку с кнопками по следующему адресу: wp-content/themes/SexyButtons.

Копирование файлов займет какое-то время, особенно если вы оставили все иконки в папке SexyButtons\images\skins\, не удалив те, которые не планируете использовать в дальнейшем для оформления вашего сайта.

Как поставить кнопку на сайт?

Давайте перейдем непосредственно к тому, как добавить эти кнопочки на сайт. Следующим шагом после окончания копирования содержимого папки SexyButtons на сервер, будет прописывание в код шаблона строки, предписывающей браузерам при загрузке любых страниц веб ресурса вместе с HTML кодом подгружать еще и файл каскадных таблиц стилей sexybuttons.css.

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

Теги HEAD всегда находятся в самом верху кода любой HTML странички и между ними прописываются различные мета-теги, которые призваны сообщать определенную информацию браузерам, в которых открывается данная страница, и поисковым системам.

Нам нужно будет прописать между открывающим и закрывающим тегами HEAD путь до файл CSS, который позволит сделать красивыми наши бесплатные кнопки:

<link rel="stylesheet" href="https://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css" type="text/css" />

Только, естественно, вы должны будете заменить ссылку https://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css на ваш вариант.

В случае блога на WordPress для вставки данной строки кода вызова CSS свойств, вам нужно будет открыть на редактирование файл header.php (делается это обычно с помощью FTP клиента, например, описанного тут FileZilla) из папки с используемой вами темой оформления WordPress (тут раскрыты все их секреты): wp-content/themes/Папка_с_вашей_темой_оформления.

Открываете файл header.php в редакторе (например, Notеpad++) и в самом его начале находите открывающий Html тег HEAD, который в моем случае выглядит так:

<head profile="http://gmpg. org/xfn/11">

В любом месте за ним, но до закрывающего тега HEAD:

</head>

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

В случае сайта на Joomla, нужно будет открыть на редактирование файл index.php из папки используемого вами шаблона Joomla (тут все их секреты раскрыты): /templates/Папка_с_вашей_темой_оформления.

В начале данного файла вы найдете открывающий и закрывающий теги HEAD, между которыми вами и надо будет вставить строку:

<link rel="stylesheet" href="http://Ваш_путь_до_папки_SexyButtons/SexyButtons/sexybuttons.css" type="text/css" />

В случае форума на SMF, нужно открыть на редактирование index.template.php из папки используемой вами темы оформления SMF. Если у вас на форуме используется тема по умолчанию (дефолтная), то путь к папке будет следующий: Themes/default.

С помощью встроенного поиска лучшего Html и PHP редактора (тут читайте что это за редактор такой) находите, например, этот участок кода:

и добавляете между этими двумя строками свою строку кода для подгрузки файла sexybuttons. css, который сделает кнопки SexyButtons красивыми и соответствующими названию (ну, во всяком случае, разработчики именно так считают):

Все, можно считать, что выполнили задачу — добавили красивые кнопочки на свой сайт. Ничего сложно, правда?

Как сделать ее красивой и информативной?

Теперь переходим к самой интересной части. Для создания кнопочки с надписью, но без рисунка, вы можете использовать либо Html тег ссылок A (здесь читайте про гиперссылки), либо Html тег для создания кнопки BUTTON.

При этом пространство между открывающими и закрывающими тегами (A или BUTTON) должно быть заполнено текстом, который вы хотите видеть на создаваемой кнопке. Причем, этот текст должен быть заключен в двойные открывающие и закрывающие Html теги SPAN. Звучит устрашающе, не правда ли?

Но на деле, все довольно просто. В случае тега A мы используем такой код:

<a href="#"><span><span>Просто красивая штучка</span></span></a>

и получаем такую кнопочку:

Просто красивая штучка

Причем, это реально рабочая кнопка. Нажав на нее вы попадете в начало страницы. Это задается атрибутом HREF тега A. Там прописан переход к началу страницы «#» (хеш).

В случае с тегом BUTTON, код и получаемая кнопочка будут выглядеть так:

<button><span><span>Красивая кнопочка для сайта</span></span></button>

Для того, чтобы кнопка на сайте выглядела более эффектно, в конструкторе предусмотрена возможность добавления иконки (изображения 16 на 16 пикселей) до или после надписи.

Для вставки иконки нужно будет добавить еще один открывающий и закрывающий тег SPAN, причем, в нем нужно прописать CSS класс соответствующий определенной иконке, которая появится на нашей красивейшей кнопочке. Например:

<button><span><span><span>KtoNaNovenkogo.ru</span></span></span></button>

Видите, у нашей кнопки перед надписью появилась галочка, которая соответствует классу OK, прописанному во внутреннем теге SPAN. А как сделать так, чтобы иконка была на кнопочке не перед надписью, а после нее?

Довольно просто. Нужно добавить через пробел к названию CSS класса, прописываемого в Html теге SPAN, слово AFTER. В результате мы получим такую вот красотищу:

<button><span><span><span>KtoNaNovenkogo.ru</span></span></span></button>

Но встает вопрос, а откуда взять название CSS класса, с помощью которого можно будет отобразить на создаваемой кнопке нужную вам иконку. Сразу оговорюсь, что все полторы тысячи иконок вы не сможете использовать с помощью заранее прописанных автором классов. Автор прописал только базовые иконки и соответствующие им классы.

Все это вы сможете посмотреть, открыв файл sexybuttons. css в редакторе Notepad++. В самом низу этого файла вы увидите группу свойств, описывающих соответствие названия класса и иконки (прописан путь до файла иконки), которая будет выводиться кнопке от SexyButtons при использовании данного класса. Вот начало этой группы свойств:

Добавление на них красивых иконок

Если вы захотите добавить иконку на кнопочку не описанную в этих CSS свойствах, то вам придется добавить к этой группе строку с новым названием нового класса для тега SPAN и Урлом файла нужной иконки, например так:

.sexybutton span.ktonanovenkogo		{ background-image: url(images/icons/silk/application_form_edit.png) !important; }

Теперь можно будет использовать класс KTONANOVENKOGO для добавления красивой иконки:

<button><span><span><span>Кнопочка для сайта с иконкой</span></span></span></button>

Кроме описанного выше способа добавления на создаваемые кнопки иконок, не описанных в файле sexybuttons. css, можно воспользоваться альтернативным способом. В этом случае, вместо третьего SPAN используется Html тег IMG с прописанным Урлом нужной иконки, который добавляется внутри двух SPAN до или после надписи на кнопочке.

Например, красотища, ведущая на предыдущую страницу, можете выглядеть так:

<button><span><span><img src="https://ktonanovenkogo.ru/wp-content/themes/SexyButtons/images/icons/silk/resultset_previous.png" />Back</span></span></button>

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

Как сделать кнопки с разными цветами и размерами шрифтов

По умолчанию имеется возможность создать красоту со шрифтами следующих размеров: нормальный, средний и большой. Для использования среднего и большого размера шрифта вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, классы SEXYMEDIUM и SEXYLARGE.

Нормальный шрифт надписи на кнопочке будет выглядеть так:

Добавить кнопку на сайт со средним размером шрифта можно с помощью такого вот кода:

Добавить кнопочку с большим шрифтом можно с помощью такого кода:

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

В конструкторе SexyButtons предусмотрены две дополнительные цветовые схемы кнопок- оранжевая и желтая. Для их применения, точно так же как и при изменении размера шрифта, вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS классы SEXYORANGE и SEXYYELLOW. Оранжевая кнопочка будет формировать и выглядеть так:

<a href="#"><span><span>Оранжевый шедевр</span></span></a>

Желтая — так:

<a href="#"><span><span>Желтый шедевр</span></span></a>

Оформление под названием Simple отличается от оформления стандартных кнопок. Для использования Simple достаточно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS класс sexysimple:

<button>KtoNaNovenkogo.ru</button>

Simple имеет еще восемь возможных цветов (по умолчанию кнопка будет черной). Цвет кнопочки Simple можно задать, дописав через пробел к CSS классам SEXYBUTTON SEXYSIMPLE еще и CSS класс, отвечающий за цвет. Имеется возможность использовать один из этих CSS классов: SEXYBLACK (можно не добавлять, т.к. он идет по умолчанию и без добавления третьего класса), SEXYTEAL, SEXYMAGENTA, SEXYRED, SEXYORANGE, SEXYGREEN, SEXYBLUE, SEXYPURPLE, SEXYYELLOW.

В результате получим, например, такие красивые и разноцветные кнопки на сайте:

Вот такой вот светофор получился. Можно еще изменять размер кнопочек Simple, дописывая по аналогии с цветами следующие классы: SEXYSMALL, SEXYMEDIUM (это размер используется по умолчанию), SEXYLARGE, SEXYXL, SEXYXXL, SEXYXXXL.

В результате получим такие кнопки разного размера:

Замечательный, на мой взгляд, конструктор или же фреймворк.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Социальные кнопки на HTML / CSS3

Это довольно часто встречающий атрибут на каждом сайт, сейчас не возможно представить хоть один сайт без социальных кнопок. В данном уроке создадим красивые кнопки на CSS, зафиксируем их на странице, а при наведении, будем анимированть плавным появлением с количеством просмотров. По нажатию на иконку пользователь будет переходить на социальную сеть.

See the Pen EbdgoN by Denis (@Dwstroy) on CodePen.

Разметка социальной панели в HTML

Первым делом создадим каркас социальной панели. Чтобы не писать html разметку с нуля я его скопировал с предыдущего урока «Как создать форму в CSS3», в уроке я показывал, как подключать иконки на страничке и красиво оформить.

Скачайте архив с урока на компьютер и разархивируйте. В папке найдете стили и шрифты иконок, которые подключали в предыдущем видео с данного ресурса fontawesome.io.

В папке img расположена картинка на задний фон, в css папке файл style.css в которой подключили картинку, font-awesome.css содержит стили иконок, в папке fonts их шрифты, а в index.html это все подключено, остается только описать саму разметку.

Я переносу все файлы в IDE редактор PhpStorm в котором буду описывать код, а вы можете их редактировать прям через блокнот.

Открываем файл index.html, в head описано подключение стилей и иконок, тут я думаю все предельно понятно. Между тегами body открываем <div> с классом социал .social, который будет являться нашей оберткой кнопок.

В нутрии создадим, блок <div> с классом . div.dws-text

Затем отберем иконки, которые задействуем под социальную панель. Переходим на сайт fontawesome.io/icons и выписываем название иконок, которые будем использовать.

facebook
vk
twitter
youtube
odnoklassniki
envelope-o

Вставляем ссылки и прописываем количество подписчиков.

<div>
   <div><a href="https://www.facebook.com/DWstroy-1415456785391372/" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>51</div>
   </a></div>
   <div><a href="https://vk.com/dwstroy" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>730</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="https://www. youtube.com/channel/UCTgx8cZRD5Jz2_zGaT27S3w" target="_blank">
      <div><i aria-hidden="true"></i></div>
      <div>1299</div>
   </a></div>
   <div><a href="#">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
   <div><a href="mailto:[email protected]">
      <div><i aria-hidden="true"></i></div>
      <div></div>
   </a></div>
</div>

Затем приступим к оформлению стилей.

Открываем style.css, от позиционируем блок .social.

.social{
 position: fixed;
 top: 200px;
 left: 0;
 z-index: 1000;
}

Затем предадим кнопке внешний вид, указываем высоту и ширину, сделаем небольшие отступы. Зададим уменьшение ширины блока кнопки до 40 пик и скроем все, что вылезает за ее пределы при помощи overflow:hidden;. Придаем кнопке анимацию при помощи transition: all 0.5s; и прижимаем ее к левому краю меняя параметр у класса .social left=0.

.dws-button{
 background-color: #3b5998;
 width: 40px;
 height: 25px;
 padding: 5px;
 overflow:hidden;
 transition: all 0.5s;
}

Пропишем иконкам, и тексту которые обернутые в ссылки белый цвет, убираем подчеркивание.

a{
 color: #fff;
 text-decoration:none;
}

Увеличим иконки на 25 пик. и от центруем их по середине. Чтобы они встали по центру, напишем что это блочный элемент.

a i.fa {
 font-size: 25px;
 text-align: center;
 display: block;
}

Сделаем обтекание у иконок при помощи float:left и укажем ширину в 40 пик.

.dws-share{
 float: left;
 width: 40px;
}

Текст прижмем к правой стороне, увеличим его на 20 пик. и отпозиционируем его по центру строки.

.dws-text{
 float: right;
 font-size: 20px;
 position: relative;
 top: 2px;
 right: 5px;
}

Затем предлагаю каждой кнопки задать соответствующий цвет.

.dws-facebook {background-color: #3b5998;}
.dws-vk {background-color: #507299;}
.dws-twitter {background-color: #33bdf1;}
.dws-youtube {background-color: #e62117;}
.dws-odnoklassniki {background-color: #ee8208;}
.dws-envelope-o {background-color: #656766;}

Пропишем параметры при наведении. Первое будем менять цвет кнопки на черный, увеличим ее ширину до 50 пик., а саму иконку немного сдвинем левей на 15 пик.

.dws-button:hover{
 background-color: #000;
 width: 50px;
 padding-left: 15px;
}

Получилось следующее. Добавим при наведении для блоков с текстом ширину.

.dws-facebook:hover{width:75px;}
.dws-vk:hover,.dws-youtube:hover{width:95px;}

Вот такие анимированные иконки получились у нас с вами. Вы можете на базе данного кода вставлять свои иконки, добавлять ссылки к ним, внедрять все это к себе на сайт. Ведь функционал до безобразия простой и довольно эффектно смотрится.

Кому понравилось видео, обязательно поделись им в социальных сетях.

Оставить комментарий:

6 способов интегрировать кнопки социальных сетей на ваш сайт

Ответить

Подтвержденный «Анна Пренцель изучала информатику в Университете прикладных наук Циттау/Гёрлиц и получила докторскую степень в БТУ Котбус-Зенфтенберг. В настоящее время она работает лектором на факультете электротехники и компьютерных наук Университета прикладных наук Циттау/Гёрлиц. Она увлечена преподаванием и любит наблюдать за прогрессом своих учеников. Ее хобби включают фотографию, походы и рукоделие.

18 августа 2020 г. 5 минут чтения 1618

Хотите, чтобы посетители вашего сайта знали о ваших каналах в социальных сетях? Хотите, чтобы вашей статьей поделились в социальных сетях? Затем вам нужны интерактивные символы социальных сетей (значки) и соответствующие кнопки «Нравится» и «Поделиться» для каждой платформы.

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

Встраивание значков социальных сетей в виде изображений

Вы можете легко встроить значки социальных сетей в виде изображений на свой веб-сайт, а затем связать их с адресами ваших каналов. Но где вы их берете? В Интернете есть много хороших веб-сайтов, где вы можете бесплатно скачать символы в различных формах в виде файлов изображений.

Я рекомендую, например, страницу iconfinder.com.

Здесь вы можете просто ввести название нужного значка (например, «instagram»), и вы получите список бесплатных загружаемых файлов изображений в очень хорошем качестве.

Список других хороших поставщиков иконок или наборов иконок можно найти на странице buffer.com.

Сейчас я покажу вам, как вставить иконку на ваш сайт. Мы предполагаем, что значок с именем «instagram.png» находится в той же папке, что и ваш HTML-файл.

Затем вы можете использовать следующий фрагмент кода:

  instagram.com/blaustern_fotografie/">

Тег a используется, чтобы сделать значок ссылкой. Конечно, вы должны заменить адрес, указанный выше, адресом вашего собственного профиля в Instagram. Установив свойство target="_blank" , убедитесь, что профиль открывается в новой вкладке браузера.

Если значок находится в подпапке относительно HTML-файла (например, «иконки»), путь к изображению необходимо скорректировать соответствующим образом:

Конечно, вы можете изменить размер значков в соответствии с вашими потребностями. Я рекомендую вам определить класс CSS для всех значков, принадлежащих к общей группе, например. "sm_icon" :

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

 .sm_icon{
 
  ширина: 50 пикселей;
  /* высота регулируется автоматически*/
}

Выбор формата изображения: PNG или SVG?

Вы заметите, что файлы изображений доступны в различных форматах, таких как JPG, GIF, PNG или SVG. Типы файлов имеют разные характеристики и, следовательно, также определенные преимущества и недостатки для использования на веб-сайтах.

Мы делим их на растровые форматы (JPG, GIF, PNG) и векторный формат SVG. Растровые форматы имеют фиксированное разрешение с определенной высотой и шириной в пикселях.

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

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

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

Это может произойти, например, если вы загружаете иконку с разрешением 64x64px из Iconfinder, а затем определяете ширину 200px в настройках CSS.

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

Таким образом, все размеры экрана и уровни масштабирования могут обрабатываться одним и тем же файлом. Вы можете обращаться с векторными изображениями так же, как с любым другим форматом изображения, и включать их как img-tags с желаемой высотой и шириной в вашем HTML-коде:

Если вам по-прежнему приходится использовать пиксельный формат, я рекомендую формат PNG. По сравнению с JPG или GIF он поддерживает прозрачные области изображения, которые часто необходимы для значков и логотипов.

Встраивание значков социальных сетей в виде шрифта

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

Поясню процедуру на примере библиотеки «Font Awesome»:

Создайте бесплатную учетную запись пользователя на https://fontawesome.com/ (теперь это требование для импорта бесплатных или платных значков).

В личном кабинете вы найдете раздел «Наборы». Ваш новый комплект имеет идентификатор, состоящий из нескольких цифр и букв. После нажатия на комплект вам будет представлен код сценария, который необходимо вставить между тегами заголовка вашей HTML-страницы, чтобы импортировать библиотеку.

В следующем примере я замаскировал идентификатор x-символами:

Затем вы можете искать значки, например. «Инстаграм». Для каждого значка вы найдете инструкции о том, как включить его в HTML-код. Я выбрал значок с названием «instagram-square», который включен, как показано ниже.

 
    <я>

Вы можете оформить свой значок с помощью CSS, например, с другим размером шрифта или цветом:

 .fa-instagram-square{
    цвет: зеленый;
    размер шрифта: 18px;
}

Обратите внимание, что ссылка на скрипт Font Awesome устанавливает соединение с внешним сервером. Это может включать передачу личных данных посетителей вашего веб-сайта в Font Awesome.

В зависимости от того, какие правовые нормы применяются (например, gdpr), вам, возможно, придется информировать своих пользователей об этой услуге. Или вы можете перестраховаться и разместить библиотеку самостоятельно. Информацию об этом можно найти здесь: Хостинг Font Awesome Yourself

В качестве альтернативы Font Awesome могу порекомендовать материальные иконки от Google. Интеграция иконок здесь очень похожа на Font Awesome.

Интеграция кнопок социальных сетей (лайк, общий доступ) вручную для разных платформ

Если вы хотите добавить кнопки «Мне нравится», «Поделиться» и другие интерактивные кнопки из Facebook, Twitter и других компаний, вы должны использовать специальный HTML-код, предоставляемый отдельными платформами.

Модернизируйте способы отладки веб-приложений и мобильных приложений — начните мониторинг бесплатно.

Без категорий

#css

20 лучших кнопок социальных сетей HTML5 2023

Раскройте потенциал социальных сетей, используя эти лучшие (и самые крутые) шаблоны социальных кнопок — бесплатно бесплатно.

Более 4,6 миллиарда человек пользуются социальными сетями, и если вы не сделаете их частью своего маркетинга, это может привести к разрушительным результатам.

Мы рассмотрели множество доступных кнопок и значков в Интернете, но остановились на этих 20.

Вы можете легко найти нужный стиль благодаря разнообразию этой коллекции.

На этом все не заканчивается.

Если вы хотите, вы также можете украсить и брендировать их в соответствии с вашим бизнесом и веб-сайтом.

Эффект социального обмена может принести очень положительных результатов . Мы сами видели это даже в нишах, которые могут быть не слишком популярны в Facebook, Instagram и т. д.

Вы можете использовать эти социальные кнопки Bootstrap, чтобы делиться ВСЕМ, что вы хотите.

Стань общительным!

Кнопки Bootstrap V15

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

Вы ВЫИГРЫВАЕТЕ по-крупному.

Кнопки Bootstrap V15, вероятно, мой любимый набор из списка. Кнопки социальных сетей бывают двух разных форматов с классным эффектом тени, который исчезает при наведении.

Загрузить

Кнопки Bootstrap V18

Кнопки Bootstrap V18 — это набор различных кнопок, ОТЛИЧНЫХ от других. Тем не менее, вы также получаете несколько более традиционных, так что вы можете выбрать любой путь, какой захотите.

Даже если вы не заметите этого при первом просмотре, каждая кнопка имеет тень, которая создает крутой эффект щелчка (путем исчезновения).

Вы можете попробовать сами, посетив страницу предварительного просмотра демо-версии.

Скачать

Bootstrap Buttons V13

Несмотря на то, что Bootstrap Buttons V13 находится на темном фоне , вы можете использовать его с другими стилями фона. Вам не всегда нужно следовать конфигурациям по умолчанию.

Не стесняйтесь идти против течения.

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