Разное

Кнопки соцсетей: Кнопки соцсетей для сайта на чистом CSS

06.06.2023

Кнопки социальных сетей на сайте («за» и «против»)

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

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

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

«За»:

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

    Но как бы они это сделали, если бы не эти кнопки, ненавязчиво напоминающие о том, что есть такая прекрасная возможность поделиться с друзьями?


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

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


  • Привлечение дополнительного трафика на сайт.
  • На мой взгляд — это самый существенный плюс

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

Но также есть и несколько причин выступающих против использования таких кнопок на сайте.

«Против»:

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

    Такая вот «слепота на соц. кнопки».

    И в таком случае, естественно, они становятся совсем не эффективными.


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

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


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


Какие варианты есть?

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

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

Располагайте их с умом.

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

Иначе в них пропадет весь смысл…

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

Где мне взять соц. кнопки и как установить их на сайт?

Что касается MaxSite CMS, то у нее есть специальные плагины с кнопками. Один из плагинов называется addzakl и идет он в комплекте с самой системой.

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

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

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

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

В других CMS также есть свои плагины, которые выводят соц. кнопки на сайт.

А что вы думаете?

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

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

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

Спасибо за внимание!

Автор статьи: Елена Лощилова.

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

Тэги: социальные кнопки для сайта кнопки социальных сетей для сайта как добавить социальные кнопки на сайт добавить кнопки социальных сетей на сайт

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

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

Необходимость размещения значков соцсетей на сайте

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

  • Оперативность индексации проекта.
  • Значимость web-ресурса для роботов поисковых систем.
  • Посещаемость, число подписчиков.

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

Конструктор uSocial, его особенности

Мощный функционал конструктора uSocial сделал его лидером в категории социальных сервисов. Многие владельцы сайтов отдают ему предпочтение. У него есть своя функциональная кнопка, привлекающее посетителей pop-up окно. Конструктор предлагает инструмент, очищающий кэш, приложение для сообществ ВК. Кроме того, в функционале имеется опция, позволяющая скрывать промокоды, ссылки на ресурсе на определенное время или до выполнения условия использования кнопки «поделиться» в соцсетях. Также в конструкторе имеются:

  • Большое количество настроек.
  • Поддержка мобильного формата.
  • Счетчик лайков.

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

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

Порядок установки значков социальных сетей на ресурсе

Конструктор uSocial окажет помощь тем, кто не знает, как добавить социальные кнопки на сайт. Для начала нужно подобрать сервисы, их форму, стиль для гармоничного дизайна. Следует выбрать удобное размещение, размер, установить отдельные счетчики и общий для всех значков. Затем подключается поддержка мобильных устройств и сервисы Телеграм, СМС, Вайбер, Ватцап. Можно использовать опцию «ловушка для глаз», призывающую пользователя поделиться ссылкой на ресурс в социальных сетях.

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

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

03.05.2021 12:05

Поделиться:

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

❮ Предыдущая Далее ❯


Узнайте, как оформить кнопки социальных сетей с помощью CSS.


Попробуйте сами »


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

Шаг 1) Добавьте HTML:

Пример


cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min .css»>





Шаг 2) Добавьте CSS:

Пример квадрата

/* Стиль всех значков шрифтов awesome */
.fa {
  padding: 20px;
  размер шрифта: 30 пикселей;
  ширина: 50 пикселей;
  выравнивание текста: по центру;
  украшение текста: нет;

}

/* Добавьте эффект наведения, если хотите */
.fa:hover {
  opacity: 0.7;
}

/* Установить определенный цвет для каждой марки */

/* Facebook */
.fa-facebook {
  фон: #3B5998;
  цвет: белый;
}

/* Твиттер */
.fa-twitter {
  фон: #55АСЕ;
  цвет: белый;
}

Попробуйте сами »



Круглые кнопки

Совет: Добавить border-radius:50% для создания круглых кнопок и уменьшения ширины :

Rounded Example

. fa {
  padding: 20px;

размер шрифта: 30px;
  ширина: 30 пикселей;
выравнивание текста: по центру;
  text-decoration: нет;
радиус границы: 50%;
}

Попробуйте сами »

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

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

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

Справочник по HTML

Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как и где их добавить

Хотите получать больше трафика из социальных сетей?

Согласно исследованию Alexa, на социальные сети приходится от 0,8% до 12,2% трафика веб-сайта, при этом новостные и информационные сайты получают наибольшее количество трафика из социальных сетей.

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

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

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

Каким контентом на вашем веб-сайте чаще всего делятся?

Скорее всего, если у вас есть блог, это будет контент вашего блога.

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

Исключением, согласно некоторым исследованиям, являются страницы с конкретным призывом к действию.

По данным VWO, клики по главной кнопке CTA (добавить в корзину) увеличились на 11,9%, когда кнопки социальных сетей были удалены с целевой страницы.

Лучший подход при внесении изменений на ваш веб-сайт — это A/B-тестирование.

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

Как лучшие публикации используют кнопки социальных сетей

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

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

Скриншот с сайта Billboard.com, декабрь 2021 г.

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

В идеале посетители не решат поделиться статьей, пока не прочитают ее.

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

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

Скриншот с сайта Entrepreneur. com, декабрь 2021 г.

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

Yahoo Sports предлагает аналогичную функцию на своем веб-сайте.

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

Скриншот с сайта Yahoo.com, декабрь 2021 г.

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

Harvard Business Review предлагает кнопки социальных сетей в верхней части статьи, а также в нижней части статьи, под указанием автора.

Скриншот с сайта HBR.org, декабрь 2021 г.

К сожалению, эти кнопки социальных сетей не будут доступны для тех, кто не дочитал статью до конца.

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

Скриншот с сайта CNET.com, декабрь 2021 г.

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

Это означает, что многие посетители могут даже не заметить эти кнопки.

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

Кроме того, когда кто-то выбирает небольшое количество текста, его можно твитнуть.

Скриншот с сайта TowardsDataScience.com, декабрь 2021 г.

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

Как видите, есть несколько способов внедрить кнопки социальных сетей в ваш контент.

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

Официальные кнопки социальных сетей 

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

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

Скриншот с сайта Twitter.com, декабрь 2021 г.

Meta for Developers предлагает конфигуратор кнопки «Поделиться» в Facebook.

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

Скриншот с Facebook.com, декабрь 2021 г.

Pinterest предлагает конструктор виджетов, аналогичный Twitter и Facebook, поэтому владельцы веб-сайтов могут создавать кнопки «Закрепить» и «Сохранить» для контента своего веб-сайта.

Скриншот с сайта Pinterest.com, декабрь 2021 г.

Плагины и приложения для обмена в социальных сетях

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

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

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

Большинство работает на нескольких платформах, помимо WordPress.

1. ShareThis

ShareThis — это бесплатный сервис, который позволяет вам добавлять кнопки социальных сетей на ваш сайт WordPress или Shopify.

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

2. AddThis

AddThis — еще одна социальная служба обмена, позволяющая добавлять кнопки на веб-сайты на нескольких популярных платформах, включая WordPress, Shopify, Tumblr и Blogger.

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

3. AddToAny

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

4. Shareaholic

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

5. ElfSight

ElfSight — это премиальный плагин кнопок социальных сетей, который предлагает отзывчивые кнопки социальных сетей с настраиваемыми дизайнами и макетами.

Он работает на большинстве платформ веб-сайтов, включая WordPress, Shopify, Wix, Weebly и многие другие.

Заключение

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

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

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

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