Как изменить внешний вид социальных кнопок?

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

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

Преимущества Goodshare

Кратко почему именно Goodshare:

  • Легкий код, а значит быстрая скорость работы;
  • Отображение на всех устройствах;
  • Универсальные настройки (можно задать любой вид);

А теперь подробно о каждом плюсе.

Код Goodshare не содержит скрытых скриптов слежения за вашими посетителями, рекламы или обратных ссылок на автора. Все это делает код гораздо легче аналогов (Pluso, UpToLike, Share42 и другие плагины социальных кнопок). А мы знаем правило: легче код — быстрее работа сайта.

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

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

По-моему, преимущества над конкурентами огромные!

Устанавливаем на свой блог

Установка довольно простая. Переходим на сайт Goodshare.ru и нажимаем «Установить кнопки на сайт».

Скрипт Googshare для соц. кнопок

Будем подключать напрямую с их сервера, выбираем первый вариант. Копируем код и вставляем его в файл «footer.php». Для тех, кто хочет сохранить скрипт на своем сервере — есть возможность скачать его.

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

Где следующие параметры:

  • data-type — выбранная нами соц. сеть. Остальные соц. сети смотрите здесь: Goodshare.ru/documentation.html;
  • Блок с data-counter — счетчик. Если не нужен — удалите его.

Быстро прописав стили, получил такой вид кнопок:

Внешний вид социальных кнопок

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

Уверен, это лучшее решение для изменения внешнего вида социальных кнопок. Если кто-то не согласен — поделитесь своим мнением в комментариях!)

На этом заканчиваю. Удачного дня!