Кнопки соцсетей для сайта: Кнопки поделиться для сайта | Добавить кнопки соцсетей на сайт

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

Содержание:

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

В последнее время оптимизация веб-сайтов под поисковики становиться все более сложным процессом, сочетающим в себе множество нюансов. Вот, например, продвижение сайта в социальных сетях (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-кодов, а также для любителей упрощения выполнения подобных процессов с помощью готовых программных решений. 

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

Правильные социальные share-кнопки / Хабр

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

Внешний вид

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

Быстродействие

В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

 Что же делать?

К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:

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

PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:

А какими сервисами социальных кнопок пользуетесь вы?

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

Время на прочтение: 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%, 55 голосов

  55 голосов 76%

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

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

  17 голосов 24%

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

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

09.10.2018

×

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

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

Кнопки социальных сетей для сайтов – явление довольно-таки новое, но очень и очень перспективное. И в том, чтобы они были на сайте, есть выгода как авторам, так и читателям.

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

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

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

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

Выгоды для авторов в данном процессе тоже вполне очевидны. Это попросту бесплатная реклама вашего сайта. Причем реклама очень эффективная. В простонародье именуемая ОБС («Одна баба сказала» — т. е. одна баба сказала, и вся деревня уже в курсе. :)) Так и тут — мы доверяем нашим друзьям, и если кто-то рекомендует ссылку, кликнем по ней с большей вероятностью, чем даже по рядом стоящей ссылке от Яндекса или Гугла.

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

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

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

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

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

Что касается сайтов на WordPress, то для них тоже есть несколько вариантов, как добавить эти кнопки на сайт. Можно устанавливать кнопки по одной или целым блоком, можно вставлять их напрямую в код шаблона или с помощью плагина. Способов много. Но самым простым и удачным мне кажется плагин, который можно найти в админпанели сайта. Называется он Social Share Buttons. Настроить его несложно, там все интуитивно понятно.

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

Подводные камни

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

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

Sharing is caring

В заключение хочу сказать следующее. Всем нам, мамам-блоггерам, важно продвижение наших сайтов. Ведь для многих из нас блог – это не просто хобби, но и возможность зарабатывать дома. Давайте поддерживать друг друга! Если понравилась статья, кликните “Мне нравится!” Не забывайте пользоваться этими кнопками на сайтах, которые вам действительно симпатичны.

Отдельно упомяну о Блоги Мам. Замечательный проект, которому хочется пожелать процветания и развития! И мы можем ему помочь – делая ретвит, кликая “Мне нравится”, размещая баннер у себя на сайте или публикуя ссылку на статью где-то в мамских сообществах или форумах, на которых мы общаемся.

Поддерживая проект “Блоги Мам”, мы поддерживаем самих себя! Ведь именно тут мы рекламируем свои блоги и обмениваемся ссылками, информацией. На каком форуме или в каком сообществе мы еще можем «безнаказанно» публиковать ссылки на свои блоги хоть каждый день?

Давайте сделаем небольшой подарок авторам такого дружелюбного сообщества. Все, кому нравится проект и кто хочет поддержать его, кликните внизу статьи “Мне нравится” или сделайте ретвит (а лучше и то, и другое :)). И не забывайте пользоваться этими кнопками в дальнейшем! Это самое лучшее, что мы можем сделать для любимого проекта!

Автор: Иванко Татьяна

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

Главная / Как самому раскрутить сайт / SMM маркетинг

9 января 2021

1. Создаем спрайт из кнопок и вставляем Html код на сайт
2. Оформляем кнопки в CSS

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Можно, конечно же, и плагин для этой задачи использовать, но сделать самому не так уж и сложно, да и одним плагином в WordPress будет меньше, тем более, что их у меня и так достаточно много трудится (см. статью по приведенной ссылке). Иконки соцсетей я взял из бесплатного конструктора кнопок Share42, о котором уже довольно подробно писал (надеюсь, что Димокс против этого возражать не будет).

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

А также я посчитал уместным добавить кнопку подписки на RSS ленту и кнопку Feedburner для подписки на новости сайта по Емайлу.

Создаем спрайт из кнопок и вставляем Html код на сайт

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

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

Я решил не изобретать велосипед (создавать спрайт), а использовал тот, что создает конструктор Шаре42 (ссылка на описание работы с ним приведена чуть выше). В нем можно выбрать те соцсети, иконки которых вам будут нужны, и вместе с кодом вы получите CSS спрайт, т.е. физически один графический файл, на котором будут размещены все нужные вам иконки соцсетей и подписки на RSS ленту (и Емайл, если потребуется).

Я выбрал четыре основных сети и пару иконок для подписки на новости с размером иконок 24 на 24 пиксела, поэтому мой спрайт выглядит так (FriendFeed, правда, туда еще затесался, но это не беда):

Теперь у нас есть все ингредиенты — ссылки на группы или страницы соцсетей и иконки для их отображения на сайте. Осталось все это только правильно приготовить, т.е. сверстать. Мой блог работает на WordPress, поэтому код с кнопками я буду вставлять в один из шаблонов, из которых состоит используемая мною тема оформления. В моем случае он называется sidebar.php. Html код при этом получается крайне простой:

<a rel="nofollow" href="http://feeds.feedburner.com/Ktonanovenkogoru" title="RSS сайта KtoNaNovenkogo.ru" target="_blank"></a>

<a rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru" title="Подписаться по e-mail" target="_blank"></a>

<a rel="nofollow" href="https://vk.com/ktonanovenkogoru" title="KtoNaNovenkogo.ru В Контакте" target="_blank"></a>

<a rel="nofollow" href="https://twitter.com/KtoNaNovenkogo" title="KtoNaNovenkogo.ru в Twitter" target="_blank"></a>

<a rel="nofollow" href="http://www.facebook.com/KtoNaNovenkogo.ru" title="KtoNaNovenkogo.ru в Facebook" target="_blank"></a>
<a rel="nofollow" rel="publisher" href="https://plus.google.com/107949091476526100342" title="KtoNaNovenkogo.ru в Google+" target="_blank"></a>

На всякий случай я добавил rel=»nofollow», чтобы эти ссылки не учитывали поисковики при распределении весов на сайте. Атрибут Title в теге гиперссылки A служит для отображения заключенного в него текста при подведении курсора мыши к иконке. Я не стал им пренебрегать, ибо не для всех посетителей сайта иконки могут представлять исчерпывающую информацию. Выглядеть это будет примерно так:

Привязываем спрайт к Html коду и оформляем кнопки в CSS

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

.twit {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -0px 0 no-repeat;}

.vkon {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:18px 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -24px 0 no-repeat;}

.face {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -48px 0 no-repeat}

.goog {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -96px 0 no-repeat}

.rsskt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 55px;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -120px 0 no-repeat}
.emailkt {display:inline-block;vertical-align:bottom;width:24px;height:24px;margin:0 20px 0px 0;padding:0;outline:none;background:url(путь до файла со спрайтом/icons.png) -144px 0 no-repeat}

CSS свойство display:inline-block позволяет придать тегу гиперссылки A одновременно свойства строчного и блочного элемента. По отношению к внешним и соседним тэгам он будет вести себя как строчный (т.е. рядом с ним могут располагаться и другие строчные элементы), а вот по отношению к вложенным в него тегам он будет вести себя как блочный (т.е. можно будет задавать его размеры как по ширине, так и по высоте, а еще задавать отступы с помощью марджинов и педдингов).

CSS свойство vertical-align:bottom задет выравнивание по вертикали, что наверно понятно из его названия. Практически для всех элементов в Html коде оно означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Просто поэкспериментируйте и поймете его назначение.

С помощью width и height мы задаем размеры отображаемого блока, который должен совпадать с размером иконки соцсети. Свойство outline:none используется, чтобы в некоторых браузерах при клике на ссылку вокруг нее не появлялась рамка. С помощью margin я задал отступы от верха и от соседних иконок, если не ошибаюсь (года три назад делал, когда CSS активно изучал).

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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

Здравствуйте, уважаемые читатели блога!

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

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

В этой статье я соберу весь материал, посвященный установке кнопок социальных сетей на ваш сайт. Мы рассмотрим только самые популярные из них: «лайк» Фейсбука, «мне нравится» Вконтакте, «класс» Одноклассников, «+1» Гугл+ и «поделиться» от Яндекса.

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

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

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

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

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

Используем скрипты, а не плагины

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

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

Итак, выделим недостатки плагинов:

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

И единственное достоинство плагинов – простота в установке.

Да, вы действительно будете дольше устанавливать скрипты вручную. Но… поймите, что вы это можете сделать всего один раз – установили и забыли. Еще, могу посоветовать легкий и простой скрипт с большим выбором кнопок share42. Прилагаю видео по его использованию:

В общем, выводы делайте сами.

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

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

Кнопки социальных сетей для сайта — Поисковая оптимизация (SEO)

---

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

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

1. Рекомендации по установки кнопок различных социальных сетей:
2. Для быстрого размещения кнопок со счетчиком используйте конструкторы кнопок. Например:
3. С точки зрения поисковой оптимизации сайта идеальный вариант установка кнопок без счетчика, без использования JavaScript или Flash. Если дизайн сайта позволяет, вместо иконок социальных сетей можно использовать просто ссылки, дизайн которых можно менять по своему усмотрению:

   Например:

   <a href=»http://vkontakte.ru/share.php?url=ссылка вашего сайта rel=»nofollow» target=»_blank»>Вконтакте</a>
   <a href=»http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Одноклассники</a>
   <a href=http://connect.mail.ru/share?share_url=ссылка вашего сайта rel=»nofollow» target=»_blank»>Mail.ru</a>
   <a href=»http://www.facebook.com/sharer.php?u=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Facebook</a>
   <a href=»https://plusone.google.com/_/+1/confirm?hl=ru&url=ссылка вашего сайта«>Google +</a>
   <a href=»https://twitter.com/intent/tweet?text=ссылка вашего сайта» rel=»nofollow» target=»_blank»>Twitter</a>

   Для сайта seo.andreasreisch.com это выглядит последующим образом:

   <a href=»http://vkontakte.ru/share.php?url=http://seo.andreasreisch.com/ rel=»nofollow» target=»_blank»>Вконтакте</a>
   <a href=»http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Одноклассники</a>
   <a href=http://connect.mail.ru/share?share_url=http://seo.andreasreisch.com/ rel=»nofollow» target=»_blank»>Mail.ru</a>
   <a href=»http://www.facebook.com/sharer.php?u=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Facebook</a>
   <a href=»https://plusone.google.com/_/+1/confirm?hl=ru&url=http://seo.andreasreisch.com/«>Google +</a>
   <a href=»https://twitter.com/intent/tweet?text=http://seo.andreasreisch.com/» rel=»nofollow» target=»_blank»>Twitter</a>

   Внешний вид:

   Вконтакте Одноклассники Mail.ru Facebook Google + Twitter

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

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

Бесплатно • Простота установки • Быстрая настройка

Бесплатные инструменты, которым доверяют миллионы создателей контента по всему миру

Всегда бесплатен и готов помочь вам сразу же расширить аудиторию

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

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

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

Полная интеграция с вашей любимой платформой веб-сайтов

Простое и удобоваримое понимание того, что находит отклик у вашей аудитории

Добавьте на свой сайт за 3 простых шага

Выберите тип кнопок

Настройте дизайн

Добавьте код на свой сайт

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

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

Часто задаваемые вопросы

Как установить кнопки общего доступа на мой сайт WIX?

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

Затем выберите желаемые кнопки совместного использования. Вы можете настроить свой дизайн, выбрав выравнивание, размер кнопки, призыв к действию и количество репостов. Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите свои кнопки совместного использования, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки совместного доступа. Скопируйте код из раздела «Установить sharethis.js на вашем сайте ». Затем войдите в свою учетную запись Wix и введите HTML-код в текстовое поле.

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

Как установить кнопки общего доступа на мой сайт Weebly?

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

Затем выберите желаемые кнопки совместного использования. После того, как вы создадите кнопки общего доступа, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки общего доступа.Когда ваша кнопка будет готова к дизайну, нажмите «Зарегистрироваться и получить код», чтобы получить код кнопки. После того, как вы создадите свои кнопки совместного использования, вы можете нажать кнопку «зарегистрироваться и получить код», чтобы получить код кнопки совместного доступа. Скопируйте код из раздела «Установите sharethis.js на свой веб-сайт». Затем войдите в свою учетную запись Weebly и введите HTML-код в текстовое поле.

Средний рейтинг пользователей (8):

---

Добавить отзыв / рейтинг

पटीर

जगदीश

2018-11-09

Awesome Tool

Это помогло мне делать вещи очень быстро

2018-11-15

Отличный виджет!

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

2019-07-01

Отличный инструмент

Лучшее обслуживание, отличный инструмент, он упростил мою работу.

2019-09-03

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

Для меня Sharethis — один из моих новых любимых онлайн-инструментов. Создавать кнопки публикации для ваших блогов, целевых страниц и веб-сайтов еще никогда не было так просто! Я на 100% рекомендую всем, кто хочет, чтобы их соединение было онлайн. И даже лучше, чем это, это совершенно бесплатно прямо сейчас. 😍

2019-11-29

Awesome tool

https: // sharethis.com / platform / share-buttons /

2020-07-17

Полезное приложение

На самом деле, я имел в виду именно это

2020-07-27

Лучший инструмент обмена на земле!

Я пробовал много инструментов для обмена от многих разработчиков, но, честно говоря, ShareThis намного лучше и работает безупречно. 1. Кнопки выглядят великолепно, просто и чисто, мы можем их настроить. И есть опция 100% ширины, чтобы он реагировал на любой размер экрана. 2. Если вы измените параметры / настройки кнопки в своей учетной записи, кнопка на вашем веб-сайте автоматически обновится.3. Кнопки не блокируются Adblock, поэтому они увеличивают видимость на вашем сайте. Спасибо ShareThis

2020-10-02

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

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

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

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

1. Расположение кнопок: насколько низко можно (или нужно) идти?

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

• Начало сообщения. Очень часто кнопки социальных сетей размещают в верхней части сообщений в блогах.

Некоторые оспаривают эту логику, спрашивая «поделятся ли читатели сообщением, которое они еще даже не читали?» Как ни странно, некоторые исследования не показали реальной корреляции между публикацией сообщения и его чтением. Вполне возможно, что пользователи увидят привлекательный заголовок и сразу же решат, стоит ли им делиться. Наличие кнопок социальных сетей в верхней части страницы также может служить социальным доказательством и поощрять читателей , если у вас много репостов.Если я вижу сообщение с +1 000 репостов, это укрепляет мою уверенность в том, что эта статья потрясающая и стоит потратить время на ее прочтение.

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

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

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

В блоге Moz кнопки социальных сетей находятся внизу сообщений

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

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

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

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

Upworthy размещает форму подписки, кнопку Twitter и комбинированное поле кнопки Facebook Share, которое находится в верхней части сообщения.

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

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

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

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

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

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

2. Размер кнопки социальных сетей: чем больше, тем лучше?

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

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

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

3.Пользовательские кнопки социальных сетей и классический дизайн

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

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

Давайте рассмотрим несколько примеров вариантов кнопок социальных сетей.

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

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

Эти кнопки в блоге Пэта Флинна не являются стандартными кнопками, но очень близки к оригиналам.

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

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

4. Слишком много кликабельных вещей: не переусердствуйте с кнопками

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

Слишком много вариантов подавляет

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

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

Когда пользователи не могут решить, хотят ли они поделиться вашим сообщением в Tumblr, Pinterest, Facebook, Twitter, Reddit, StumbleUpon, LinkedIn или Buffer, они могут в конечном итоге вообще отказаться от публикации вашего сообщения! О ужас!

Избыток социальных кнопок также чертовски неприятен, как искусно иллюстрирует The Oatmeal .

Много кнопок = Медленное общение

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

Поскольку Google использует скорость сайта в качестве сигнала ранжирования, важно максимально сократить количество лишних слов. Для оптимального SEO вам нужно быть таким же быстрым, как Sonic the Hedgehog.

Выбор кнопок, которые оставить, а какие выбросить

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

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

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

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

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

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

Один пример использования Visual Website Optimizer показывает, как страница продукта увеличила конверсию на 11,9% после удаления кнопок социальных сетей .

Может ли царапина социальной кнопки увеличить ваши конверсии? Надо подумать.

5. Следует ли вести счет с помощью счетчиков долей?

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

Тем не менее, низкое количество акций может отпугнуть читателя .

вомп вомп

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

Одно гениальное решение этой маленькой головоломки может быть решено с помощью плагина общего доступа New Internet Order. Он позволяет вам установить минимальное отображаемое количество акций. Это означает, что я могу запрограммировать плагин так, чтобы он не показывал счетчик долей, пока не наберу хотя бы 50 долей.Как только я наберу 50 репостов, счетчик репостов активируется, что поможет создать социальное доказательство. Это очень милый маленький инструмент!

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

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

CTA

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

Вариант 1. Преобразовать кнопку общего доступа в текст

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

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

Вариант 2. Добавьте текст с призывом к действию вокруг кнопок

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

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

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

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

7. Тестирование движет миром

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

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

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

Где разместить значки социальных сетей на своем веб-сайте

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

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

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

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

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

Выберите для размещения на своем сайте только значки социальных сетей, в которых ваш бизнес наиболее активен, например Facebook, Instagram и Pinterest.У вас может быть больше социальных сетей, в которых вы активны (Twitter, Google+, Linkedin и т. Д.), Но они могут быть не там, где находятся ваши клиенты, и поэтому контентом не будут делиться. Слишком много значков ослабляет ваши усилия, парализует посетителей вашего сайта при анализе — слишком много вариантов, они не могут принять решение.

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

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

Плавающая панель социальных сетей

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

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

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

Где не размещать кнопки социальных сетей

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

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

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

Загрузите Справочник по оптимизации домашней страницы

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

Важность кнопок подписки и публикации в социальных сетях на вашем…

Работая в интерактивном маркетинге, первое, что я ищу при первом посещении веб-сайта, — это активное присутствие в любых социальных сетях, таких как Facebook, Twitter или LinkedIn.

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

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

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

Вот один конкретный пример того, почему важно сохранять эти ссылки и кнопки видимыми: согласно тематическому исследованию 2018 года, проведенному популярной службой создания закладок / обмена в социальных сетях AddThis, кнопки совместного использования в социальных сетях могут способствовать значительному росту числа репостов и новых пользователей.В примере, который компания представила в своем тематическом исследовании, национальная некоммерческая организация увеличила свои общие доли на 400% после включения кнопок общего доступа в социальных сетях, а также увидела рост новых пользователей на 2,5%.

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

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

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

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

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

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

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

В статье, предлагающей рекомендации по размещению кнопки совместного доступа, AddThis рекомендует пользователям сделать следующее:

· Поместите кнопки на видном месте на странице и в верхней части

· Поместите кнопки публикации рядом с контентом, которым нужно поделиться

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

· Размещение кнопок общего доступа в инструментах навигации по странице, в нижнем колонтитуле или боковой панели.

· Размещение кнопок общего доступа в нескольких местах на странице

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

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

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

Об авторе

Эд Ламмон

Эд — управляющий редактор Agency Content.Эд родился в Алабаме и получил степень бакалавра журналистики в Обернском университете. Когда Эда нет в офисе, он любит ходить на концерты и смотреть футбол цвета Оберна.

Читать еще сообщения Эда Ламмона →

Что такое кнопки социальных сетей и как они влияют на…

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

Выбор социальных сетей для интеграции с интернет-магазином

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

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

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

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

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

Как создать кнопки, удобные для преобразования

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

• Протестируйте все: A / B-тестирование помогает владельцам интернет-магазинов определить наилучшее расположение кнопок на страницах товаров, оптимальный размер и эффективность счетчиков. A / B-тестирование также определяет, какая версия страницы конвертируется лучше: с кнопками социальных сетей или без них.
• Удалите счетчики акций с кнопок: Поскольку небольшое количество акций может снизить коэффициент конверсии, удаление счетчика акций — лучший вариант, если только владельцы интернет-магазинов не уверены, что увидят высокие цифры для определенных продуктов.
• Сделайте продажи более приоритетными, чем продвижение в социальных сетях: Бесплатная реклама в социальных сетях — это здорово, но основная цель — повысить конверсию. Важно, чтобы кнопки социальных сетей не мешали покупательскому процессу покупки. Использование кнопок меньшего размера дает возможность делиться контентом для желающих, не отвлекая пользователей от работы тех, кто этого не делает. Кнопки большего размера отвлекают потребителей от завершения транзакции.
• Сохраните кнопки социальных сетей для страницы подтверждения: Поскольку кнопки социальных сетей могут отвлекать клиентов на страницах продуктов, ожидание подтверждения покупки — оптимальное время для поощрения обмена.Клиенты уже чувствовали себя достаточно уверенно, чтобы купить продукт, что позволяло им с большей вероятностью выразить свое волнение и поделиться покупкой в ​​социальных сетях.

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

Настраиваемые кнопки, которые ссылаются на все ваши профили в социальных сетях.

Требования

Чтобы использовать этот виджет, перейдите в PluginsSiteOrigin Widgets, чтобы активировать виджет SiteOrigni Social Media Buttons.

Виджет «Кнопки социальных сетей» можно вставить в любую область виджетов темы в AppearanceWidgets или в любой пост / страницу с помощью конструктора страниц от SiteOrigin.Если вы используете редактор блоков, виджет кнопок социальных сетей можно вставить через блок SiteOrigin Layout или SiteOrigin Widget.

Настройки

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

Заголовок
Введите заголовок виджета, если хотите, чтобы он отображался.

Сети

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

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

URL
Введите URL-адрес страницы вашего профиля в социальной сети. Используйте полный URL, например, если SiteOrigin добавлял Twitter в качестве сети, мы будем использовать https://twitter.com/SiteOrigin .

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

Цвет значка
Выберите цвет значка.

Цвет фона
Выберите цвет фона значка.

Дизайн и верстка

Открыть в новом окне
Включите, чтобы открывать ссылки социальных сетей в новом окне.

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

Использовать эффекты наведения
Включите, чтобы использовать эффекты при наведении курсора на значок социальной сети.

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

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

Выровнять
Выберите общее выравнивание виджета. Выберите между левым, правым, центральным или по ширине.

Mobile align
Выберите общее выравнивание виджета на мобильных разрешениях.Выберите между левым, правым, центральным или по ширине. Это разрешение можно установить в PluginsSiteOrigin Widgets, найдите виджет «Кнопки социальных сетей» и нажмите кнопку Настройки .

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

Пользовательские сети

Этот раздел доступен как часть SiteOrigin Premium.

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

Имя
Введите имя вашей социальной сети.

URL
Введите URL вашей социальной сети.

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

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

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

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

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

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

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

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

Увеличение постэкспозиции

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

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

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

Расширьте свою ссылочную сеть

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

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

Только будьте осторожны, чтобы не попасться ботам, пишущим ваши сообщения. Может показаться, что Google не видит разницы, но Google знает все. Google может уловить обратные ссылки, которые не являются подлинными, что может повредить вашему SEO.

Увеличьте трафик

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

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

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

Бесплатная реклама

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

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

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

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

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

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