Как сделать ссылки на соцсети в html

Social media icons HTML and CSS

Once suspended, beginnerdeveloper will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, beginnerdeveloper will be able to comment and publish posts again.

Once unpublished, all posts by beginnerdeveloper will become hidden and only accessible to themselves.

If beginnerdeveloper is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Beginner Developer.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag beginnerdeveloper:

beginnerdeveloper consistently posts content that violates DEV Community’s code of conduct because it is harassing, offensive or spammy.

Unflagging beginnerdeveloper will restore default visibility to their posts.

DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.

• Home
• Reading List
• Listings
• Podcasts
• Videos
• Tags
• FAQ
• Forem Shop
• Sponsors
• About
• Contact
• Guides
• Software comparisons

• Code of Conduct
• Privacy Policy
• Terms of use

Built on Forem — the open source software that powers DEV and other inclusive communities.

Made with love and Ruby on Rails. DEV Community © 2016 — 2023.

We're a place where coders share, stay up-to-date and grow their careers.

Как добавить социальные кнопки на сайт?

В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.

Социальные сети на сайте

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

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

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

Например, на сайте «mebel.ru» они находятся в правом нижней части:

Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.

Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:

Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.

Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».

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

Ссылки на официальные профили в социальных сетях

Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.

Выполняется это очень просто.

Первое что нужно сделать — это создать HTML код:

Второе — написать стили для их оформления:

Кнопки «Поделиться» и «Мне нравится»

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

Наиболее простой способ вставить такие блоки на сайт — это воспользоваться сторонними сервисами .

Использование сторонних сервисов

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

Примеры сервисов, представляющий такую услугу:

Как это осуществляется в USocial:

Конструктор блока «Поделиться» от Яндекса:

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

Мета-теги для социальных сетей

Социальные мета-теги – это дополнительная информация, которую нужно вставить на страницу через тег <meta> . Основное их назначение – это указать соцсетям точный заголовок, описание и изображение, которые вы хотите видеть в публикуемой ссылке.

При этом для разных сетей код микроразметки может отличаться:

Данный код необходимо прописать в разделе <head> .

Без использования сторонних сервисов (официальные кнопки соцсетей)

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

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

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

Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.

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

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

Социальные кнопки через URL-адреса прямого доступа

Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.

Основные преимущества это способа:

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

Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.

Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.

Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.

URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:

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

В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.

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

В JavaScript кодирование полного URI осуществляется посредством encodeURI , а одного значения параметра через encodeURIComponent :

Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:

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

Создание ссылок посредством JavaScript

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

На клиенте, т.е. с помощью JavaScript, это можно сделать так:

Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента <div> с классом social-share :

Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.

Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент <div ></div> .

Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):

В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.

Сам скрипт работает довольно просто. После загрузки DOM, он получает URL-адрес текущей страницы и её заголовок. Далее используя эти данные, он «пробегается» по соцсетям в shareData и формирует массив ссылок. После этого он получает элемент .social-share и вставляет туда HTML код ссылок, полученный посредством объедение всех элементов массива anchorList в строку.

Создание соцкнопок посредством JavaScript

Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.

Создание соцкнопок посредством PHP

Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.

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

Как сверстать и оформить в css кнопки социальных сетей

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

Разметка и базовые стили

Итак, поскольку мы создаем блок с иконками социальных сетей, то наш блок назовем share (поделиться), так как для этого в основном эти иконки и ставят (хотя иногда это просто ссылки на группы). Далее нужно указать содержимое этого контейнера.
Добавим в html-файл такой код:

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

Допустим, у нас будет 3 социальных сети – Вконтакте, Фейсбук, Твиттер. Перед ними выводим слово, а далее размещаем 3 ссылки. Все они будут иметь одинаковый класс – social , но также каждая гиперссылка получит свой, уникальный класс.

Добавим пока что вот такие стили:

Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.

Оформляем иконки

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

Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.

Хорошо, а для чего нам vertical-align: middle ? Это свойство выровняет текст в контейнере так, что он будет ровно по центру по вертикали. Также зададим нашим ячейкам какой-нибудь фон, чтобы визуально видеть их уже на этом этапе. Получилась заготовка. Самое время наконец добавить иконочки.

Финальный этап

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

Короче, нам нужно такое изображение. У меня оно примерно 120 на 40.

В css-стили добавляем следующие правила:

Получаем на выходе полностью оформленный блок с иконками.

Вы поняли, как мы это получили? Если нет, то объясняю. Каждая ссылка блок имеет размер 40 на 40. Соответственно, когда мы задаем для него фоновое изображение 120 на 40, то блок просто не может вместить его полностью, и в результате вмещает столько, сколько может.

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

Записав в фоне так: background: url(icon.png) -40px 0 , мы явно указываем, что для блока social-fb , фоновая картинка должна отобразиться именно с указанного положения – сорока пикселей по ширине влево и по высоте без смещения, потому что оно не нужно. Вот так вот все просто, на самом деле.

Что еще можно сделать?

Может быть, вы еще как-то дополнительно хотите оформить блок социальных сетей. Есть несколько идей. Во-первых, можно добавить всем иконкам скругление углов.

Во-вторых, можно добавить им рамку.

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

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

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

На этом я сегодняшнюю статья-урок заканчиваю. В следующий раз создадим на css еще что-нибудь

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

При малом разрешении экрана — иконки не кликабельны. Нет адаптации к мобильным.
Как адаптировать?

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

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

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

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

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

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

Вот такие коды кнопок. Что же мы видим? Vkontakte единственный из представленных кодов, не использует HTML 5. В данном случае на использование HTML 5 указывает атрибут data- в html тегах. Еще интересно, что у Twitter и Facebook очень похожие коды, видимо, подсматривают друг у друга. Еще у Twitter и Facebook не указан type=«text/javascript», что соответствует HTML5, атрибут type теперь не является обязательным. Значение по умолчанию JavaScript (ECMAScript). А Google продолжает указывать type=«text/javascript». Зато Google единственный кто использует асинхронную загрузку javascript, при помощи атрибута async, соответствующего спецификации HTML 5.

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

Для чего это нужно? Например, Вы поставили на свой сайт кнопку «Твитнуть», а мы помним, что у них нет в коде атрибута async. И все бы хорошо, но у многих на работе закрыт доступ к социальным сетям и когда к Вам на сайт зайдет пользователь без доступа к Twittter его браузер не сможет загрузить скрипты с Твиттера, а т.к. загрузка синхронная браузер заметно «подвиснет», пока попытка загрузить скрипт не прекратится по таймауту.

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

В связи с тем, что полученные кнопки я решил объединить в один блок, логично будет весь javascript код также объединить в один скрипт и добавить асинхронную загрузку. Кроме того, я пока не использую HTML 5 на своем сайте и для того, что бы код был валидным, все атрибуты HTML 5 нужно установить с помощью javascript.

С помощью javascript, атрибут data- устанавливается очень просто, например:

Как всегда не обошлось без нюансов. Работает во всех браузерах, кроме… Как Вы уже догадались, кроме IE до ie8, в ie9 уже работает. Но мы запишем по-другому, что бы работало во всех браузерах:

В конечном итоге вот, что у меня получилось:

1. Немного изменил HTML, главным образом мне на сайте совсем не нужна прямая ссылка на Twitter, а в своем коде они проставляют такую ссылку: Твитнуть , зачем им это не понятно, что о них кто-то еще не знает? Или рейтинг в поисковиках маленький? В общем, записал так: Твитнуть , можно, конечно rel=«nofollow» поставить, но я выбрал максимально кардинальный метод. Вообще бы убрал тег «А», но без него не работает. HTML блок кнопок, вставляем туда, где хотим увидеть кнопки:

2. Javascript код асинхронной загрузки скриптов для кнопок, вставляйте куда хотите, обычно или в head или в конец страницы. Кстати у Twitter и Facebook в коде есть защита от повторной загрузки скриптов, сделанная, на случай если код вставить в страницу несколько раз, не думаю, что мой код кто-то вставит несколько раз, но на всякий случай защиту от повторной загрузки скриптов я оставил:

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