Красивые кнопки соцсетей на сайт

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

Зачем нужны кнопки соцсетей на сайте

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

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

Онлайн-сервисы для размещения кнопок соцсетей на сайт

Самый простой способ размещения кнопок соцсетей на сайте - это использование онлайн-сервисов, которые помогают это сделать в несколько кликов.

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

🚩 Сервис социальной активности Uptolike.ru

Сервис социальной активности Uptolike.ru

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

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

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

Кнопки соцсетей

После этого выбрать нужный проект - кроме  "Поделиться" в этом сервисе есть очень много других интересных и полезных виджетов:

Кнопки соцсетей Сервис социальной активности Uptolike.ru

Выбираем первый "Поделиться", в левой колонке выставляем нужные настройки, и справа видим, как будут расположены кнопки на нашем сайте - вертикально или горизонтально, слева или справа, снизу или сверху:

Кнопки соцсетей Сервис социальной активности Uptolike.ru

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

Кнопки соцсетей для сайта

Можно видеть, как будут отображаться кнопки на компьютере и на телефоне.

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

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

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

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

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

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

🚩 Pluso - кнопки для добавления контента в социальные сети

Это еще один онлайн-сервис для получения кода кнопок соцсетей для сайта, которым я часто пользуюсь при создании музыкальных открыток:

Pluso - кнопки для добавления контента в социальные сети

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

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

После того, как вы сделали необходимые настройки, можно скопировать сгенерированный код и вставить его в нужное место на сайте:

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

🚩 Share42.com - Скрипт кнопок социальных закладок и сетей

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

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

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

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

кнопки соцсетей на сайт

Сначала, как и на любых других сервисах, вы выбираете нужные вам иконки - их можно перетаскивать, располагая в нужном порядке. Выбор делается с помощью выделения. Размер иконок по умолчанию 32х32, можно сделать меньше (больше можно сделать, внеся изменения непосредственно в сам скрипт).

После этого мы выбираем, как и где будут расположены кнопки, убираем галочку, чтобы не отображалась иконка самого сервиса и нажимаем предпросмотр:

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

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

Разархивируем эту папку, и открываем файл icons.png:

Это изображение, которое по ширине равно 4-м иконкам, то есть, если размер иконки 32px, то 4 иконки по 32 это соответственно 128px по ширине.

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

Если вы хотите увеличить размер иконок, то изображение надо делать таким же, например, 4 иконки по 100px, их соединяешь в одно изображение в фотошопе (для тех, у кого нет фотошопа, можно воспользоваться онлайн-фоторедактором). После того, как вы подставили нужные вам иконки, сохраните этот файл с тем же именем icons.png:

Теперь необходимо изменить сам скрипт. Открываем его с помощью блокнота, например Notepad++, и с помощью поиска находим цифру 32 - их всего должно быть 3 (это размер иконки, которую вы скачали), и эту цифру необходимо поменять на размер измененной иконки - в моем случае это 58px:

Сохраните измененный файл, и теперь можно загружать загружать папку Share42 на свой хостинг в корневую папку public_html (на некоторых хостингах эта папка может называться по другому).

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

Лучше не менять никаких названий, и в таком случае достаточно подставить адрес своего сайта в п.3 вместо http://site.name, и он автоматически отобразится в сгенерированном коде (п.5)

Кроме того, вы можете раскрыть и добавить дополнительные параметры:

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

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

Вот ссылка на музыкальную открытку, где установлены эти кнопки: https://internet-ledi.ru/s_nov_g/

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

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

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

Напишите, если вы уже пользуетесь последним сервисом share42 - работает ли у вас кнопка Ok.

Если вы хотите научиться создавать музыкальные открытки самостоятельно, то вам будет полезен Мастер -класс "Мастер Музыкальных открыток 2.0", благодаря которому вы научитесь создавать адаптивные под мобильные устройства открытки и сайты:

https://internet-ledi.ru/master_muzotkr/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Авторизация на сайте
Подпишись на новости сайта: