11 августа

Кнопки социальных сетей для сайта на WordPress

минут чтения

1  комментариев

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

Скрипт социальных кнопок

Сайт share42

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

Как установить кнопки социальных сетей для сайта

Теперь приступим к обзору возможностей сервиса. Сервис поддерживает русский и английский интерфейсы. На момент написания статьи скрипт поддерживает 45 социальных сервисов. Попав на главную страницу, вашему взгляду откроется пошаговый конструктор, генератор социальной составляющей, разделенный на 6 шагов:

Первый шаг

На первом шаге определяются иконки сервисов, которые вы хотите задействовать на своем сайте. Задается их размер от 16 до 32 пикселей. Порядок иконок можно изменять простым перетаскиванием. У некоторых поддерживаемых сервисов рядом с иконкой присутствует оранжевая точка, что означает наличие у этого сервиса поддержки счетчика.

Выбираем иконки

Второй шаг

Второй шаг нам позволяет выбрать горизонтальную или вертикальную панели с иконками. Замечу, что вертикальный тип панели плавающий, то есть при скроллинге панель остается на месте, а не движется вместе со страницей. Есть возможность задать тип кодировки UTF-8 либо Windows-1251 (ANSI). Советую поставить две последние галочки, они позволят вам увидеть счетчик рядом с кнопкой.

Дополнительные опции сервиса

Третий шаг

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

Просмотр и загрузка кнопок

Четвертый шаг

Четвертый шаг помогает установить скачанный скрипт на своем сайте или блоге. Если описать вкратце: распаковка скачанного архива со скриптом, загрузка папки на свой сервер в любую директорию сайта, указать путь к папке со скриптом, выбрать тип вашего сайта из популярных CMS или просто опцию «Любой сайт».

Установка скрипта на сайт

Пятый шаг

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

<div class="share42init"></div>
<script type="text/javascript" src="https://site.name/share42/share42.js"></script>

Еще существуют специальные параметры, которые я представлю на скриншоте ниже.

Специальные параметры кнопок

Шестой шаг

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

Итоговый результат кнопок

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

Пример моих кнопок

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

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


Теги

разработка, скрипт, социальные закладки, социальные кнопки


Об авторе

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

Denis Chernyatinsky

Вам также может понравиться

Как я осуществил перенос сайта на другой хостинг
Кэширование изображений WordPress в 1 клик
  • Спасибо за подробное объяснение процесса, кнопочки мной успешно установлены и не возникло никаких сложностей, хотя я не специалист в этой области.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >