Социальные кнопки на сайт: Social media buttons for your website

Установить кнопки социальных сетей на сайт

Содержание:

Добавить кнопки социальных сетей на сайт – быстро и легко!

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

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

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

Устанавливаем кнопки «Нравится» от социальных сетей

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

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

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

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

a) Вконтакте предлагает для установки кнопки для «лайков» посетить раздел для разработчиков (developers) и сгенерировать виджет кнопки социальной сети путем указания адреса веб-сайта, выбора ее вида, размера и названия:

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

 

c) «Мой мир» не настолько популярен, как предыдущие, и соц. сигналы из него не так важны, но установить его кнопку все же будет нелишним.

 

d) Как и во всех предыдущих вариантах кнопка «+1» (аналог «Нравится» в Google+) настраивается буквально в несколько кликов:

Кнопки «Поделиться в социальных сетях» установить тоже несложно

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

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

a) Во Вконтакте существует возможность получения не только виджета кнопки социальной сети в виде скрипта, но и прямой ссылки для размещения на веб-сайте без поддержки JavaScript. При этом обратите внимание, чтобы эти ссылки открывались не в том же окне, тем самым уводя ценных посетителей с веб-ресурса, а в новом. Для этого в их составе должен быть атрибут: target=»_blank».

 

b) В соответствующем разделе «facebook for developers» нужно выполнить минимальное количество настроек и нажать «Получить код»:

 

c) В Google+ кнопка «+1» выполняет двойную функцию «like + repost». Как ее установить смотрите выше (пункт d из предыдущего подраздела).

d) Чтобы разместить под статьей кнопку Twitter, нажатие на которую приведет к выкладке с аккаунта посетителя твита со ссылкой на нее, нужно перейти по адресу на скриншоте, выбрать требуемый тип кнопки и скопировать код для вставки на веб-сайт.

 

e) В одном из своих сервисов Яндекс предлагает вариант получения кода для кнопок соц. сетей по принципу «одним махом»:

 

f) Аналогичные возможности предоставляются многими онлайн-сервисами. Например, UpToLike предлагает получать в виде общего кода не только кнопки «Поделиться в социальных сетях», но и «Лайки», а также «Подписаться».

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

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

На скриншотах ниже приведены настройки кнопок для:

1. Google+:

   
    

2. Вконтакте:

   
    

3. Facebook:

   
    

4. Twitter («Follow button» на скриншоте из пункта d в предыдущем подразделе).

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

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

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

Теперь у вас есть кнопки

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

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

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

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

Важность социальных кнопок

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

Другое дело – социальные кнопки. Обычно при клике по одной из них вы можете поделиться записью/ссылкой на своем аккаунте в соц. сети. Потом зайдете вечерком, и ссылка будет при вас. Я так однажды настолько забил себе стенку Вконтакте полезными статьями, что до сих пор их читаю).

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Варианты размещения в шаблонах

Вообще есть три основных варианта:

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

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

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

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

Как добавить на сайт кнопки соц. сетей: вариант для верстальщиков

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

Но решение есть! Это кнопки от GoodShare. Вот так прямо и введите в поиске, и вам наверняка выдаст их сайт. Скрипт от goodshare очень легкий и простой, устанавливается с пары кликов (можно подключить из очень быстрого CDN). Если вы верстальщик или хоть немного разбираетесь, я не буду вам объяснять, как устанавливаются скрипты, потому что вы в курсе.

Гораздо более важная информация – это непосредственно вывод кнопок. В том месте шаблона, где нужно вывести иконку, например, ВК, вставляем такой код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<div data-type=»vk»>
Поделиться Вк
<span data-counter=»vk»></span>
</div>

При этом span data-counter является необязательным элементом. Это счетчик, который будет показывать кол-во кликов по иконке. Чтобы он работал, у вас должна быть подключена jQuery. В большинстве случаев счетчик вам не нужен, поэтому этот кусок кода вам не нужен. Собственно, все остальные кода есть в документации:

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

Кстати, а как же эти самые кнопки стилизовать? Ну тут есть 2 выхода. Вы можете просто добавить каждой новый стилевой класс, а можно использовать селекторы атрибута. Вот так:

Этим селектором можно прописать стили для кнопки расшаривания записи в социальную сеть Вконтакте.

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

Другие способы

Ладно, если вам не нужно существенным образом менять внешний вид кнопок и вы готовы удовлетвориться тем оформлением, которое предоставляет сторонний сервис, то используйте один из следующий сайтов, где можно установить соц. кнопки: share42.com, pluso, блок “Поделиться” от Яндекса

Или любой подходящий плагин для вашего движка. Я уверен, таких расширений достаточно много. Просто вбейте в поиск по плагинам слова вроде “social” и “share” и сразу получите что-то такое.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Нужны ли кнопки «Поделиться» социальных сетей на сайте?

Время на прочтение: 4 мин.

Заканчивается 2018 год, а маркетологи до сих пор заставляют программистов пихать «поделиськи» на сайт. Разве до сих пор не понятно, что они бессмысленные и только отталкивают посетителей? Не будем многословными и проведем небольшое расследование в данном направлении и выявим необходимость убирать социальные кнопки.

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

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

Статистика проникновения социальных сетей в России. Более подробную статистку о социальных сетях вы можете посмотреть здесь.

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

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

Но на практике все оказалось не так лучезарно, как в теории.

Вред от социальных кнопок.

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

Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер, Юлия Федотова

Интернет-магазин компании Taloon.com из Финляндии, который продает сантехнику, электричество, садоводство и т.д. провел А\В – тестирование.

Цель компании была увеличить количество кликов (конверсий) на главной странице своего продукта (CTA) на страницах своих продуктов — Добавить в корзину. Вот как выглядела оригинальная версия:

Во второй версии убрали выделенные красным социальные иконки с сайта.

Претендент зафиксировал увеличение кликов CTA («Call-to-action», «Призыв к действию») на 11,9% по сравнению с оригиналом.

Но как такое произошло? Раньше добавление соц.сетей только повышало конверсию. Есть тесты компании AMD, по внедрению социальных иконок, при котором появился рост социальной активность пользователей на 23%.

Что работает против кнопок социального обмена?

1) Отрицательное социальное доказательство.

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

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

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

«Социальное доказательство не всегда является лучшим доказательством — вы могли бы подумать, что социальное доказательство помогает повысить коэффициент конверсии, но это не всегда так, — говорит основатель QuickSprout Нил Пател в этом популярном сообщении о конверсиях.

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

2) Отвлечение от основной цели

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

В то время как Taloon.com использовал видный CTA на своих страницах продукта — добавьте в корзину — кнопки социального обмена действовали как отвлечение.

«Возможно, эти кнопки для обмена были просто лишними помехами и отвлечением на очень хорошем месте», — сказал Яни Ууси-Панти.

Мнения экспертов по социальным кнопкам.

Главный редактор ресурса Information Architects Оливер Райхенстайн (Oliver Reichenstein) написал по поводу шэринговых кнопочек разгромную статью. В ней, в частности, есть такое утверждение:

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

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

Когда Smashing Magazine убрал социальные кнопки с сайта, трафик из социальной сети Facebook возрос. Эксперты объяснили это тем, что пользователи вместо лайков и репостов копировали ссылки и делились ими в личных аккаунтах социальных сетей.

Польза от социальных кнопок

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

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

Советы при использовании социальных кнопок «Поделиться»

• Чаще всего люди делятся в социальных сетях на развлекательные статьи, видео и смешные картинки. Если ваш сайт имеет развлекательную тематику, то мы советуем добавить социальные сети в видимом месте (на изображении, под статьей, на видео).
• Социальные кнопки работают только там, где они уместны. Под статей, картинками, видео. Понятное дело, что на странице контакты мало кто будет нажимать на социальные иконки. Вы не должны забывать, что отрицательное социальное доказательство работает против вашего сайта.
• Количество социальных сетей тоже важно.  Нет смысла располагать все социальные сети для «шаринга». Это сбивает с толку. Чем больше у человека выбора, тем больше он сомневается. Выше мы приводили пример популярных социальных сетей в России. Достаточно использовать первые 4-5. Кроме того надо знать свою целевую аудиторию, тогда будет проще определиться с выбором социальных иконок.
• Так же важно знать где располагать на странице социальные иконки. Нет смысла вставлять их в начало статьи, ведь посетитель еще не знает интересная эта статья или нет. А прочитав до конца он забудет, что иконки в начале. Самое удачное расположение социальных иконок «Поделиться» в конце статьи.

А как вы считаете, нужны ли кнопки социальных сетей на сайте?Poll Options are limited because JavaScript is disabled in your browser.

• Нет, не нужны 76%, 56 голосов

  56 голосов 76%

  56 голосов — 76% из всех голосов

• Да, нужны 24%, 18 голосов

  18 голосов 24%

  18 голосов — 24% из всех голосов

Всего голосов: 74

09.10.2018

×

Вы или с вашего IP уже голосовали.

Настройка соц. кнопок | База знаний Creatium

Чтобы добавить ссылки на свои страницы в социальных сетях можно использовать виджет «Кнопка-картинка» указав в нем ссылку и загрузив картинку.  

Например, мы хотим добавить ссылки на социальные сети Facebook, Instagram, ВКонтакте. Данные кнопки мы разместим в меню сайта вместо email-адреса. Всего для этого есть два варианта действий.

Вариант 1

1. Для создания меню сайта используйте инструкцию «Сделать меню с нуля или воспользоваться готовыми вариантами».

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

3. Загрузим в кнопки картинки и немного изменим параметры отображения кнопок.

4. Укажем в настройках кнопок ссылки на соц. сети. Для этого откроем настойки в гаечном ключе и на вкладке «Действие» выберем действие «Открыть страницу в новой вкладке», а ниже добавим ссылку на соц. сеть.

Вариант 2

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

2. Удалим социальную сеть «Twitter» из виджета, вместо него добавим Instagram, укажем ссылки на соц. сети, поменял кнопки местами и укажем выравнивание с правой стороны.

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

Чтобы в записи на стене социальной сети отображался свой заголовок, описание и картинка, нужно ввести эти данные в настройках страницы, на вкладке «Социальные сети».

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

В интернете есть различные сервисы для создания кнопок «Поделиться». Парой из них мы и воспользуемся. Этот вариант более сложный, так как здесь требуется базовое понимание работы CSS, HTML и JavaScript. 

Кнопки «Поделиться» из сервиса pluso.ru

1. Выберем кнопки, который нам нужны, на Facebook, Вконтакте и Google+, прочие кнопки удалим.

2. Ниже можно подобрать параметры отображения кнопок.

3. Ещё ниже есть поля для ввода заголовка и краткого описания страницы. Эти поля мы не будем заполнять, так как эти данные уже введены в настройках страницы, раздел «Социальные сети».

4. После настройки нужно скопировать сгенерированный код кнопок и вставить его в виджет «Вставка HTML кода», а затем опубликовать страницу или выполнить предпросмотр для просмотра результатов отображения.

5. Кнопки «Поделиться» от сервиса pluso.ru отображаются по левой стороне. Выровнять их можно добавив соответствующее CSS свойство, но если обойтись более простым вариантом, то задать определенное расположение элементу можно используя виджет «Колонки».

Кнопки «Поделиться» из сервиса usocial.pro

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

2. В личном кабинете нажмем на кнопку «Создать набор», выберем «Кнопки «Поделиться»» и настроим параметры отображения кнопок.

3. Полученный на сервисе код добавляем в виджет «Вставка HTML кода» и выполняем предпросмотр или публикацию для просмотра результата отображения.

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

Самые «чистые» социальные кнопки для сайта — Staurus.net

Если вы боитесь, что за вами наблюдают в интернете — выключите компьютер.

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

Ни для кого не секрет, что почти все сервисы соц.кнопок сливают инфу о ваших пользователях куда понадобится. О Боже! Не может быть! Я только что про это узнал! — Поздравляю! Им же нужно как-то пользоваться вами, за их труд и за старания. Они сделали хорошие сервисы, с большим функционалом, удобством и «качеством». Вам стоит только выбрать что нужно, и поставить код куда надо. И все. А какая им выгода задаром делать такие маневрирования в интернете? Правильно. Никакой. Вот и время от времени каждая такая контора и палится на сливе данных в какую-нибудь DMP.

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

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

• share.pluso.ru
• uptolike.ru
• tech.yandex.ru/share
• share42.com
• sharethis.com
• pip.qip.ru
• www.addtoany.com
• www.po.st
• www.addthis.com
• sharebuttons.com

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

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

Пример установки этого кода не для тех, кто не знает азы HTML или CSS, но если у вас есть руки и немного времени, у вас все получится, если будете идти строго по инструкции. И так поехали:

Выглядят они так:

По стандарту настроены шесть социальных сетей: Facebook, ВКонтакте, Одноклассники, Мой Мир, Google Plus, Twitter. В настройках скрипта их больше 30, но это все устанавливается отдельно по желанию. Плюсы этих кнопок, как заявляют авторы, с чем я полностью согласен:

1. Отличное отображение на любом устройстве (Да, они адаптивные под любой размер экрана)
2. Чистый код — быстрый и безопасный сайт (загружается только скрипт, CSS и Шрифт, которые лежат только у вас на сервере)
3. Все share-технологии мобильных мессанджеров в одном скрипте (Telegram`ы всякие,)
4. SEO friendly — без ссылок
5. Не содержит картинок

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

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

По поводу картинок: их тут нет. Иконки которые вы видите взяты из шрифта, это просто символ и не более.

Скачать архив кнопок вы можете по этой ссылке.

Установка этих кнопок очень проста. В архиве есть всего четыре файла: Шрифт, CSS, JS, и TXT.

1). Шрифт вам нужно загрузить в любую папку на вашем сервере, можете закинуть ее туда-же, где лежат ваши JS или CSS.

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

<script type="text/javascript" src="ПУТЬ К ФАЙЛУ/share.js"></script>
или загрузка напрямую:

<script src="https://cdn.jsdelivr.net/jquery.goodshare.js/4/goodshare.min.js"></script>

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

ВАЖНО: (для тех, кто убрал часть код Jquery) скрипт кнопок должен загружаться после скрипта Jquery.

3). После установки JS и шрифта, вам следует добавить CSS себе на сайт. Просто скопируйте все содержимое файла soc.css в один из ваших подключаемых CSS на сайте.

ВАЖНО: В 82 строке файла soc.css поменяйте URL на свое местоположение Шрифта!

4). После всего этого, скопируйте HTML код из файла HTML.TXT к себе на сайт, где вы хотите видеть эти замечательные кнопки.

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

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

Спасибо за внимание, если будут вопросы по установке, пиши комментарии.

С вами был, ленивый Staurus.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03.05.2021 12:05

Продвижение сайтов. Социальные кнопки для сайта

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

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

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

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

Однако повышение лояльности посетителей — далеко не единственная функция социальных кнопок на сайте. С помощью таких кнопок мероприятия по раскрутке и продвижению сайта в поисковых системах и социальных сервисах можно проводить эффективнее.

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

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

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

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

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

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

Если сайт построен на базе одной из популярных CMS (систем управления контентом), то добавление социальных кнопок на сайт может осуществляться при помощи специальных плагинов. В частности, добавить социальную кнопку «Мне нравится» от Facebook для сайта на CMS WordPress позволяют такие плагины как WP FB Like, WordPress Facebook Like Button Plugin Facebook Like Button и другие.

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

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

Теги:

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

Где на вашем сайте расположены кнопки социальных сетей? —

11 июня Где на вашем сайте расположены кнопки социальных сетей?

Отправлено в 10:00
в без категории
от Social Spice Media

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

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

Начало страницы

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

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

Боковая балка

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

Внизу страницы

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

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

Отдельные статьи и изображения

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

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

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

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

Какие кнопки социальных сетей вам нужны?

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

6 способов интегрировать кнопки социальных сетей в ваш сайт

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

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

Вставить значки социальных сетей как изображения

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

Я рекомендую значок страницы.com, например.

Здесь вы можете просто ввести имя нужного значка (например, «instagram»), и вы получите список бесплатно загружаемых файлов изображений в очень хорошем качестве.

Список других хороших поставщиков иконок или наборов иконок можно найти на buffer.com.

Теперь я покажу вам, как встроить иконку в ваш сайт. Мы предполагаем, что значок с именем «instagram.png» находится в той же папке, что и ваш HTML-файл.

Затем вы можете использовать следующий фрагмент кода:

Тег a используется, чтобы сделать значок ссылкой. Конечно, вы должны заменить адрес, показанный выше, на адрес вашего профиля в Instagram. Установив свойство target = "_ blank" , вы убедитесь, что профиль открывается в новой вкладке браузера.

Если значок расположен во вложенной папке относительно файла HTML (например, «значки»), путь изображения должен быть соответствующим образом скорректирован:

Конечно, вы можете изменить размер значков в соответствии со своими потребностями. Я рекомендую вам определить класс CSS для всех значков, принадлежащих к общей группе, например "sm_icon" :

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

 .sm_icon {
 
  ширина: 50 пикселей;
  / * высота регулируется автоматически * /
} 

Выбор формата изображения: PNG или SVG?

Вы заметите, что файлы изображений доступны в различных форматах файлов, таких как JPG, GIF, PNG или SVG.Типы файлов имеют разные характеристики и, следовательно, определенные преимущества и недостатки использования на веб-сайтах.

Мы разделяем их на растровые форматы (JPG, GIF, PNG) и векторный формат SVG. Форматы на основе растра имеют фиксированное разрешение с определенной высотой и шириной в пикселях.

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

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

Это может произойти, например, если вы загрузите значок с разрешением 64x64px из Iconfinder, а затем определите ширину 200 пикселей в настройках CSS.

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

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

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

Встраивание значков социальных сетей в виде шрифта

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

Я объясню процедуру на примере библиотеки «Font Awesome»:

Создайте бесплатную учетную запись пользователя на https://fontawesome.com/ (теперь это требование для импорта бесплатных или платных значков).

• В вашем аккаунте теперь вы найдете раздел «Комплекты». Ваш новый комплект имеет идентификатор, состоящий из нескольких цифр и букв. После нажатия на комплект вам будет представлен код сценария, который необходимо вставить между тегами заголовка вашей HTML-страницы для импорта библиотеки.

В следующем примере я замаскировал идентификатор с помощью x-символов:

• Затем вы можете искать значки, например «Инстаграм». Для каждого значка вы найдете инструкции о том, как включить его в HTML-код. Я выбрал значок с названием «instagram-square», который включен, как показано ниже.

• Вы можете стилизовать свой значок с помощью CSS, например, используя другой размер или цвет шрифта:

 .fa-instagram-square {
    цвет: зеленый;
    размер шрифта: 18 пикселей;
} 

Обратите внимание, что ссылка на скрипт font awesome устанавливает соединение с внешним сервером. Это может включать передачу личных данных посетителей вашего сайта в Font Awesome.

В зависимости от того, какие правовые нормы применяются (например,грамм. gdpr), возможно, вам придется проинформировать своих пользователей об этой услуге. Или вы можете перестраховаться и разместить библиотеку самостоятельно. Информацию об этом можно найти здесь: Хостинг Font Awesome Yourself

В качестве альтернативы Font Awesome я могу порекомендовать значки материалов от Google. Интеграция иконок здесь очень похожа на Font Awesome.

Интегрируйте кнопки социальных сетей (лайкайте, делитесь) вручную для разных платформ

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

• На странице Facebook для разработчиков вы можете сгенерировать HTML-код для различных кнопок Facebook.
• На странице Twitter для веб-сайтов вы найдете инструкции по встраиванию кнопок Tweet, кнопок Follow или для встраивания Tweets.
• Другие сети, такие как Instagram, Pinterest, LinkedIn, также предлагают вам возможность встраивать кнопки или виджеты на ваш сайт.

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

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

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

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

Пример этого — sharethis. После бесплатной регистрации вы можете создать панель кнопок, содержащую до 43 кнопок социальных сетей!

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

Этот сценарий, конечно же, установит соединение с сервером sharethis. Вы должны сообщить об этом посетителям вашего сайта в своей политике конфиденциальности. Вы также можете перенаправить их на https://sharethis.com/privacy/.

Здесь вы найдете информацию о том, какие пользовательские данные собираются sharethis. Обратите внимание, что на этой странице есть кнопка «Отказаться», которую можно использовать для предотвращения показа рекламы, связанной с пользователями, на основе данных, собранных sharethis.

Важно: вы также должны проинформировать своих пользователей о политиках конфиденциальности отдельных платформ, таких как Facebook, Twitter и т. Д., потому что sharethis передает данные пользователей на соответствующие платформы.

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

В отношении защиты данных применяются те же рекомендации, что и для sharethis. Информация о сборе и использовании пользовательских данных представлена ​​на https://www.addtoany.com/privacy.

Конечно, существует гораздо больше провайдеров, таких как addthis.

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

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

wpbeginner: 10 лучших плагинов социальных сетей для WordPress (2020)

Кроме того, поставщики sharethis и addtoany также предлагают свои услуги в виде плагина WordPress.

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

Заключение

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

Ваш интерфейс загружает процессор ваших пользователей?

По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket.https://logrocket.com/signup/

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

Модернизируйте отладку веб-приложений — начните мониторинг бесплатно.

Действительно ли люди используют кнопки социальных сетей? : efelle creative, Сиэтл, WA

Вы видите значки социальных сетей на сайтах по всему Интернету, но действительно ли люди их используют?

В своем блоге Майк Хейворд из Copacino + Fujikado определил шесть самых опасных слов в рекламе.Это шесть слов, которые мы все слышали — от клиентов, от нашей команды или, может быть, в наших головах, — и это шесть слов, которые часто определяют то, как мы разрабатываем наши стратегии контент-маркетинга:

«И тогда они поделятся этим».

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

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

Статистика кнопок социального обмена

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

Эти кнопки кажутся отличной идеей — в конце концов, они позволяют легко делиться вашим контентом! — однако пользователи почти никогда ими не пользуются. Действительно! Отчет Moovweb показал следующее, согласно AdWeek:

• Moovweb изучил 61 миллион мобильных сеансов и обнаружил, что 99.8 процентов мобильных пользователей никогда не нажимают кнопки социальных сетей. Фактически, мобильные пользователи в 11,5 раз чаще нажимают на рекламу, чем на кнопки социальных сетей.

По данным Moovweb, пользователи настольных компьютеров

• чаще нажимают на кнопки социальных сетей (примерно на 35% чаще), но они по-прежнему предпочитают делиться ссылками по-своему, а не использовать эти кнопки.

В чем дело?

Почему кнопки социальных сетей тянутся

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

Раньше кнопки социальных сетей были непредсказуемыми; вы можете нажать кнопку «Твитнуть это» только для того, чтобы увидеть, что автоматически созданный твит со странной разметкой HTML или обрезанным текстом был отправлен всем вашим подписчикам.

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

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

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

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

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

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

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

Пример выделения текста в статье Medium.

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

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

Пик интереса к Pinterest

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

• Одежда
• Ящики для подписки
• Мебель и декор
• Мастерские / сайты перепродажи (например, Etsy)
• Еда и напитки
• Здоровье и фитнес

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

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

Готовы создать кнопки обмена в социальных сетях, которые действительно работают?

efelle creative — маркетинговое агентство из Сиэтла, специализирующееся на дизайне и разработке веб-сайтов, поисковой оптимизации и других услугах онлайн-маркетинга.С 2005 года efelle creative работала с сотнями компаний, чтобы помочь им оптимизировать свою стратегию цифрового маркетинга.
Заполните форму ниже, и один из наших цифровых стратегов скоро свяжется с вами!

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

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

Если да, то вы не одиноки.

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

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

Загрузите сейчас

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

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

Получите прямо сейчас!

Зачем беспокоиться о кнопках социальных сетей?

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

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

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

Так много

Вариантов , так много Мнения

К настоящему времени вы, наверное, догадались, что на эту тему ведется много разговоров. Быстрый поиск в Google показывает это обсуждение на Stack Exchange, в котором рассматривается, следует ли размещать кнопки социальных сетей в начале или в конце сообщения в блоге. Несмотря на все дискуссии, существует мало доказательств, подтверждающих эти идеи. Даже этот разговор на Moz.com не дает убедительных доказательств по этому поводу.

Похоже, мы просто догадываемся. Разве мы не можем сделать лучше, чем это?

Чтобы начать копать, я рассмотрел некоторые из наиболее распространенных вариантов. Я начал с вопроса: «Где некоторые из крупнейших веб-сайтов размещают свои кнопки социальных сетей?»

Ответ?

Везде!

Популярные варианты размещения кнопок социальных сетей:

Начало сообщения — Делятся ли пользователи до того, как прочитают статью? Это один из наиболее распространенных вариантов размещения, часто используемых такими сайтами, как TechCrunch и Mashable.

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

Справа от поста — Этот меня удивил, но он там есть. Social Media Examiner — хороший пример сайта с таким местом размещения.

Нижняя часть сообщения — Размещение кнопок социальных сетей внизу сообщения было очень распространенным явлением, и это единственное место, где вы найдете кнопки социальных сетей в блоге Сета Година.Он упускает возможные акции из-за этого размещения?

Встроенный в сообщение — Растущая тенденция состоит в том, чтобы фактически размещать совместно используемый контент вместе с остальным вашим контентом. Мы регулярно делаем это в нашем блоге, используя плагин Click To Tweet.

Никаких социальных кнопок — Это удивительная и растущая тенденция, о которой заявляют такие сайты, как блог Signal v. Noise от Basecamp. Уменьшают ли они свои шансы на вирусный успех? Мы рассмотрим это через минуту, но пока это игровое поле.

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

Точка данных №1: известность имеет большее значение, чем размещение

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

• Выберите видное место: Чем более заметна кнопка, тем больше людей добавят в закладки и поделятся вашим контентом, что приведет к увеличению посещаемости вашего сайта.
• Держите кнопку в верхней части страницы: Не заставляйте читателей прокручивать страницу, чтобы найти вашу кнопку общего доступа. Это нормально, если кнопка будет вверху и внизу страницы, но пользователям будет проще наверху.
• Поместите кнопку в непосредственной близости от общего содержимого: Это поможет читателям понять, чем они делятся.
• Следите за навигацией: Будьте осторожны, не размещайте кнопку слишком близко к навигации, чтобы пользователи не могли случайно с ней взаимодействовать.

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

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

Точка данных №2: пользователи больше всего взаимодействуют с верхней левой стороной

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

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

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

Точка данных № 3: Слишком много социальных кнопок ухудшат ситуацию

Дуг Антковяк очень много говорит о кнопках социальных сетей в блоге Search Engine Journal.Он указывает, что слишком много кнопок социальных сетей могут отрицательно повлиять на скорость вашего сайта. Это большой красный флаг, поскольку скорость сайта явно связана с лучшей читательской аудиторией и производительностью SEO.

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

Данные здесь продолжаются:

После опроса 50 самых популярных веб-сайтов в мире Webaholic.co.in обнаружил, что Facebook и Twitter были наиболее часто используемыми кнопками социальных сетей в Интернете, при этом Linkedin и Google+ также показали хорошие результаты. Они пришли к выводу, что полезность каждой из этих сетей довольно сильно колебалась в зависимости от типа аудитории для каждого сайта.

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

По их данным, подавляющее большинство социальных сетей происходит в двух самых популярных социальных сетях (Twitter и Facebook).

Очевидно, что нам не нужно включать все сети, чтобы эффективно использовать кнопки социальных сетей. В этом отчете TrackMaven показывает, что 38,6% репостов в социальных сетях приходилось на Twitter. Еще 60,3% пришлось на «лайки» и «акции» в Facebook.

Точка данных № 4: Неиспользуемые кнопки социальных сетей обеспечивают отрицательное социальное доказательство

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

«Социальное доказательство — это ярлык в мыслительном процессе. Нам не нужно думать. Остальные уже сделали (мы предполагаем) ».

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

Отрицательное социальное доказательство снижает ценность кнопки социального обмена.

Теперь в классическом A / B тесте Taloon.com (финский магазин оборудования для электронной коммерции) обнаружил, что кнопки социальных сетей на самом деле снижают их коэффициент конверсии.

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

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

Точка данных № 5: кнопки социального обмена могут приносить трафик

В одном из наиболее полных (но не научных) исследований ценности кнопок совместного использования в социальных сетях блогер Джошуа Бентон приходит к выводу, что многие новостные организации получают 20% своего трафика Twitter с помощью кнопок твитов, доступных на их страницах. Это действительно большое дело!

Например, 16.3 процента твитов на New York Times в его тестах на самом деле пришли с кнопки Twitter в социальных сетях на самом сайте. Для Wall Street Journal, процентная ставка была больше примерно 20,2 процента. Неплохо, а? В конце концов, кнопки социальных сетей могут помочь трафику.

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

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

Пункт данных № 6: Негативное отношение к кнопкам совместного использования в социальных сетях набирает обороты, но почему?

Несмотря на результаты New York Times и The Wall Street Journal , не все публикации добились такого же успеха.

Блог

UK Inside GOV.UK сообщил о незначительном увеличении доли на 0,2% после добавления кнопок социальных сетей на их сайт. Хотя размещение кнопок внизу страницы не могло помочь, их результаты согласуются с выводами, сделанными Люком Вроблевски, который считал, что только 0,25% твитов фактически связаны с кнопкой социальных сетей после анализа более 18 миллионов просмотры страниц.

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

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

• Буферные расширения Chrome
• Другие расширения для социальных сетей
• Feedly, FlipBook и другие программы для чтения RSS / контента
• Мобильные браузеры
• Карман
• И больше, чем мы можем перечислить

Заключение: где лучше всего разместить кнопки социальных сетей в моем блоге?

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

Реальность такова, что это просто зависит от вашего блога и типа аудитории. Но, будучи авантюристом, я думаю, что мы можем легко ответить на этот вопрос (по крайней мере, чтобы выяснить, что правда в большинстве случаев). И победитель …

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

• Кнопки социальных сетей работают , , и вы, вероятно, захотите их использовать. (См. Точку данных №5)
• Отличный контент по-прежнему является ключом к социальному обмену. Большинство пользователей БУДУТ найти способ поделиться вашим контентом , если они захотят. (См. Точку данных №6)
• Если вы собираетесь использовать кнопок обмена в социальных сетях, , , верхняя / левая часть страницы, кажется, подходят лучше всего. (см. Данные № 1 и № 2)
• Вам определенно следует ограничить сетей, которые вы включаете при использовании кнопок социальных сетей. (см. Точку данных № 3)
• Facebook и Twitter предоставят наибольшее количество репостов, , но примите это решение, исходя из вашей индивидуальной аудитории. Например, у Google+ есть хорошие возможности для многих блогов. (См. Точку данных № 3)
• Социальное доказательство может быть серьезной угрозой . Если ваш блог получил репостов, вы можете принести на больше вреда, чем пользы с помощью кнопки соцсетей. Рассмотрим виджет общего доступа , который учитывает социальное доказательство , как этот. (см. Точку данных №4)

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

25 января 2016 г.

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

• Кнопки «Поделиться» позволяют пользователям делиться вашим контентом с друзьями и подписчиками
• Кнопки «Нравится» позволяют им виртуально поднимать большой палец вверх к вашему контенту
• Кнопки Follow подпишут их на ваши обновления в указанной социальной сети

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

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

Facebook предлагает несколько кнопок социальных сетей: поделиться, подписаться, поставить лайк, сохранить и отправить.

Кнопка Поделиться в Facebook

Как это работает

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

Как добавить кнопку Поделиться в Facebook

Используйте конфигуратор кнопки «Поделиться» Facebook, чтобы создать код кнопки «Поделиться», который можно вставить в HTML-код своего веб-сайта.

Параметры кнопки «Поделиться» в Facebook

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

Кнопка подписки на Facebook

Как это работает

Кнопка «Follow» позволяет пользователям подписываться на публичные обновления с соответствующей страницы Facebook.

Как добавить кнопку подписки на Facebook

Используйте интерфейс кнопки «Follow» на Facebook, чтобы создать код, который можно скопировать и вставить в свой HTML.

Параметры кнопки подписки на Facebook

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

Facebook Кнопка «Мне нравится»

Как это работает

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

Как добавить кнопку «Нравится» в Facebook

Перейдите в конфигуратор кнопки «Нравится» в Facebook, чтобы создать код, который нужно скопировать и вставить в свой HTML.

Параметры кнопки «Нравится» в Facebook

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

Еще одна интересная опция заключается в том, что вы можете выбрать для кнопки «Рекомендовать» вместо «Нравится».”

Кнопка «Сохранить в Facebook»

Как это работает

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

Как добавить кнопку «Сохранить в Facebook»

Используйте конфигуратор кнопки «Сохранить» Facebook, чтобы создать код для вставки в HTML.

Кнопка отправки в Facebook

Как это работает

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

Как добавить кнопку отправки в Facebook

Как вы уже догадались — у Facebook есть конфигуратор кнопки отправки, который предоставляет вам код, который нужно вставить в ваш HTML.

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

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

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

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

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

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

Как встроить пост в Instagram с кнопкой подписки

1. Перейдите к конкретному сообщению, которое вы хотите встроить, или перейдите в свой профиль Instagram и прокрутите назад, чтобы найти соответствующий вариант.
2. Нажмите на сообщение
3. Нажмите кнопку «Дополнительно» (… ) в правом нижнем углу.
4. Выбрать Встроить
5. Выберите, хотите ли вы включить заголовок, а затем нажмите Копировать код для вставки
6. Разместите код в своем HTML

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

LinkedIn предлагает настраиваемый код JavaScript для кнопок «Поделиться» и «Подписаться».

Кнопка публикации в LinkedIn

Как это работает

Кнопка «Поделиться» в LinkedIn сочетает в себе функции кнопок «Поделиться» и «Отправить» в Facebook. Он позволяет пользователям делиться вашим контентом в LinkedIn несколькими способами — в своем общедоступном профиле, со своими контактами, в группе или в сообщении одному или нескольким лицам. При нажатии на кнопку открывается всплывающее окно, в котором можно добавить личное сообщение к публикации, а также параметры обмена.

Как добавить кнопку публикации в LinkedIn

Перейдите к генератору подключаемых модулей LinkedIn share, чтобы создать код JavaScript, который можно вставить в свой HTML.

Параметры кнопки «Поделиться» в LinkedIn

Вы можете выбрать, следует ли показывать, сколько раз вашим контентом уже поделились в LinkedIn.

Кнопка подписки на LinkedIn

Как это работает

Нажатие кнопки «Follow» в LinkedIn позволяет пользователям следить за вашей компанией в LinkedIn, не покидая вашего веб-сайта.

Как добавить кнопку подписки в LinkedIn

Используйте генератор подключаемых модулей компании LinkedIn для создания кода для вставки в свой HTML.

Параметры кнопки подписки в LinkedIn

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

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

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

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

В дополнение к стандартным кнопкам «Поделиться» и «Подписаться», Twitter предлагает кнопки для твита с определенным хэштегом или для @-упоминания кого-либо одним щелчком мыши. Также есть кнопка, с помощью которой можно отправить вам личное сообщение в Twitter.

Кнопка Поделиться в Twitter

Как это работает

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

Как добавить кнопку Поделиться в Twitter

1. Зайдите на publish.twitter.com, прокрутите вниз и нажмите Twitter Buttons
2. Нажмите Кнопка «Поделиться»
3. Над полем кода нажмите Установите параметры настройки
4. Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
5. Скопируйте и вставьте предоставленный код в свой HTML

Параметры кнопки «Поделиться» в Twitter

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

Кнопка подписки на Twitter

Как это работает

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

Как добавить кнопку подписки в Twitter

1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите кнопок Twitter
2. Нажмите Кнопка следования
3. Введите свой дескриптор Twitter, включая символ @ (например, @Hootsuite).
4. Нажмите Предварительный просмотр
5. Над полем кода нажмите Установите параметры настройки
6. Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
7. Скопируйте и вставьте предоставленный код в свой HTML

Параметры кнопки подписки в Twitter

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

Кнопка упоминания в Twitter

Как это работает

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

Как добавить кнопку упоминания в Twitter

1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите кнопок Twitter
2. Нажмите Кнопка упоминания
3. Введите свой дескриптор Twitter, включая символ @ (например, @Hootsuite).
4. Нажмите Предварительный просмотр
5. Над полем кода нажмите Установите параметры настройки
6. Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
7. Скопируйте и вставьте предоставленный код в свой HTML

Варианты кнопки упоминания в Twitter

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

Кнопка хэштега Twitter

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

Как добавить кнопку хэштега Twitter

1. Перейти к публикации.twitter.com, прокрутите вниз и нажмите кнопок Twitter
2. Нажмите Кнопка хештега
3. Введите выбранный вами хэштег, включая символ # (например, #HootChat).
4. Нажмите Предварительный просмотр
5. Над полем кода нажмите Установите параметры настройки
6. Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
7. Скопируйте и вставьте предоставленный код в свой HTML

Параметры кнопки хэштега Twitter

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

Кнопка сообщения Twitter

Как это работает

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

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

Как добавить кнопку сообщения Twitter

1. Войдите в свою учетную запись Twitter
2. В левом столбце щелкните Конфиденциальность и безопасность
3. Прокрутите вниз до раздела Личные сообщения и установите флажок рядом с Получать личные сообщения от любого человека
4. В левом столбце щелкните Ваши данные Twitter. Для доступа к этому экрану может потребоваться ввести пароль.
5. Выберите и скопируйте свой идентификатор пользователя, который отображается под вашим именем пользователя
6. Перейти к публикации.twitter.com, прокрутите вниз и нажмите кнопок Twitter
7. Нажмите Кнопка сообщения
8. Введите свое имя пользователя в верхнем поле, включая символ @ (например, @Hootsuite).
9. Вставьте свой идентификатор пользователя в нижнее поле
10. Нажмите Предварительный просмотр
11. Над полем кода нажмите Установите параметры настройки
12. Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
13. Скопируйте и вставьте предоставленный код в свой HTML

Параметры кнопки сообщения Twitter

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

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

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

Кнопка подписки на YouTube

Как это работает

Как и кнопка подписки в Twitter, кнопка подписки на YouTube требует двух щелчков мышью. Во-первых, когда кто-то нажимает на вашу кнопку подписки, ваш канал YouTube открывается в новом окне с окном подтверждения подписки.Затем пользователь должен снова нажать кнопку «Подписаться», чтобы подписка вступила в силу.

Как добавить кнопку подписки на YouTube

Используйте страницу настройки кнопки YouTube, чтобы создать код, который нужно вставить в свой HTML.

Параметры кнопки подписки на YouTube

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

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

Кнопка сохранения Pinterest

Как это работает

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

1. Image hover : вместо того, чтобы размещать отдельную кнопку Pinterest на вашем веб-сайте, этот параметр создает код, который вызывает кнопку «Закрепить», когда кто-то наводит курсор мыши на любое изображение на вашей странице. Этот вариант наиболее рекомендуется Pinterest.
2. Любое изображение : с помощью этого параметра вы размещаете кнопку Pinterest на своей веб-странице. Нажатие на нее дает пользователю возможность сохранить любое изображение с вашего сайта на своих досках Pinterest.
3. Одно изображение : в этом случае кнопка сохранения применяется только к одному изображению на вашей странице. Это самый сложный вариант с точки зрения кодирования.

Как добавить кнопку сохранения в Pinterest — наведение курсора или любой стиль изображения

1. Перейдите в конструктор виджетов Pinterest и нажмите Кнопка «Сохранить»
2. Выберите, какой тип кнопки вы хотите использовать: изображение при наведении курсора или любое изображение.
3. Выберите желаемые параметры размера и формы кнопки
4. Наведите указатель мыши на образец изображения для предварительного просмотра кнопки
5. Скопируйте код кнопки и вставьте его в свой HTML
6. Для любого варианта изображения скопируйте и вставьте pinit.js из нижней части страницы конструктора виджетов в HTML, прямо над тегом

Как добавить кнопку сохранения в Pinterest — один стиль изображения

1. Перейдите в конструктор виджетов Pinterest и нажмите Кнопка «Сохранить»
2. Выберите желаемые параметры размера и формы кнопки
3. В новом окне браузера перейдите на страницу вашего веб-сайта, где отображается изображение, с которым вы хотите работать.
4. Скопируйте и вставьте URL этой веб-страницы в поле URL в конструкторе виджетов
5. На своей веб-странице щелкните правой кнопкой мыши изображение, с которым хотите работать, и выберите Копировать URL-адрес изображения
6. Вставьте URL-адрес изображения в поле Изображение в конструкторе виджетов
7. Введите описание изображения в поле Описание в конструкторе виджетов.Он появится под вашим изображением, когда кто-то сохранит его в Pinterest

.

8. Нажмите кнопку образца Pin It в конструкторе виджетов, чтобы протестировать кнопку
9. Скопируйте код кнопки и вставьте его в свой HTML
10. Скопируйте и вставьте скрипт pinit.js из нижней части страницы конструктора виджетов в свой HTML, прямо над тегом

Pinterest параметры кнопки сохранения

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

Кнопка подписки на Pinterest

Hootsuite

Как это работает

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

Как добавить кнопку подписки на Pinterest

1. Перейдите в конструктор виджетов Pinterest и нажмите Подписаться
2. Введите URL своего профиля Pinterest
3. Введите название вашей компании в том виде, в котором вы хотите, чтобы оно отображалось на кнопке
4. Скопируйте код кнопки и вставьте его в свой HTML
5. Скопируйте и вставьте пинит.js из нижней части страницы конструктора виджетов в HTML, прямо над тегом

Pinterest параметры кнопки подписки

Единственный вариант с кнопкой «подписаться на Pinterest» — это отображение названия вашей компании. Вы можете использовать свое имя пользователя Pinterest или полное название компании. В любом случае, придерживайтесь чего-то простого для понимания пользователями.

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

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

Кнопка обмена Hootsuite

Как это работает

Когда пользователь нажимает кнопку Hootsuite на вашем веб-сайте, открывается окно с интерфейсом, содержащим ссылку на ваш контент. Пользователь может выбрать, в каких социальных сетях поделиться им: Twitter, Facebook, LinkedIn, Google+ или все вышеперечисленное. Они могут добавить личное сообщение перед тем, как поделиться, и решить, публиковать ли сразу, запланировать публикацию на определенное время в будущем или использовать функцию автоматического планирования Hootsuite.

Как добавить кнопку общего доступа Hootsuite

Перейдите на hootsuite.com/social-share, введите свой URL, скопируйте и вставьте код в свой HTML.

Опции кнопки общего доступа Hootsuite

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

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

Начало работы

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

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

Что социальные сети могут сделать для вашего сайта?

1. Привлекает целевых клиентов, потому что контентом делятся сами целевые клиенты
2. Повышает ваш SEO за счет увеличения социальных сигналов
3. Позволяет взаимодействовать с клиентами
4. Создает прочные отношения с клиентами

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

Есть несколько способов добавить кнопки социальных сетей.Решение действительно будет зависеть от того, как построен ваш сайт и на какой платформе он построен. Давайте рассмотрим несколько способов.

Как это работает

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

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

Не беспокойтесь, есть много разных способов сделать это!

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

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

Шаги по установке плагина:

1. Перейдите в область администратора WordPress , затем Плагины »Добавить новый.
2. Вы увидите строку поиска в правом верхнем углу страницы, щелкните ее и введите название плагина или функциональность , которую вы хотите.

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

Некоторые рекомендации по плагинам для WordPress:

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

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

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

Шаги для включения кнопок социальных сетей:

1. Доступ к странице единого сообщения .
2. Закройте диспетчер блогов и щелкните текст блога.
3. Щелкните значок Настройки
4. Прокрутите вниз до кнопок социальных сетей
5. Установите или снимите флажки рядом с кнопками социальных сетей, чтобы отобразить или скрыть их:
   • Facebook
   • Твиттер
   • LinkedIn
   • Pinterest
   • Google+
   • Нравится этот пост (добавляет значок сердца с вашим измененным текстом).

6. Щелкните поля кнопки социальных сетей, чтобы изменить текст в них.

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

Для получения дополнительных инструкций нажмите здесь

Вот несколько рекомендаций по плагинам для WIX:

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

Для пользователей Shopfiy вы можете выполнить один из следующих двух шагов:

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

Если вы создали свой собственный сайт с нуля

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

Вот некоторые из них, которые мы рекомендуем:

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

Удачного обмена!

Виджет социальных иконок — Поддержка — WordPress.com

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

Содержание

Доступные значки

Мы поддерживаем значки для различных сетей.

Щелкните здесь, чтобы развернуть список доступных значков.

500px

Амазонка

Яблоко

Bandcamp

Behance

CodePen

DeviantArt

Digg

Дриббл

Dropbox

Адреса электронной почты (если ваш адрес электронной почты [email protected], введите mailto: [email protected] в поле URL-адрес учетной записи )

Etsy

Facebook

Flickr

Foursquare

Goodreads

Google+

Google

GitHub

Instagram

iTunes

LinkedIn

Средний

Встреча

Pinterest

Карман

Равелри

Reddit

RSS-каналы

Skype

SlideShare

Snapchat

SoundCloud

Spotify

StumbleUpon

Tumblr

Twitch

Твиттер

Vimeo

ВК

WordPress

Yelp

YouTube

Ваша социальная сеть не отображается в списке доступных значков выше?

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

↑ Содержание ↑

Виджет социальных иконок

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

↑ Содержание ↑

Добавить виджет социальных иконок

1. Перейти на Мои сайты → Внешний вид → Настроить
2. Нажмите Виджеты , и вы увидите различные области виджетов, которые поддерживает ваша тема.Почти все темы будут иметь как минимум область виджетов нижнего колонтитула. У некоторых также есть виджеты боковой панели или другие области виджетов.
3. Щелкните по доступной области виджетов; в этом примере мы нажимаем на область виджетов «Нижний колонтитул».
4. Щелкните Добавить виджет и найдите Social или просмотрите доступные виджеты, чтобы найти виджет Social Icons .

Примечание. Если вы установили плагины, вы увидите (Jetpack) в конце заголовка виджета Social Icons.

5. Щелкните виджет, чтобы добавить его в область виджетов.
6. Настройте различные параметры отображения, включая заголовок виджета и размер значков.

7. Добавьте ссылку в свой первый профиль в социальной сети. Например, https://www.facebook.com/WordPresscom

Не забудьте добавить ссылку полностью, включая часть адреса сайта https: // .

8. Щелкните параметр Добавить значок , чтобы добавить в виджет дополнительные значки социальных сетей.

Нажмите кнопку «Добавить значок», чтобы добавить еще один значок социальной сети.

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

Если вы не видите соответствующий значок социальной сети, убедитесь, что вы ввели правильную ссылку на свою социальную сеть, включая часть адреса https: // .

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

Ваши новые блестящие значки социальных сетей теперь на вашем сайте!

↑ Содержание ↑

Изменение порядка значков

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

↑ Содержание ↑

Настройка значков социальных сетей

Если вы хотите изменить способ отображения значков, например положение, выравнивание или размер, вы можете использовать настраиваемый CSS, доступный в WordPress.com Премиум-план или выше. Цвет значков социальных сетей на вашем сайте зависит от темы, которую вы используете, но это также можно изменить с помощью CSS.

Добавить пользовательские значки социальных сетей

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

Шаг 1 .Найдите значки социальных сетей, которые вам нравятся, и загрузите их в свою медиатеку.

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

Загрузите значок в свою медиа-галерею

1. Перейти на мой сайт → Мультимедиа → Добавить новый
2. Перейдите в папку на вашем компьютере, где вы сохранили изображения, которые хотите использовать в качестве значков
3. Загрузите значки в свою мультимедийную галерею

Получите ссылку на значок социальной сети

1. Перейти на Мой сайт → Медиа .
2. Щелкните изображение загруженного значка социальной сети и щелкните Edit.
3. В разделе URL нажмите Копировать , чтобы сохранить ссылку в буфер обмена вашего компьютера.
4. Щелкните Готово , чтобы выйти из редактора мультимедиа.

Шаг 2 . Добавьте виджет «Текст» или виджет «Пользовательский HTML» и отформатируйте кнопки с помощью HTML.

Добавить пользовательский виджет социальных иконок

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

1. Перейдите в Мои сайты → Внешний вид → Настроить → Виджеты .
2. Выберите область виджетов, в которой вы хотите разместить значки.
3. Щелкните Добавить виджет и найдите текстовый виджет или пользовательский виджет HTML
4. Щелкните имя виджета, чтобы добавить виджет.

Добавить пользовательский виджет социальных иконок HTML

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

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

Шаг 3. Когда вы закончите, нажмите Publish и проверьте свои симпатичные новые кнопки социальных сетей!

↑ Содержание ↑

Примеры и образцы изображений

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

Чтобы сначала использовать эти значки в своем виджете, создайте пустой текстовый виджет из Внешний вид → Настройка → Виджеты.