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

Квадратные иконки с закругленными краями Квадратные иконки Круглые иконки round-rect

style1 style2 style3 style4 pro-style-145675 pro-style-145676 pro-style-145677 pro-style-145678 pro-style-145679 pro-style-1456710 pro-style-1456711 pro-style-1456712 pro-style-1456713 pro-style-1456714 pro-style-1456715 pro-style-1456716 pro-style-1456717 pro-style-1456718 pro-style-1456719 pro-style-1456720 pro-style-1456721 pro-style-1456722

• Обычный
• Объём
• Поворот
• Сонар
• Увеличение

• сверху
• снизу
• слева
• справа
• статичное
  ?

добавить подложку

• горизонтальная
• вертикальная

• 48px
• 32px
• 24px

отдельные счетчики для каждой иконки

?

• снизу
• справа

С эффектом при наведении «Объём» или «Поворот» нельзя выбрать положение счетчиков.

общий счетчик

• перед
• после

Кнопка вверх

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

• слева
• справа

Настройки мобильного вида

не использовать мобильный вид

Расположение

?

справа

слева

Не делиться текущей страницей

?

подставлять собственный url «поделиться» premium

Добавить свой текст репоста premium

Привлечение внимания к кнопкам

активировать eye-catcher premium

Сбросить

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

000Z» title=»2012-10-22, 00:55″>22 окт 2012 в 00:55

Время на прочтение 2 мин

78K

Я пиарюсь

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

Внешний вид

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

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

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

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

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

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

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

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

Теги:

• социальные кнопки
• share

Хабы:

• Я пиарюсь

Всего голосов 113: ↑85 и ↓28 +57

Комментарии 78

Кирилл @grokru

co-founder at Beau

Telegram

Комментарии Комментарии 78

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

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

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

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

1. Позиционирование кнопок: как низко можно (или следует) опускаться?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Много кнопок = Медленная социальная сеть

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

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

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

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

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

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

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

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

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

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

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

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

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

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

womp womp

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

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

Если акций больше, перед формой скобки появляется номер акции.

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

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

Вариант 1. Преобразование кнопки «Поделиться» в текст

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

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

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

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

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

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

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

7. Тестирование заставляет мир вращаться

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

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

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

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

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

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

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

Чтобы решить эту проблему, мы составили исчерпывающее руководство, которое поможет вам понять разницу между кнопками «Поделиться» и «Подписаться» для шести крупнейших социальных сетей — Twitter, Facebook, LinkedIn, YouTube, Instagram и Pinterest, а также как реализовать их на своем веб-сайте, в блоге и другом контенте.

Перейти к инструкциям для: Twitter | Фейсбук | Линкедин | Ютуб | Пинтерест | Instagram

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

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

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

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

Вы можете разместить эти кнопки в любом месте на своем веб-сайте, но мы рекомендуем по крайней мере размещать их на странице «О нас» вашего веб-сайта и на главной странице/боковой панели вашего блога. Кнопка подписки Twitter, кнопка подписки Facebook, подключаемый модуль LinkedIn Company Follow и кнопка подписки YouTube (и другие), которые мы рассмотрим в этой статье, служат кнопками подписки в социальных сетях.

Ссылки/кнопки обмена в социальных сетях

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

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

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

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

1. Кнопка Twitter Follow

Для чего она нужна:

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

Как добавить кнопку «Подписаться на Twitter»:

Посетите https://publish.twitter.com/# и выберите «Кнопки Twitter», чтобы настроить избранную учетную запись кнопки (т. е. учетную запись, за которой вы хотите, чтобы люди следили).

Затем выберите «Follow Button»:

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

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

Посмотреть в действии. Подпишитесь на HubSpot в Твиттере:

Подпишитесь на @hubspot

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

Для чего она нужна:

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

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

Посетите https://publish.twitter.com/# и выберите «Кнопки Twitter». Затем выберите «Кнопка «Поделиться»»:

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

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

Посмотрите в действии. Разместите в Твиттере эту запись в блоге:

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

Для чего она нужна:

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

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

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

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», чтобы настроить кнопку хэштега. Затем выберите «Кнопка хэштега». Затем вы можете либо настроить, либо скопировать и вставить код как есть на свой веб-сайт.

Посмотрите в действии. Твит о ежегодном мероприятии HubSpot по маркетингу и продажам INBOUND:

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

Для чего она нужна:

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

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

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter», а затем «Кнопка упоминания», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.

Посмотреть в действии. Отправьте твит в HubSpot:

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

Для чего она нужна:

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

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

Посетите https://publish.twitter.com/# и нажмите «Кнопки Twitter» и «Кнопка сообщения», чтобы настроить кнопку. Затем возьмите HTML-код и вставьте его в HTML-код вашего веб-сайта там, где вы хотите, чтобы кнопка отображалась.

Посмотреть в действии. Отправьте прямое сообщение в HubSpot:

6. Предварительно заполненные якорные текстовые ссылки «Tweet This»

Для чего они нужны:

Вы когда-нибудь хотели создать якорную текстовую ссылку, которая предварительно заполняет определенное сообщение Twitter, чтобы ваши посетители могли им поделиться? Мы называем эти ссылки ссылками «Tweet This», и в HubSpot мы часто используем их в статьях блогов, чтобы упростить обмен контентом.

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

Как добавить якорный текст «Tweet This» CTA:

К счастью, есть отличный бесплатный инструмент, который поможет вам легко создавать ссылки «Tweet This» для вашего контента. Просто зайдите на http://clicktotweet.com, введите сообщение, которым вы хотите заполнить твит, и нажмите «Создать новую ссылку», а затем скопируйте/вставьте сгенерированный URL-адрес в текст привязки (например, «Твитнуть это!»):

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

Посмотреть в действии:

(Помните, что текст привязки можно настроить по своему усмотрению.)

Твитнуть эту статью в блоге!

7. Виджет Twitter Timeline

Для чего он нужен:

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

Как добавить виджет временной шкалы Twitter:

Посетите https://publish.twitter.com/#, нажмите «Встроенная временная шкала» и вставьте URL-адрес профиля вашей компании в Twitter, списки или избранное. Затем возьмите HTML-код и разместите его на своем веб-сайте там, где вы хотите, чтобы виджет отображался.

См. один в действии:

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

1. Плагин страницы Facebook

Для чего он нужен:

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

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

Как добавить плагин страницы Facebook:

Чтобы создать блок «Нравится» Facebook для своего веб-сайта, посетите https://developers.facebook.com/docs/plugins/page-plugin. Включите персональный URL-адрес своей Страницы Facebook, а также свои настройки. Затем сгенерируйте код (доступный в формате HTML5, XFBML, IFRAME или URL) и разместите его на своем веб-сайте там, где вы хотите, чтобы он отображался.

Посмотреть в действии:

2. Кнопка «Нравится» Facebook

Для чего она нужна:

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

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

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

Посетите https://developers.facebook.com/docs/plugins/like-button, чтобы настроить кнопку «Нравится» и получить код (доступен в формате HTML5, XFBML, IFRAME или URL) для размещения на вашем веб-сайте.

Посмотреть в действии:

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

Для чего она нужна:

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

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

Чтобы создать кнопку «Поделиться в Facebook», посетите https://developers.facebook.com/docs/plugins/share-button и укажите URL-адрес, который вы хотите, чтобы люди поделились, а также ширина. Затем сгенерируйте код , и вставьте его на свой сайт там, где вы хотите разместить кнопку. ( Примечание. Кнопка «Поделиться» доступна только в HTML5 или XFBML и требует наличия JavaScript SDK.)

Посмотреть в действии:

4. Facebook Anchor Text Share Links

Для чего они нужны:

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

Как добавить ссылки для обмена с текстом привязки Facebook:

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

http://www.facebook.com/share.php?u=hubspot.com

См. One in Action:

Поделись этой публикацией на Facebook!

Дополнительные кнопки Facebook: здесь мы рассмотрели наиболее часто используемые кнопки социальных сетей для вашего бизнеса, но чтобы найти все официальные плагины социальных сетей Facebook в одном месте, посетите https://developers.facebook.com/docs/ плагины/.

1. Подключаемый модуль LinkedIn Follow Company

Для чего он нужен:

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

Как добавить подключаемый модуль LinkedIn Follow Company:

Посетите https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/follow-company-plugin, чтобы настроить кнопку. Есть несколько различных стилей на выбор, с вариантами отображения количества подписчиков вверху, справа или вообще не показывать.

Затем скопируйте HTML-скрипт, заменив часть «data-id=1337» идентификационным номером вашей компании. Вы можете найти это в разделе администратора на странице вашей компании.

Как они выглядят

2. Кнопка «Поделиться» в LinkedIn

Для чего она нужна:

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

Как добавить кнопку «Поделиться в LinkedIn»:

Чтобы создать и установить эту кнопку, посетите https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin, и скопируйте HTML-код. Затем замените data-url=»https://www.linkedin.com» на любой URL-адрес, которым вы хотите поделиться с посетителями, например, на запись в блоге, которую посетители читают, или на веб-страницу, на которую они попали.

Дополнительные кнопки LinkedIn. Хотя мы рассмотрели наиболее часто используемые кнопки выше, вы можете найти все официальные кнопки и плагины социальных сетей LinkedIn в одном месте по адресу https://docs.microsoft.com/en-us. /linkedin/consumer/integrations/self-serve/plugins?context=linkedin/consumer/context.

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

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

Для чего она нужна:

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

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

Чтобы создать кнопку подписки на YouTube, перейдите на страницу https://developers.google.com/youtube/youtube_subscribe_button, введите название канала вашей компании на YouTube, выберите размер кнопки и цветовую тему. , решите, хотите ли вы отображать свой логотип, и решите, хотите ли вы показывать или скрывать количество подписчиков. Затем скопируйте и вставьте код на свой веб-сайт, где вы хотите разместить кнопку.

Посмотреть в действии. Подпишитесь на канал HubSpot на YouTube:

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

1. Кнопка «Подписаться» на Pinterest

Для чего она нужна:

Присутствие в Pinterest и создание новых подписчиков для вашей учетной записи.

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

Посетите https://developers. pinterest.com/tools/widget-builder/?type=follow и настройте кнопку, введя URL-адрес и имя учетной записи Pinterest. После того, как вы введете эту информацию, автоматически сгенерируется код, который вы сможете вставить на свой веб-сайт.

Посмотреть в действии. Подпишитесь на HubSpot в Pinterest:

HubSpot

2. Кнопка «Закрепить»

Для чего она нужна:

Это кнопка «Поделиться» в Pinterest, которая позволяет пользователям делиться вашим контентом в Pinterest и расширять охват. Кнопка Pin It отлично подходит для визуального контента. Разместите эти кнопки рядом с изображениями, инфографикой и другим визуальным контентом на вашем сайте.

Как добавить кнопку «Pin It»:

Посетите https://developers.pinterest.com/tools/widget-builder/?type=pin, чтобы создать кнопку «Pin It». Вставьте URL-адрес булавки и размер булавки. Затем скопируйте сгенерированный код для встраивания, чтобы использовать его на своем веб-сайте.

Посмотреть в действии. Закрепите эту запись в блоге:

Дополнительные кнопки Pinterest: другие виджеты Pinterest включают виджет профиля для предварительного просмотра ваших пинов, виджет доски для демонстрации определенных пинбордов и виджет пинов для демонстрации определенных пинов. Создайте их на странице https://business.pinterest.com/en/widget-builder.

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

1. Добавление профиля Instagram на ваш веб-сайт

Для чего это нужно:

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

Как добавить значок Instagram:

Большинство популярных разработчиков веб-сайтов, включая HubSpot, WordPress и Wix, поставляются с значками социальных сетей, включая Instagram, которые можно легко встроить на ваш сайт. Оттуда вам просто нужно связать значок с учетной записью Instagram вашей компании (http://www.instagram.com/yourusername).

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

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

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