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

20.05.2021 alexxlab

Содержание

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

Привет, друзья! Сегодня статья будет очень объемной, но в то же время необычайно полезной. Почему я решила написать эту статью? Дело в том, что меня постоянно спрашивают, как получить больше поклонников в ту или иную социальную сеть? Почему мало кто подписывается на мою страницу на Фейсбук? Почему никто не фолловит компанию в Твиттер?

Почти у каждой компании сегодня есть сайт и даже блог. А у вас есть сайт? Надеюсь, что да! Если еще нет, то об этом нужно срочно задуматься! Ну с блогерами и обладателями свободных профессий (консультанты и фрилансеры) и так понятно, у них обязательно есть свой адрес в интернете — веб-сайт. Друзья, проблема в том, что мало какие сайты реально оптимизированы под социальные сети. Они могут производить кучу очень полезного и интересного контента, но их никто не видит и не слышит. SMO (social media optimization) — слышали такой термин? Так вот этим самым СМО (оптимизацией сайта под соц.

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

На самом деле, установить пару кнопок «поделиться» и значок Фейсбук в самом верху или в низу сайта — этого мало (хотя некоторые сайты не замудряются и не имеют даже самого базового!!!). К таким кнопкам глаза наши быстро привыкают и их никто, увы, не замечает. Читателей нужно активировать, давать им что-то новое и интересное. Это и есть магия СМО. Колдовать учить я вас не буду, так как это целая наука, но, тем не менее, расскажу, что иметь просто необходимо, а также дам некоторые наводки на кое-что более креативное. Если будете внимательны, то точно что-то интересное для себя найдете!

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

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

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

Выберите соц. сеть, кнопки которой вы хотите установить:

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

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

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

Фейсбук

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

Остальные вы сможете посмотреть и протестировать на сайте разработчиков на Фейсбук.

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

Сайт разработчиков на Фейсбук: https://developers.facebook.com/docs/plugins

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

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

нравится такая-то статья». Это легко для пользователя и очень эффективно для вас, т. к. помогает распространять ваш контент всего за один клик.

Как установить?

Установить кнопочку «Нравится» очень просто! Вам нужно перейти на сайт разработчиков на Фейсбук (как мы договорились, ссылка находится в начале этого раздела). Прежде, чем вы приступите к созданию новых кнопок и виджетов, вам необходимо создать новое приложение в меню «Apps». Это нужно сделать обязательно, так как без этого Фейсбук не даст вам создавать кнопки!

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

Итак, чтобы установить кнопку «Нравится», на странице разработчиков, в левой колонне, кликните на «кнопка «Нравится» (сеть)«.Теперь вам необходимо выбрать из предложенных Фейсбук опций, чтобы получить именно такой виджет, который вы желаете.

1) Url to Like — введите ссылку на страницу, публикацию, лендинг, для которой вы создаете кнопку «Нравится». Это может быть любой тип контента, даже изображение или видео. Главное, чтобы вы указали ссылку, которой будут делиться пользователи.

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

3) Layout — Вид виджета. Фейсбук предлагает на выбор 4 варианта: стандартный (как на картинке), с большим счетчиком, с маленьким счетчиком и просто кнопки. Здесь все зависит от вашего вкуса, стиля сайта, имеющегося места под кнопки, а также желании показывать счетчики (т. е. сколько человек нажали на кнопку).

4) Action Type — вид действий, т. е. какой тип кнопки вы желаете установить: «Нравится» или «Рекомендую». Подробно о различиях этих кнопок — и вообще виджетах на Фейсбук — я писала в моем бесплатном пособии о продвижении на Фейсбук.

5) Show friends’ faces — если вы желаете, чтобы кнопки показывали посетителю вашего сайта аватарки его друзей, кто уже кликнул на кнопку «Нравится», то поставьте галочку в этом пункте. Если никто из друзей не лайкнул страницу, статью и т. д., то Фейсбук не будет отображать фото, а в тексте предложит пользователю стать первым, кому это понравилось. Если вам позволяет место, то я рекомендую включать эту опцию, так как лица друзей положительно влияют на восприятие контента читателем, увеличивая его доверие и часто толкая его также кликнуть на кнопку, хотя бы из солидарности.

6) Include share button — ну и последний пункт, добавить кнопку «Поделиться». Дело в том, что кнопка «Нравится» — это как обычный лайк на Фейсбук, а кнопка «Поделиться» — это аналог перепоста. При нажатии кнопки «Поделиться», человек может добавить свой текст, мнение к ссылке, которой он делится.

У кнопки «Нравится» такой возможности нет.

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

Для того, чтобы установить кнопки Фейсбук, в качестве примера в этой статье, я вставила первую часть кода в самый верх кода страницы с помощью плагина Add to head

. Далее, вторую часть кода, я вставила в HTML редактор этой статьи и вот, что у меня получилось. Кнопочки «Нравится» и «Поделиться» появились там, где я и хотела. Можете проверить их в действии и дать мне понять, что статья вам пока что нравится 😉

Рабочий пример кнопок «Нравится» и «Поделиться».

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

Для чего нужна кнопка «Поделиться» написала в разделе выше. Фейсбук предлагает устанавливать кнопки «Нравится» и «Поделиться» вместе (см. инструкцию выше). Тем не менее, если вы желаете установить эту кнопку отдельно, то читайте ниже, как это сделать.

Как установить?

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

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

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

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

Примечание: Последние три опции я настоятельно не рекомендую, так как такие кнопки/ссылки вы можете с легкостью сделать в формате HTML (см. последний раздел «Бонус» этой статьи), что будет намного легче для сайта. То есть нет смысла утяжелять страницу скриптом, когда тот же самый код вы можете сделать через гиперссылку + иконку или через специальный код-ссылку, о котором я расскажу ниже.

А вот функционирующий пример кнопки «Поделиться» со счетчиком.

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

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

Как установить?

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

Чтобы активировать подписки, в вашем личном профиле зайдите в «Настройки» (стрелочка вниз в верхней синей панели). Далее, в левой колонне, кликните на раздел «Подписчики«. В открывшемся окне, в самом верху, в графе «На мои обновления можно подписаться» выберите «Все». Готово! Теперь попросите кого-то из друзей, чтобы они посмотрели, появилась ли кнопка «Подписаться» на обложке вашего профиля.

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

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

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

NEW! Плагин страницы

Друзья, это совсем новый плагин, который меньше месяца назад запустил Фейсбук. Он теперь будет заменять блок «Подписаться на страницу», который описывается в следующем пункте. Дело в том, что Фейсбук решил насовсем убрать Like Box и придумал ему замену — Page Plugin. С 23 июня 2015, обычный, всем нам знакомый, блок подписки на страницу перестанет поддерживаться и пропадет со всех сайтов, которые не заменят его на плагин страницы. Поэтому, если вы собираетесь установить подобный блок, то установите сразу Page Plugin, чтобы потом ничего не менять и случайно не забыть переустановить скрипт.

Как установить?

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

Пример блока лайкнуть страницу на Фейсбук

Блок «Подписаться на страницу»

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

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

Как установить?

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

1) Прежде всего, вводим ссылку на вашу страницу на Фейсбук.

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

3) Фейсбук также дает возможность выбрать цвет, который больше подойдет по стилю вашему сайту: светлый или темный.

4) По картинке, я думаю понятно, что значат все следующие четыре опции.

Хочу привлечь ваше внимание к двум параметрам: лицам друзей и постам из хроники.

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

Пример блока лайкнуть страницу на Фейсбук

Твиттер

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

Кнопка «Читать»

Здесь, я думаю, все очень просто и понятно. Кнопка «Читать» — это кнопка подписки на ваш аккаунт в Твиттер. Подписавшись, пользователь будет получать ваши твиты в свою ленту новостей. Немного не в тему. Вы слышали, что со следующего года Твиттер планирует запустить алгоритм вывода твитов в ленту, как у Фейсбук? Очень любопытно будет посмотреть, что из этого выйдет…

Итак, установить кнопки Твиттер, как я уже сказала ранее, очень просто. Все кнопки устанавливаются со страницы разработчиков: https://about.twitter.com/ru/resources/buttons

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

Как установить?

1) Кликаем на второй кнопке «Читать«.

2) В параметрах вводим имя пользователя на Твиттер, для которого вы создаете кнопку.

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

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

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

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

7) Теперь просто скопируйте код в сером блоке и вставьте его в то место сайта, где хотите разместить кнопку.

Пример кнопки «Читать» на Твиттер.

Follow @prosmm1

Кнопка «Твитнуть»

Еще одна всем известная кнопочка на Твиттер — «Твитнуть», которая позволяет пользователям делиться вашим контентом с фолловерами в Твиттер.

Как установить?

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

1) Итак, в самом начале выбираем, какой ссылкой пользователи будут делиться в Твиттер. Здесь есть два варианта: ссылка страницы, на которой будет установлена кнопка (определяется автоматически) или какая-то другая ссылка, которую вы задаете сами. Первый вариант, конечно, самый логичный, но бывают моменты, когда нужно твитнуть другую статью или страницу.

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

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

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

5) А теперь у нас очень важный шаг — рекомендовать аккаунт. Этот момент очень многие упускают, т. к. возможно не совсем понимают, что здесь требуется. После того, как читатель твитнул вашу ссылку, Твиттер может предложить ему зафолловить аккаунт, который вы укажете в этом шаге. Понимаете? То есть, если вы твитнули эту статью, то возможно вы заинтересованы подписаться на обновления «Про СММ» в Твиттер. Если я оставлю эту графу пустой, то вы просто закроете окошко. Если же я укажу профиль блога в этой графе, то у меня появится шанс привлечь ваше внимание к аккаунту Про СММ в Твиттер. Смотрите пример ниже, чтобы на практике увидеть, как это работает.

Примечание: Вам придется твитнуть статью, чтобы увидеть рекомендацию.

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

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

7) Далее следуют шаги, которые мы уже видели выше, поэтому не буду повторяться.

Не забудьте попробовать кнопочку нижу 😉

Пример кнопки «Твитнуть»

Твитнуть

Кнопка «Хэштег»

Это очень интересная кнопочка, о которой, уверена, почти никто не знает. Я лично ни разу не видела, чтобы ее использовал кто-то в Рунете. Тем не менее, она очень хороша для решения определенных задач. Например, такую кнопку можно использовать для продвижения каких-либо мероприятий, вебинаров, дискуссий в Твиттер под определенным тегом, маркетинговых кампаний, конкурсов. Да что угодно! Здесь есть большой простор для креативности!

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

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

Как установить?

Устанавливается кнопка «Хэштег» все с той же страницы, о которой я писала выше.

1) Сначала вписываете ваш хэштег. Хэштег должен быть только один, так как он будет фигурировать на самой кнопке.

2) Затем, вписываете, при необходимости, текст твита или же оставляете эту возможность пользователю. Я бы, все таки, какой-то текст сюда вписала — для особо ленивых. Например, «Я участвую в конкурсе Х! Участвуй и ты! #конкурсХ».

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

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

5) Ну а дальше у нас все те же самые шаги, которые мы рассматривали в кнопках выше.

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

Пример кнопки «Хэштег»

Tweet #%D0%9F%D1%80%D0%BE%D0%A1%D0%9C%D0%9C

Кнопка «Упомянуть»

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

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

Как установить?

Устанавливаем кнопку все с той же страницы. Если вы читали инструкции к предыдущим кнопкам, то все параметры кнопки «Упомянуть» в Твиттер, вам должны быть понятны.

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

Пример кнопки «Упомянуть»

Tweet to @prosmm1

Виджеты Твиттер

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

Виджеты бывают следующего типа:

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

Пример обычного виджета Твиттер

Твиты от @prosmm1

Вконтакте

У социальной сети Вконтакте, как и у других, существует целая куча различных кнопок и виджетов. Полный их список можно увидеть на сайте разработчиков: https://vk.com/dev/sites

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

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

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

Как установить?

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

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

2) Далее, вставляем ссылку на статью или страницу, которой читатели будут делиться.

3) В третьем окошке «основной домен«, отрежьте от ссылки ненужную часть и оставьте только ссылку на главную страницу.

4) Теперь выберите из списка тематику вашего сайта.

5) Если вы хотите сохранить этот виджет в памяти ВК, то нажмите на кнопку «Сохранить» и введите капчу.

6) Далее выберите вид кнопки, который вам больше нравится или больше подойдет для ваших целей. Опять таки, как и для кнопок Фейсбук, советую выбирать первый или второй вариант кнопок, а гиперссылки или иконки, при необходимости такого формата, вставлять через код HTML.

7) Два последующих шага — простые, поэтому переключусь сразу на скрипт.

8) Итак, кнопки и виджеты ВК работают также, как и социальные виджеты Фейсбук. Здесь есть два кода: первый (отмечен голубым цветом) вставляется в тег <head> страницы вашего сайта, а второй код вставляется в то место, где должна стоять кнопка. Единственная разница в том, что у Фейсбук существует только один верхний код, а у ВК первый код различается для каждого виджета. Поэтому, если вы, к примеру, используете 2-3 разных виджета Вконтакте на одной странице, то вам придется устанавливать верхний код трижды — очень неудобно, хочу заметить… но, ничего не поделаешь.

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

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

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

Как установить?

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

1) Вам всего навсего нужно выбрать вид кнопки (см. инструкцию к предыдущей кнопке).

2) Далее, вы можете выбрать текст, который появится на кнопке. По умолчанию, это «сохранить«. Я больше привыкла к Фейсбуковскому «Поделиться», поэтому вставляю именно этот текст.

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

4) Далее копируете код, так как это это было описано для кнопки выше и все — ваша кнопка готова!

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

Виджет «Сообщество»

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

Как установить?

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

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

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

Пример плагина «Сообщество» Вконтакте

Виджет «Подписаться на автора»

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

Как установить?

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

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

Другие виджеты Вконтакте

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

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

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

Но мы сегодня не об этом. Мы будем говорить о социальных плагинах, которые разработал для нас LinkedIn и о том, где и как их можно использовать. Не спешите говорить, что эта сеть вам не интересна! А если вы работаете в сфере консалтинга, b2b, то вам читать этот раздел просто обязательно.

Итак, у LinkedIn, как и у всех соц. сетей, есть отдельная страница, где можно увидеть все существующие кнопки и плагины: https://developer.linkedin.com/plugins

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

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

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

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

Как установить?

Для начала перейдите по ссылке, указанной в самом начале раздела, на сайт разработчиков и выберите в колонне слева раздел «Share on LinkedIn«.

1) Прежде всего LinkedIn предложит вам на выбор один из трех вариантов кнопки «Поделиться»: кнопка с большим или маленьким счетчиком или просто кнопка без счетчика. Кликните на кнопку Get it, чтобы приступить к установке, выбранной вами кнопки.

2) У вас откроется окошко, как на рисунке сбоку. Если вы устанавливаете стандартную кнопку, например, для всех статей на вашем сайте, то вам не нужно вводить url — LinkedIn определяет ссылку автоматически. Ссылка вставляется только в случае, когда вы рекомендуете читателям какой-то другой контент, т. е. ссылка страницы, на которой устанавливается кнопка, — не та же самая, что ссылка, которой будут делиться читатели.

3) Далее выберите язык кнопки — Russian.

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

5) Теперь кликните на кнопку Get code (получить код).

6) Вам осталось только скопировать сгенерированный код и вставить его в то место, куда вы устанавливаете кнопку. Все очень просто, как у кнопок Твиттер.

Кнопка «Подписаться» на компанию

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

Как установить?

Устанавливается кнопка «Подписаться» с той же страницы разработчиков, ссылку на которую я дала в начале раздела. В левой колонне кликните на «Follow company» и LinkedIn покажет вам нужный раздел. Сначала выберите, какого вида кнопку вы хотите установить: с вертикальным или горизонтальным счетчиком или может самую обычную и кликните на Get it. Далее вам необходимо ввести название компании для которой вы устанавливаете кнопку. В соответствующей графе, начните писать название, буква за буквой, и оно должно будет выпасть в списке. Иногда список загружается довольно долго, поэтому не торопитесь. Название нужно писать точь-в-точь, как оно написано на странице компании. Затем выберите язык кнопки — Russian, вид кнопки и нажмите на кнопку «Получить код«. Теперь просто вставьте код в нужное место на сайте и — все готово! На русском, кстати, кнопка будет называться «Отслеживать», что мне не очень нравится. Я лично оставила бы английскую версию. Благо все уже в курсе, что означает слово «фоллоу» 🙂

Я пока не создавала страничку компании в LinkedIn, поэтому реального примера пока нет. Если в будущем сделаю страничку, то обязательно вставлю ее в качестве примера в статью.

Кнопка «Личный профиль»

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

Для кого этот плагин может быть полезен? Думаю, что для людей, работающих в секторе b2b, он будет наиболее полезен. Хотя использовать его можно где угодно: на странице об авторах сайта, на странице о сотрудниках компании, на страницах о ваших клиентах и партнерах (с их позволения, конечно) — вариантов много. Главное, чтобы такие кнопки-профили органично вписывались в ваш сайт и стратегию компании. Если ваши сотрудники имеют полузаполненные профили, заходят в LinkedIn один раз в год и имеют 10 связей, то смысла выставлять такие профили на показ нет. Если же ваша компания наоборот активно занимается продвижением в соц. сети, то такой плагин может принести вам много пользы.

Как установить?

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

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

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

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

4) Далее, как обычно, копируете код и вставляете его туда, куда нужно на сайте.

Другие плагины LinkedIn

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

Плагин «Профиль компании» — этот плагин очень похож на предыдущий. Он показывает информацию о компании в формате визитки, а также имеет кнопку «Подписаться». Таким образом, если у вас есть место на сайте, то вместо обычной кнопки «Подписаться» на компанию, вы можете использовать этот виджет.
Если ваша компания занимается активным поиском сотрудников через сеть LinkedIn, то вам стоит присмотреться к плагинам «Company Insider» и «Jobs You May Be Interested In«. Первый плагин показывает посетителю, кто из его связей работает в вашей компании. Этот виджет также показывает новых сотрудников и последние вакансии. Второй плагин показывает только вакансии в заданной компании.

Google+

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

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

Сайт разработчиков Google+: https://developers.google.com/+/web

Кнопка +1

Это гугловский вариант кнопки «Нравится» на Фейсбук или ВК. Нажав на такую кнопку, пользователь автоматически отправляет новость о том, что он лайкнул такую-то публикацию. Это самый простой способ поделиться вашим контентом для пользователя, так как ему ничего не нужно делать — только кликнуть по кнопке один раз. После того, как пользователь нажимает кнопку +1, открывается всплывающее окно, в котором ему предлагается поделиться страницей в Google+.

Как установить?

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

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

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

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

5) Теперь скопируйте код и вставьте его в сайт. Аналогия здесь такая же как и у кнопок Фейсбук и ВК: первая часть кода идет в тег <head>, ну а вторая, собственно, в место, куда устанавливается кнопка.

Пример кнопки +1

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

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

Как установить?

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

Пример кнопки «Поделиться» в Google+

Значок Google+

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

Как установить?

У этого виджета немного больше опций, но он, также как и другие кнопки Google+, очень прост в установке.

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

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

3) Затем вы можете выбрать тип значка: вертикальный (как на картинке) или горизонтальный. Последний имеет совсем другой вид: логотип и кнопка.

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

5) И наконец, копируете и вставляете код на сайт. Опять таки вам нужена только вторая часть кода, если вы уже установили другие кнопки Google+ на странице.

Страница «Про СММ» в Google+

Мой личный профиль в Google+

Наконец-то мы добрались до последней социальной сети в этой статье! В этом разделе мы рассмотрим несколько самых эффективных кнопок для соц. сети Pinterest. Этой соц. сетью также очень пренебрегают, как и Google+. Думаю, что ситуация может вскоре измениться, так как Pinterest стремительно растет и количество зарегистрированных в сети наших соотечественников постоянно увеличивается. Я это заметила даже по моему блогу. Как только я установила кнопку поделиться в Pinterest, читатели начали это делать. Конечно, до Фейсбук и Твиттер Pinterest’у очень далеко, но у меня ведь блог, посвященный смм и маркетингу. Если бы это была более подходящая для Pinterest тематика, как, например, мода, искусство, украшения, хобби, то уверена, что делились бы намного активнее.

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

Кнопка «Pin it»

С помощью кнопки «Pin it», любой желающий может отправить ссылку на ваш контент в Pinterest. Как вы знаете, Pinterest — это социальная сеть полностью сфокусированная на фотографиях, поэтому, чтобы пользователям было что отправлять в соц. сеть, нужно, чтобы каждая ваша статья или страница содержали хотя бы одну фотографию. Если фотографию, по каким-либо причинам не вставить в статью, то нужно хотя бы задать миниатюру статьи или страницы (для WordPress), чтобы кнопка Pinterest работала.

Сайт разработчиков Pinterest: https://business.pinterest.com/ru/widget-builder

Как установить?

Все кнопки и виджеты Pinterest устанавливаются по ссылке, указанной выше. Чтобы установить кнопку «Pin it», необходимо выбрать соответствующую кнопку в левой колонне.

Кнопочки Pinterest немного сложнее в установке, так как у них много различных параметров, но все же вполне реально установить их самостоятельно.

1) В самой первой строке «Button Type» вы можете выбрать тип кнопки, которую желаете установить на сайт: заданное изображение, любое изображение со странцы или кнопка Pin it, которая будет появляться на изображениях страницы/статьи.

2) Вторая строка — «Appearence«, т. е. вид кнопки. Здесь Pinterest предлагает много параметров на выбор: большая или маленькая; прямоугольная или круглая; красная, серая или белая; текст на английском или японском.

3) Третья строка — это счетчик. Вы можете здесь выбрать счетчик сверху, сбоку или совсем убрать его.

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

Кнопка «One image» подразумевает, что вы хотите задать определенное изображение, которое читатель сайта сможет запинить для определенной ссылки. То есть выбора у читателя не будет, даже если на вашей странице имеются другие изображения. Если вы решите задать изображение для кнопки, то такую кнопку нужно устанавливать отдельно на каждую страницу, так как она требует введения ссылки на страницу/статью. В первую графу вам необходимо вставить ссылку на страницу, которой пользователи будут делиться, т. е. ту ссылку, которую они будут пинить. Далее, указываете ссылку на изображение. Это, кстати, может быть любой источник, даже вне вашего сайта. В последней графе, вы можете указать текст к изображению, которым пользователь будет делиться. Это может быть, например, название страницы или заголовок статьи. Перед отправлением пина, пользователь, при желании, сможет заменить ваш текст на свой собственный.
Кнопка «Any image» или любое изображение. Эта кнопочка совсем простая и не требует никаких дополнительных параметров. Вам всего навсего нужно выбрать размер и вид кнопки, а также решить нужен вам счетчик или нет.
Кнопка «Image hover«, т. е. кнопочка, которая будет появляться на самом изображении, при наведении на него курсора мышки. Вы можете попробовать, как это работает на изображении-примере Pinterest.

Теперь пара слов о коде, который вам нужно установить на странице. Pinterest, как и другие соц. сети, имеет два кода: первая часть вставляется в тег <head>, а вторая часть в то место, куда устанавливается сама кнопка. Если у вас несколько кнопок Pinterest на одной и той же странице, то вам нужно установить первый код только один раз.

Примерная часть кода, который устанавливается только один раз в тег <head> страницы: <script type=»text/javascript» async defer src=»//assets.pinterest.com/js/pinit.js»></script>.

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

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

Pinterest, как и Google+, не делает различий между личными аккаунтами и аккаунтами компаний, поэтому кнопка «Подписаться» для того и другого создается в одном месте. Эту кнопочку установить проще простого. Все, что вам нужно сделать, — это ввести ссылку на ваш профиль и задать имя кнопки.

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

Бонус: гиперссылки

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

Ниже, я приведу примеры, как такие ссылки создаются вручную. Вы также можете попробовать специальный генератор ссылок — Share Link Generator. На этом сайте вы можете создавать ссылки для Фейсбук, Твиттер, Google+, Pinterest и LinkedIn. Разобраться в сайте будет просто, поэтому не буду объяснять что и как. Тем не менее, посмотрите мои советы, так как генератор ссылок не дает полной ссылки для формата HTML + кода как сделать так, чтобы ссылка открывалась в новом окне. Все это плюс примеры ссылок для соц. сети Вконтакте, вы найдете в этом разделе.

Гиперссылка «Поделиться на Фейсбук»

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

Обычный формат:

http://www.facebook.com/share.php?u=ваша ссылка

<a href=»http://www.facebook.com/share.php?u=ваша ссылка«>текст гиперссылки</a>

Пример гиперссылки «Поделиться на Фейсбук»

▶▶▶Поделиться на Фейсбук!◀◀◀

Гиперссылка «Поделиться в Твиттер»

Создать ссылку «Твитнуть» также очень просто. Смотрите пример ниже.

Обычный формат:

https://twitter.com/home?status=текст твита https://www.pro-smm.com/social-media-buttons

<a href=»https://twitter.com/home?status=текст твита https://www.pro-smm.com/social-media-buttons/»>текст гиперссылки</a>

Пример работы такой ссылки. Кликните на текст ниже:

▶▶▶Поделиться в Твиттер!◀◀◀

Гиперссылки для Google+

У Google+ есть два варианта ссылок: поставить отметку +1 (после чего читателю сайта также предложится поделиться ссылкой) и просто поделиться.

Ссылка «+1»

Обычный формат:

https://plusone.google.com/_/+1/confirm?hl=en&url=ваша ссылка

<a href=»https://plusone.google.com/_/+1/confirm?hl=en&url=ваша ссылка«>текст гиперссылки</a>

▶▶▶+1 в Google+!◀◀◀

Ссылка «Поделиться»

Обычный формат:

https://plus.google.com/share?url=ваша ссылка

<a href=»https://plus.google.com/share?url=ваша ссылка«>текст гиперссылки</a>

▶▶▶Поделиться в Google+!◀◀◀

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

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

Обычный формат:

http://vk.com/share.php?url=ваша ссылка

<a href=»http://vk.com/share.php?url=ваша ссылка«>текст гиперссылки</a>

▶▶▶Поделиться в Вконтакте!◀◀◀

●●●

PS Если вы хотите, чтобы ссылка открывалась в новом окне, что вы, скорее всего, хотите, то вам нужно вставить тег target=«_blank« после ссылки. Смотрите пример ниже.

Ссылка в формате HTML: <a href=«https://www.pro-smm.com/» target=«_blank»>Читать блог Про СММ!</a>

Читать блог Про СММ!

●●●

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

Екатерина Фролова

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

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

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

Вариант 1

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

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

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

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

Вариант 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

» Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

Наконец-то решил добавить статью в рубрику Bootstrap 3.
Что же в этой статье вас ждет?
Я расскажу и покажу, как создать красивые иконки и кнопки социальных сетей, используя шрифты иконок Font Awesome

С чего начать?

Подключите Font Awesome к вашему проекту. Если вы не помните, как это сделать, почитайте вот эту статью.
Скачайте bootstrap-social.css и закиньте его в папку «CSS». Подключите bootstrap-social.css (добавьте код между тегами <head>здесь код</head>):

<link href="css/bootstrap-social.css" rel="stylesheet">

Добавление кнопки или иконки:

Кнопка (btn-social)


<a>
<span></span> Sign in with Twitter
</a>

Результат будет вот таким:

Иконка (btn-social-icon)


<a>
<span></span>
</a>

Результат будет вот таким:

Попробую все объяснить.

Желтым цветом я выделит тот кусок CSS класса, который отвечает за цвет кнопки.
Зеленым – тот кусок CSS класса, который отвечает за саму кнопку:

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

Список внешнего вида кнопок и иконок

Sing in with App.net

Цвет btn-adn
Класс иконки fa-adn


<a>
<span></span> Sing in with App.net
</a>

Цвет btn-bitbucket
Класс иконки fa-bitbucket


<a>
<span></span> Sign in with Bitbucket
</a>

Цвет btn-bitbucket
Класс иконки fa-dropbox


<a>
<span></span>Sign in with Dropbox
</a>

Цвет btn-facebook
Класс иконки fa-facebook


<a>
<span></span>Sign in with Facebook
</a>

Цвет btn-flickr
Класс иконки fa-flickr


<a>
<span></span> Sign in with Flickr
</a>

Цвет btn-foursquare
Класс иконки fa-foursquare


<a>
<span></span>Sign in with Foursquare
</a>

Цвет btn-github
Класс иконки fa-github


<a>
<span></span>Sign in with GitHub
</a>

Цвет btn-google
Класс иконки fa-google


<a>
<span></span> Sign in with Google
</a>

Цвет btn-instagram
Класс иконки fa-instagram


<a>
<span></span> Sign in with Instagram
</a>

Цвет btn-linkedin
Класс иконки fa-linkedin


<a>
<span></span>Sign in with LinkedIn
</a>

Цвет btn-microsoft
Класс иконки fa-microsoft


<a>
<span></span> Sign in with Microsoft
</a>

Цвет btn-odnoklassniki
Класс иконки fa-odnoklassniki


<a>
<span></span> Sign in with Odnoklassniki
</a>

Цвет btn-openid
Класс иконки fa-openid


<a>
<span></span>Sign in with OpenID
</a>

Цвет btn-pinterest
Класс иконки fa-pinterest


<a>
<span></span> Sign in with Pinterest
</a>

Цвет btn-reddit
Класс иконки fa-reddit


<a>
<span></span>Sign in with Reddit
</a>

Цвет btn-soundcloud
Класс иконки fa-soundcloud


<a>
<span></span>Sign in with SoundCloud
</a>

Цвет btn-tumblr
Класс иконки fa-tumblr


<a>
<span></span> Sign in with Tumblr
</a>

Цвет btn-twitter
Класс иконки fa-twitter


<a>
<span></span> Sign in with Twitter
</a>

Цвет btn-vimeo
Класс иконки fa-vimeo


<a>
<span></span>Sign in with Vimeo
</a>

Цвет btn-vk
Класс иконки fa-vk


<a>
<span></span>Sign in with VK
</a>

Цвет btn-yahoo
Класс иконки fa-yahoo


<a>
<span></span> Sign in with Yahoo!
</a>

Я думаю, отдельно создавать таблицу для иконок не нужно. Достаточно заменить класс «btn-social» на «btn-social-icon» и все!

Размеры кнопок и иконок

btn-lg большая кнопка


<a>
<span></span>
</a>

кнопка по умолчанию


<a>
<span></span>
</a>

btn-sm маленькая кнопка


<a>
<span></span>
</a>

btn-xs очень маленькая кнопка


<a>
<span></span>
</a>

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

OJS: кнопки соцсетей | Независимое научное интернет-издание

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

В данном материале мы расскажем о том, как добавить кнопки социальных сетей в сайт на OJS (Open Journal Systems).

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

Для этого Вам нужно предпринять несколько шагов:

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

1. Выбираем сервис, настраиваем виджет, получаем код

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

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

В качестве примера можем воспользоваться кнопками от Яндекса.

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

2. Добавляем код в страницы сайта OJS

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

Чтобы расположить кнопки социальных сетей вверху страницы отдельной статьи на сайте, открываем файл в директории /templates/article/article.tpl и добавляем наш код после строки:

p id=”authorString”>{$article->getAuthorString()|escape}

Чтобы расположить кнопки социальных сетей внизу страницы отдельной статьи на сайте, в этом же файле /templates/article/article.tpl добавляем наш код после строки:

{call_hook name=”Templates::Article::MoreInfo”}

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

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

Результат будет приблизительно такой:

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

Управление журналом >>> Установка >>> 5. Внешний вид журнала >>> 5.4 Нижний колонтитул страницы журнала с помощью кнопки «HTML». Более детально см. здесь.

Еще один способ отобразить код на всех страницах сайта — добавить его в файлы шаблона, которые отвечают за «шапку» сайта templates/common/header.tpl и «подвал» сайта templates/common/footer.tpl. Дополнительные файлы шаблона также можно найти в директории: lib/pkp/templates/common/ … место отображения Вы можете выбрать на свое усмотрение.

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

3. Настраиваем отображение логотипа для соцсетей

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

Правильный образец:

Чтобы решить эту проблему, нужно создать изображение логотипа журнала (сайта, организации и пр.). Желательно квадрат 200х200 точек в формате PNG с название латиницей, например, «logo».

Далее нужно загрузить изображение с ПК в файлы OJS. Для этого идем: Управляющий журнала >>> Установка >>> Внешний вид журнала.

В любом из полей нажимаем кнопку «загрузить фото» (см. скриншот ниже). Загружаем с ПК наш файл.

Изображение появится в визуальном редакторе. После этого нужно или отменить действие (Ctrl + Z) или просто удалить изображение любым удобным способом. Оно уже было загружено на сервер.

Загруженное таким способом изображение в формате PNG и названием «logo» будет иметь приблизительно такой адрес: http://your-site.com/public/site/images/admin/logo.png

Далее закрываем «Внешний вид журнала» без всяких сохранений и в административной панели идем: Управляющий журнала >>> Установка >>> 1. Детали .

В пункте «1.8 Индексация для поисковых машин» находим поле «Теги пользователя» и вставляем в него следующий код, содержащий ссылку на наше изображение:

Не забываем дублировать в остальных языковых версиях сайта и сохранить изменения.

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

В конце можно (на всякий случай) очистить кэш шаблона… Для этого идем в «Администрирование сайта» и нажимаем «Очистить кэш шаблонов»…

Надеемся, данная информация будет полезной. С уважением. Участники House-science.

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

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

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

Как работает алгоритм Инстаграма

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

Компания выделяет 6 факторов, определяющих выдачу в ленте и Историях Инстаграма (первые три фактора влияют сильнее):

Интерес

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

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

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

Вам в помощь: Как использовать статистику Инстаграма для продвижения и раскрутки аккаунта

Время публикации

Публикации, сделанные недавно, появляются в выдаче выше.

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

Связи

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

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

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

Частота захода в приложение

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

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

Количество подписок

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

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

Активность

Поведение пользователя в приложении также влияет на выдачу: как глубоко он просматривает ленту и сколько времени на это тратит. Если обычно человек пролистывает первые 5-10 постов и закрывает приложение, Инстаграм будет показывать в этих первых постах то, что пользователю интереснее.

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

Чем отличается бизнес-аккаунт от личного

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

Бизнес-профиль магазина @nut_mafia и личный аккаунт редактора Максима Ильяхова @glvrdru

Вот главные отличия.

Контактная информация

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

Блок контактов в профиле @setters.me

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

Статистика

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

Владельцам бизнес-аккаунта в Инстаграме доступен раздел Статистики

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

Промоакции

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

Нажмите «Продвигать» или «Промоакции» и запустите рекламу в Инстаграме

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

Настройка рекламы публикации в Инстаграме

Проще всего отслеживать результаты рекламы в рекламном кабинете Facebook, но больше данных в мобильном приложении Facebook Ads Manager. Здесь можно скачать его на Android и iOS.

Здесь собраны ваши рекламные кампании и статистика по ним

Фильтр личных сообщений

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

Работу с сообщениями в бизнес аккаунтах упрощают фильтры

Как подключить бизнес-аккаунт в Инстаграме (и как вернуться на личный)

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

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

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

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

Настройка бизнес-аккаунта в Инстаграме

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

Здесь можно переключиться на личный аккаунт или аккаунт автора

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

Как добавить кнопки призыва к действию (CTA-кнопки)

Начиная с мая 2018 года владельцы бизнес-аккаунтов в Инстаграме могут использовать CTA-кнопки и ускорить процесс заказа через специальные сервисы, например Eventbrite, Booksy и другие.

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

Вы можете добавить кнопки:

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

Чтобы добавить CTA-кнопку, на главной странице нажмите «Редактировать профиль» и в разделе «Общедоступная информация о компании» перейдите в пункт «Кнопки действий». Выберите интересующую кнопку, затем нужный сервис из списка и добавьте URL вашего аккаунта в этом сервисе.

CTA-кнопка появится в профиле сразу после того, как вы ее добавите — ее всегда можно изменить или удалить

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

Как использовать блок контактов

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

Чтобы добавить кнопку в блок контактов, на главной странице профиля нажмите «Редактировать профиль» и дальше в раздел «Общедоступная информация о компании → Способы связи». Добавьте один или несколько способов, которые вы готовы предложить клиентам.

Контакты будут видны в аккаунте под основной информацией профиля

При нажатии на кнопку «Контакты» пользователь сможет выбрать, как именно с вами связаться. Если он кликнет на «Позвонить», на его смартфоне откроется стандартное приложения для звонков с вашим номером телефона. А если нажмет на «Эл. письмо», откроется почтовое приложение. Автоматически создастся новое письмо и в поле адресата будет вставлен email вашей компании.
Если обновить приложение Инстаграм до последней версии, у вас появится доступ к кнопке «Общаться в видеочате».

Блок контактов в профиле @intheair_moscow

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

Какие форматы рекламы доступны в Инстаграме

Кроме рекламы постов, которую можно запустить прямо из приложения, используйте Facebook Ads Manager. Там возможности для настройки рекламной кампании шире.

Facebook Ads Manager позволяет запустить 3 различных типа продвижения в Инстаграме.

Реклама поста с одним фото или кольцевой галереей

Рекламу постов можно запустить из приложения Инстаграма или через Facebook Ads Manager. Настраивайте цель и аудиторию, добавьте CTA-кнопку, которая ведет в интернет-магазин, и отслеживайте эффективность.

Настройка рекламы публикации

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

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

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

Видеореклама

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

Реклама в Историях

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

Продвижение в Историях Инстаграма — под названием аккаунта надпись «Реклама»

Как заранее планировать публикации

Если раньше можно было делать это только через сторонние сервисы, то сейчас Фэйсбук позволил планировать публикации в Инстаграм через кабинет Creator Studio. Чтобы воспользоваться инструментом, нужно привязать к нему свой бизнес-аккаунт.

Зайдите в Creator Studio.
Нажмите на иконку Инстаграма в верхнем меню.
Подключите свой бизнес-аккаунт в Инстаграм.
Появится инструментарий для создания постов и Историй — можно заполнить всю информацию и выставить время публикации.

Привяжите аккаунт своего магазина в Инстаграме к Creator Studio

Как добавить больше активных ссылок в Инстаграм

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

Ссылка в описании профиля

Самый простой способ добавить активную ссылку. В бизнес-аккаунте нажмите на «Редактировать профиль» и вставьте url в поле «Сайт».

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

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

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

Рекламная публикация

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

В первом случае кнопка откроет ссылку на профиль в Инстаграме, а во втором — на сайт магазина

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

Ссылки в Инстаграм-историях

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

@afourcustom использует активные ссылки в Инстаграм-историях

Сторонние приложения

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

Попробуйте создать такие страницы с Linktree или Taplink. Посмотрите, как используют Taplink интернет-магазин 4fresh:

@4fresh_rus разместил в профиле ссылку на такую страницу

Как отмечать товары в постах и Историях Инстаграма

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

Отмечать товары можно и в новых, и в старых постах

Читайте подробнее, как подключить «Покупки в Инстаграме».

Ставить шоппинг-теги, ведущие на сайт, можно не только в постах, но и в Историях:

при редактировании кликните на иконку наклеек;
выберите наклейку «Товар»;
кликните на нужный товар из каталога;
переместите наклейку товара в нужное место в истории и опубликуйте.

Выберите наклейку товара, чтобы добавить товары из каталога в историю

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

Нужно ли размещать виджеты соцсетей на сайте?

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

Поговорим отдельно про кнопку лайка. У каждой соцсети свое название этого виджета. В сети «Вконтакте» он называется «Мне нравится», в Фейсбуке — Like, в одноклассниках — «Класс!».

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

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

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

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

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

У «Твиттера» нет кнопки лайка, вместо нее у сервиса есть виджет «Твитнуть», но это аналог репоста.

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

Наша почта:
Единая справочная: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Оставить заявку

В Instagram появилась функция восстановления «недавно удаленных» публикаций

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

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

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

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

В пресс-службе «Одноклассников» рассказали, что, если пользователь по ошибке удалил не ту публикацию в ОК, ее можно восстановить, только до того, как пользователь покинул сайт или перезагрузил страницу. «Рядом с надписью «Заметка удалена», появится кнопка «Восстановить». Эта функция доступна только в десктопной версии сайта», — пояснили в соцсети.

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Войдите в свою учетную запись Twitter
В левом столбце щелкните Конфиденциальность и безопасность
Прокрутите вниз до раздела Личные сообщения и установите флажок рядом с Получать личные сообщения от кого угодно
В левом столбце щелкните Ваши данные Twitter. Для доступа к этому экрану может потребоваться ввести пароль.
Выберите и скопируйте свой идентификатор пользователя, который отображается под вашим именем пользователя
Перейти к публикации.twitter.com, прокрутите вниз и нажмите кнопок Twitter
Нажмите Кнопка сообщения
Введите свое имя пользователя в верхнем поле, включая символ @ (например, @Hootsuite).
Вставьте свой идентификатор пользователя в нижнее поле
Нажмите Предварительный просмотр
Над полем кода нажмите Установите параметры настройки
Введите свои предпочтения для параметров твита и размера кнопки, затем нажмите Обновить
Скопируйте и вставьте предоставленный код в свой HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перейдите в конструктор виджетов Pinterest и нажмите кнопку «Сохранить»
Выберите желаемые параметры размера и формы кнопки
В новом окне браузера перейдите на страницу вашего веб-сайта, где отображается изображение, с которым вы хотите работать.
Скопируйте и вставьте URL этой веб-страницы в поле URL в конструкторе виджетов
На своей веб-странице щелкните правой кнопкой мыши изображение, с которым хотите работать, и выберите Копировать URL-адрес изображения
Вставьте URL-адрес изображения в поле Изображение в конструкторе виджетов
Введите описание изображения в поле Описание в конструкторе виджетов.Он появится под вашим изображением, когда кто-то сохранит его в Pinterest
Щелкните образец Pin It в конструкторе виджетов, чтобы протестировать кнопку
Скопируйте код кнопки и вставьте его в свой HTML
Скопируйте и вставьте скрипт pinit.js из нижней части страницы конструктора виджетов в свой HTML, прямо над тегом

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

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

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

Hootsuite

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

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

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

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

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

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

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

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

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

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

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

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

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

Опции кнопки обмена Hootsuite

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

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

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

кнопок следования — AddToAny

AddToAny кнопки перехода связываются с вашими профилями в социальных сетях и позволяют подписку на ваши RSS-каналы.

В WordPress перейдите в «Настройки»> «Виджеты» (или «Настроить»), затем добавьте виджет «AddToAny Follow» в свою тему.

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

Укажите идентификатор профиля, который будет использоваться в атрибуте data-a2a-follow службы, как в следующих примерах.

Поддерживаемые сервисные ссылки

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

поведение
facebook
flickr
четырехугольник
гитхаб
инстаграм
linkedin
linkedin_company
средний
картинки
снэпчат
тамблер
твиттер
vimeo
YouTube
youtube_channel

Ссылки на другие услуги

Поддерживаются и другие служебные значки.Просто укажите URL-адрес для ссылки в атрибуте href .

Кнопки подписки на RSS-канал

Укажите URL-адрес канала в атрибуте data-a2a-url , как в следующем примере.

Совет : Вы можете включить ссылки социальных сетей в свои кнопки подписки.

GitHub — bradvin / social-share-urls: URL-адреса социальных сетей

Этот проект призван помочь вам интегрировать совместное использование в социальных сетях в ваш код. Мы активно этим занимаемся с 2013 года.

Что мы стараемся предоставить:

Библиотеки исходного кода : предоставить базовые утилиты для создания этих ссылок на социальные сети в любой среде, которая вам нужна.
- В настоящее время поддерживаются библиотеки на следующих языках: JavaScript, PHP, Python, Java, Golang, ReactJS, C ++, C, MySQL, C #, Ruby, VB.Net, Perl, Swift, Objective-C.
- Документация: Каждая библиотека имеет свои собственные демонстрационные версии, онлайн-песочницы и образцы кода.
- Хотите узнать о коде? Проверьте это: https://github.com/bradvin/social-share-urls/tree/master/code
Иконки : общественное достояние и разрешенная лицензия, с потрясающим разрешением 450x450 .
Регулярно тестируемые базовые форматы URL-адресов для популярных социальных сетей : Прямая ссылка на страницы общего доступа / лайка в этих социальных сетях с заполняемым URL-адресом, текстом и другими параметрами.
- Например: example.com/someSocialMediaSite/share?url=yourWebsiteURL&text=someMessageAboutYourSite .
- URL-адресов сгруппированы по категориям ( многоязычный , телефонный , электронный и т. Д.).
- Каждая категория URL-адресов отсортирована по Alexa -ранг. Знайте, что важно, не отслеживая информацию.
Справочные источники : Для каждой службы, формата URL и набора параметров, чтобы вы могли быть уверены в этих ссылках и узнать больше, если вам нужно сделать что-то более интересное.
- Мы включаем первоисточники (официальная документация или официальные блоги разработчиков). Мы стараемся предоставить хотя бы один из них для каждой услуги.
- Мы также включаем вторичные источники (например, обсуждения на форуме или вопросы StackOverflow). Мы стараемся предоставлять по крайней мере три из них для каждой услуги.
История : Эй, мы уже давно здесь, wh00! Загляните на нашу страницу истории!

Просто хотите понять суть?

Хотите загрузить только URL-адреса из этого проекта?

Тогда загляните в наш GitHub Gist: https: // gist.github.com/HoldOffHunger/1998b92acb80bc83547baeaff68aaaf4

Демо

Некоторые сайты, использующие этот проект:

Поддерживаемые социальные сети

Многоязычные социальные сети

Социальные сети не на английском языке

Телефон / социальные сети на основе аудио

Социальные сети на основе электронной почты

Локальные / личные социальные сети

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

Аргументы URL

Ваш URL должен быть помещен в параметр url ; если он недоступен, вам нужно будет создать сообщение о своем URL-адресе и поместить это сообщение в параметры title или text .

К твиту добавлено

Аргумент	Описание	используется
{url}	Ссылка в кодировке URL, которой вы хотите поделиться. Сервис может отклонить ссылку, если она не закодирована.	GoogleBookmarks, Facebook, Reddit, Twitter, LinkedIn, Tumblr, Pinterest, Blogger, LiveJournal, EverNote, GetPocket, HackerNews, Digg, FlipBoard, InstaPaper, SurfingBird, Diaspora, Line.me, Skype, Telegram.me, QZone, VK, Weibo , OKru, Douban, XING, RenRen, GMail, Yahoo, WordPress
{title}	Заголовок страницы с URL-адресом, которым вы хотите поделиться.	GoogleBookmarks, Reddit, Tumblr, Blogger, LiveJournal, EverNote, HackerNews, FlipBoard, InstaPaper, SurfingBird, Diaspora, VK, Weibo, Douban, RenRen, EMail, GMail, Yahoo, WordPress
{текст}	Более подробное описание содержимого, которым вы делитесь.	GoogleBookmarks, Twitter, Tumblr, Blogger, InstaPaper, SurfingBird, SMS, Line.me, Skype, Telegram.me, VK, RenRen, Threema, EMail, WordPress
{hash_tags}	хэштегов (через запятую.не включайте «#»).	GoogleBookmarks, Twitter, Tumblr
{user_id}	Имя пользователя / идентификатор конкретного пользователя в социальной сети.	Twitter, Threema
{email_address}	Куда направлена социальная доля. Скорее всего, вы захотите оставить это поле пустым, чтобы пользователь мог его заполнить.	Электронная почта, GMail, Yahoo
{image}	URL-адрес изображения / миниатюры для использования при публикации.	SurfingBird, WordPress
{phone_number}	Применимый номер телефона, если он есть.	SMS, Whatsapp
{app_id}	Идентификатор приложения.	Facebook
{redirect_url}	URL-адрес, на который будет перенаправлен участник совместного использования после успешного обмена.	Facebook
{page_type}	Тип страницы: «страница» или «всплывающее окно».	Facebook
{категория}	Раздел, в который нужно отправить публикацию / комментарий.	Flattr

Многоязычные социальные сети

Facebook

Глобальный рейтинг: 4 (9 мая 2020 г.)

Facebook (с Sharer)

Параметры: u .

  https://www.facebook.com/sharer.php?u={url}

Источник:

Официальный источник:
Неофициальный источник:
Примечания к тестам: Нет.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2013 , 2016 , 2018 , 2020 .

Facebook (с диалоговым окном «Поделиться»)

Параметры: app_id , page_type , href , redirect_url .

  https://www.facebook.com/dialog/share?app_id={app_id}&display={page_type}&href={url}&redirect_uri={redirect_url}

Источник:

Глобальный рейтинг: 19 (9 мая 2020 г.)

Параметры: url , title .

  https://reddit.com/submit?url={url}&title={title}

Источник:

Твиттер

Глобальный рейтинг: 47 (9 мая 2020 г.)

Параметры: url , текст , через , хэштеги .

  https://twitter.com/intent/tweet?url={url}&text={title}&via={user_id}&hashtags={hash_tags}

Источник:

Глобальный рейтинг: 60 (9 мая 2020 г.)

Параметры: url .

  https://www.linkedin.com/sharing/share-offsite/?url={url}

Источник:

Глобальный рейтинг: 71 (5 мая 2020 г.)

Параметры: телефон , текст .

https://api.whatsapp.com/send?phone={phone_number}&text={title}%20{url} whatsapp: // send /? Text = {text}% 20 {url} https: // wa.я / {phone_number}? text = {title}% 20 {url}

Источник:

Официальный источник: WhatsApp: как использовать щелчок для общения в чате
Неофициальный источник:
Примечания к тесту: wa.me не работает, если не указан phone_number, поэтому по этой причине мы предлагаем пользователям использовать формат api.whatsapp.com.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2020 .

`Tumblr`

Глобальный рейтинг: 115 (9 мая 2020 г.)

Параметры: canonicalUrl , заголовок , заголовок , теги .

  https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}&title={title}&caption={text}&tags={hash_tags}

Источник:

Официальный источник: Tumblr: Опубликовать в Tumblr
Неофициальный источник:
Примечания к тесту: Требуется вход в систему.Описанный языковой параметр ( data-locale ) оказался неэффективным (и, следовательно, здесь не указан).
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2013 , 2016 , 2018 , 2020 .

`Pinterest`

Глобальный рейтинг: 152 (9 мая 2020 г.)

Параметры: url .

  http: // pinterest.com / pin / create / button /? url = {url}
http://pinterest.com/pin/create/link/?url={url}

Источник:

Официальный источник: Pinterest: кнопка «Сохранить»
Неофициальный источник:
Примечания к тесту: Требует от пользователя выбора изображения для «закрепления» URL-адреса.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2013 , 2016 , 2018 , 2020 .

`Blogger`

Глобальный рейтинг: 208 (9 мая 2020 г.)

Параметры: u , n , t .

  https://www.blogger.com/blog-this.g?u={url}&n={title}&t={text}

Источник:

Официальный источник: Невозможно найти.
Неофициальный источник:
Примечания к тесту: Требуется вход в систему, блог, привязанный к вашей учетной записи blogger, и либо отсутствие URL-адреса , либо URL-адрес , идеально отформатированный с протоколами (http / https и т. Д.)).
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`EverNote`

Глобальный рейтинг: 371 (9 мая 2020 г.)

Параметры: url , title .

  https://www.evernote.com/clip.action?url={url}&title={title}

Источник:

Официальный источник: Невозможно найти.
Неофициальный источник:
Примечания к тесту: Для работы требуется вход в систему. Обновление 2020: Подтверждение не требуется, пользователь нажимает ссылку, и она буквально создает «заметку» в «записной книжке по умолчанию», что кажется проблемой безопасности. Что касается тестирования, то это означает, что вы не сможете напрямую увидеть ссылку, которой пытаетесь поделиться, и должны перейти к «записной книжке по умолчанию».
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`Живой Журнал`

Глобальный рейтинг: 446 (9 мая 2020 г.)

Параметры: тема , событие .

  http://www.livejournal.com/update.bml?subject={title}&event={url}

Источник:

`GetPocket`

Глобальный рейтинг: 940 (9 мая 2020 г.)

Параметры: url .

  https: // getpocket.ru / edit? url = {url}

Источник:

Официальный источник: getPocket: Pocket Button Documentation
Неофициальный источник:
Примечания к тесту: Относительно URL-адреса Параметр: Невозможно найти официальный источник. Обновление 2020 года: как ни странно, здесь тоже нет подтверждения.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`HackerNews`

Глобальный рейтинг: 5,603 (9 мая 2020 г.)

Параметры: u , t .

  https://news.ycombinator.com/submitlink?u={url}&t={title}

Источник:

`FlipBoard`

Глобальный рейтинг: 6,302 (9 мая 2020 г.)

Параметры: заголовок , url .

  https: // поделиться.flipboard.com/bookmarklet/popout?v=2&title={title}&url={url}

Источник:

Официальный источник: FlipBoard: Социальные плагины
Неофициальный источник:
Примечания к тесту: Требуется вход в систему и правильно отформатированный URL-адрес с протоколом http / https.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`Google Закладки`

Глобальный рейтинг: 13,206 (9 мая 2020 г .; сайт: chrome.com)

Параметры: bkmk , заголовок , аннотация , ярлыки .

  https://www.google.com/bookmarks/mark?op=edit&bkmk={url}&title={title}&annotation={text}&labels={hash_tags}

Источник:

`InstaPaper`

Глобальный рейтинг: 32,169 (9 мая 2020 г.)

Параметры: url , заголовок , описание .

  http://www.instapaper.com/edit?url={url}&title={title}&description={text}

Источник:

`Диаспора`

Глобальный рейтинг: 300660 (9 мая 2020 г.)

Параметры: заголовок , url .

  https://share.diasporafoundation.org/?title={title}&url={url}

Источник:

`Социальные сети не на английском языке`

`QZone`

Глобальный рейтинг: 5 (9 мая 2020 г.)

Язык: Китайский.

Параметры: url .

  http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}&summary={text}

Источник:

`Weibo`

Глобальный рейтинг: 16 (16 мая 2020 г.)

Язык: Китайский.

Параметры: url , title .

  http://service.weibo.com/share/share.php? url = {url} & appkey = & title = {title} & pic = & ralateUid =

Источник:

Официальный источник: Weibo: ShareCode
Неофициальный источник:
Примечания к тесту: Не требует входа в систему или установки программного обеспечения, обслуживание было ненадолго приостановлено в начале 2020 года.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`ВК`

Глобальный рейтинг: 22 (9 мая 2020 г.)

Язык: Русский.

Параметры: url , заголовок , комментарий .

  http://vk.com/share.php?url={url}&title={title}&comment={text}

Источник:

`OKru`

Глобальный рейтинг: 62 (9 мая 2020 г.)

AKA: AKA «Одноклассники» (англ .: «Одноклассники»).

Язык: Русский.

Параметры: st.shareUrl .

  https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl={url}

Источник:

`Дубан`

Глобальный рейтинг: 284 (9 мая 2020 г.)

Язык: Китайский.

Параметры: имя , текст , комментарий .

  http://www.douban.com/recommend/?name={title}&text={text}&comment={url}&href={url}

Источник:

`RenRen`

Глобальный рейтинг: 1,220 (9 мая 2020 г.)

AKA: Сяонэй.

Язык: Китайский.

Параметры: resourceUrl , srcUrl , заголовок , описание .

  http: // виджет.renren.com/dialog/share?resourceUrl={url}&srcUrl={url}&title={title}&description={text}

Источник:

`XING`

Глобальный рейтинг: 1,749 (9 мая 2020 г.)

Язык: Немецкий.

Параметры: url .

  https://www.xing.com/spi/shares/new?url={url}

Источник:

Официальный источник:
Неофициальный источник:
Примечания к тесту: Для работы требуется вход в систему и точно отформатированный URL-адрес (с параметрами протокола http / https).
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`Трима`

Глобальный рейтинг: 20,144 (9 мая 2020 г.)

Язык: Немецкий.

Параметры: текст , id .

  threema: // compose? Text = {url} & id = {user_id}

Источник:

Официальный источник: Threema: Threema Gateway> Developers> Threema Message API
Неофициальный источник:
Примечания к тесту: Если user_id не указан, пользователю предлагается выбрать контакт, а затем заполняется сообщение с текстовым параметром.Если вам нужно протестировать приложение, не платя за него, здесь есть бесплатные пробные версии: https://work.threema.ch/en/offers . Особая благодарность Threema за предоставление бесплатных учетных данных разработчикам Social Share для тестирования Threema.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2018 .

`Телефон / социальные сети на основе аудио`

`SMS`

Глобальный рейтинг: НЕТ

Параметры: смс , корпус .

  смс: {phone_number}? Body = {url} {text}

`Skype`

Глобальный рейтинг: 175 (9 мая 2020 г.)

Параметры: url , текст .

  https://web.skype.com/share?url={url}&text={text}

Источник:

Официальный источник: Невозможно найти.
Неофициальный источник:
Примечания к тесту: Для работы требуется вход в систему.Обновление 2020: обязательно отключите uBlock Origin при тестировании, иначе Skype будет заблокирован.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`Line.me`

Глобальный рейтинг: 237 (9 мая 2020 г.)

Параметры: url , текст .

  https://lineit.line.me/share/ui?url={url}&text={text}

Источник:

Официальный источник: Плагины социальных сетей Line
Неофициальный источник:
Примечания к тесту: Для работы требуется вход в систему и идеально отформатированный URL-адрес с параметрами протокола (http / https и т. Д.). Для создания учетной записи требуется установка программного обеспечения. Вышеописанные параметры URL не указаны в официальной документации.
Результаты тестирования: Функциональность протестирована и подтверждена разработчиками SocialShare в 2016 , 2018 , 2020 .

`Telegram.me`

Глобальный рейтинг: 328 (9 мая 2020 г.)

Параметры: url , текст .

  https: // т.мне / поделиться / url? url = {url} & text = {text}
https://telegram.me/share/url?url={url}&text={text}.
tg: // msg_url? url = {url} & text = {текст}

`Социальные сети на основе электронной почты`

`электронная почта`

Глобальный рейтинг: НЕТ

Параметры: mailto , тема , тело .

  mailto: {email_address}? Subject = {title} & body = {url} {text}

Источник:

`GMail`

Глобальный рейтинг: 1 (9 мая 2020 г.)

Параметры: до , su , body , bcc , cc .

  https://mail.google.com/mail/?view=cm&to={email_address}&su={title}&body={url}&bcc={email_address}&cc={email_address}

Источник:

`Yahoo`

Глобальный рейтинг: 12 (9 мая 2020 г.)

Параметры: до , субъект , корпус .

  http://compose.mail.yahoo.com/?to={email_address}&subject={title}&body={url}

Источник:

`Локальные / личные социальные сети`

`WordPress`

Глобальный рейтинг: НЕТ

Параметры: u , t , s , i .

  http://www.example.com/website_where_you_installed_wordpress/wp-admin/press-this.php?u={url}&t={title}&s={text}&i={image}

Источник:

`Устаревшие URL-адреса социальных сетей`

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

Используйте на свой страх и риск.

`AIM`

`Baidu`

`Вкусный`

`EchoJS`

`FBMessenger`

Ссылки не удалось 2018 . На эту услугу поступают многочисленные активные жалобы, которые можно обнаружить, просто выполнив поиск в Интернете.
- fb-messenger: // поделиться? Link = {url} & app_id = {app_id}

`FriendFeed`

`Google+`

`Mail.ru`

`MySpace`

`NewsVine`

`Пинг.FM`

`ScoopIt`

`SinaWeibo`

`SlashDot`

`StumbleUpon / Микс`

`Viber`

`Digg`

`Добавить`

`Буфер`

`Flattr`

`SurfingBird`

`Добавление социальных сетей — Lightspeed eCommerce`

Вы можете добавить параметры социальных сетей, такие как кнопки Facebook Like и AddThis , на страницы вашего магазина. Если вы используете файлы cookie — например, для Google Analytics — ваши клиенты должны дать согласие на использование файлов cookie, прежде чем кнопки социальных сетей будут отображаться вместе с продуктами.

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

`Для добавления в социальные сети`

В левом меню бэк-офиса выберите Настройки> Настройки веб-сайта> Социальные сети .
Активируйте опции, которые вы хотите использовать.

Facebook	Отображает кнопку «Нравится», чтобы товары, которые нравились вашим клиентам, отображались на их стене Facebook. Для этого вам не нужна учетная запись Facebook.
Твиттер	Добавьте свою учетную запись Twitter (без @), чтобы добавить кнопку Twitter к своим продуктам. Клиенты могут щелкнуть здесь, чтобы подписаться на ваши твиты.
Google+	Добавьте URL своей компании Google+, чтобы кнопка Google+ отображалась под вашими продуктами. Когда посетители щелкают значок +1, продукт отображается в их обзоре +1. Чтобы использовать это, вам не нужна учетная запись Google+.
Pinterest	Клиенты могут щелкнуть «Закрепить», чтобы отобразить изображения из вашего интернет-магазина в своей учетной записи Pinterest.Изображения содержат ссылку на исходный источник, поэтому посетители делятся изображениями ваших продуктов и ссылкой на ваш интернет-магазин.
Добавить	Добавьте номер своего счета. AddThis позволяет вашим посетителям распространять страницы ваших продуктов через Facebook, Twitter, Pinterest и другие социальные сети.
ВКонтакте	Добавьте свой API-идентификатор VK.com. ВКонтакте — российская социальная сеть. Вы можете найти свой API ID на сайте VK.com в разделе «Настройки»> «Общие» в разделе « Адрес вашей страницы» .Установите флажок Статус, чтобы отображать кнопку социальных сетей ВКонтакте в вашем интернет-магазине.

`Добавление других социальных сетей`

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

Чтобы узнать, как изменить вашу тему, обратитесь к документации вашей темы.

В левом меню бэк-офиса щелкните Дизайн .
Щелкните Редактор тем и измените свою тему.

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

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

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

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

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

`Hipstamatic`

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

После того, как вы свяжете свою учетную запись Instagram с Hipstamatic и решите поделиться, ваша фотография автоматически появится в Instagram.Если для вашей фотографии включены теги, Hipstamatic автоматически добавит теги в подпись. Под вашей подписью будет указано авторство («Снято на Hipstamatic»). Нажатие на «Hipstamatic» направит вас к приложению, если оно уже установлено на вашем телефоне, или к странице Hipstamatic App Store, если вы его еще не установили.

`ミクシィ / Mixi (Япония) (iOS)`

Имейте в виду, что «ミクシィ / Mixi» не будет отображаться в параметрах общего доступа, если для языка или формата региона вашего телефона не задан японский язык.Формат региона не меняет язык вашего телефона; он изменяет только способ отображения дат и чисел.

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

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

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

Перейдите в настройки телефона и затем нажмите Общие > Язык и Регион > Регион .
Выберите Japan из списка.
Выберите Готово > Продолжите и вернитесь в Instagram.

На экране Sharing теперь вы должны увидеть Mixi как одну из доступных служб.

`Weibo (Китай) / 新浪微博 (iOS)`

Имейте в виду, что «新浪微博 / Weibo» не будет отображаться в параметрах общего доступа, если для языка или формата региона вашего телефона не установлен китайский. Формат региона не меняет язык вашего телефона; он изменяет только способ отображения дат и чисел.

Чтобы настроить общий доступ к Weibo:

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

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

Перейдите в настройки вашего телефона и затем нажмите Общие > Язык и регион > Регион .
Выберите Китай .
Выберите Готово > Продолжите и вернитесь в Instagram.

На экране Sharing теперь вы должны увидеть Weibo как одну из доступных служб.

`цветов социальных сетей — шестнадцатеричные и RGB-цвета Интернета — элементы дизайна`

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

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

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

	Facebook Синий Hex: # 3b5998 RGB: 59, 89, 152 Другие цвета Facebook
	Twitter Синий Hex: # 55acee RGB: 85, 172, 238 Другие цвета Twitter
	TikTok Pink Hex: # 55acee RGB: 85, 172, 238 Другие цвета TikTok
	YouTube Red (обновлено в 2017 г.) Hex: # ff0000 RGB: 255, 0, 0 Другие цвета нового логотипа YouTube
	Linkedin Синий Hex: # 007bb5 RGB: 0, 123, 181
# fccc63	Instagram Красный Оранжевый Hex: # e95950 RGB: 233, 89, 80 Другие цвета нового логотипа Instagram
	WhatsApp Green Hex: # 4dc247 RGB: 77, 194, 71
	Pinterest Красный Hex: # cb2027 RGB: 203, 32, 39
	Snapchat Желтый Hex: # fffc00 RGB: 255, 252, 0
	Quora Burgundy Шестнадцатеричный: # a82400 RGB: 168, 36, 0
	Dropbox Синий Hex: # 007ee5 RGB: 0, 126, 229
	Flickr Pink Hex: # ff0084 RGB: 255, 0, 132
	Tumblr Темно-бирюзовый Hex: # 32506d RGB: 50, 80, 109
	VK Синий Hex: # 45668e RGB: 69, 102, 142
	Vimeo Green Hex: # aad450 RGB: 170, 212, 80 Другие цвета Vimeo
	Синий логотип Foursquare Hex: # 0072b1 RGB: 0, 114, 177
	Зеленый Spotify Шестнадцатеричный: # 00e461 RGB: 0, 228, 97
	Github Black Hex: # 000000 RGB: 0, 0, 0
	Behance Blue Hex: # 1769ff RGB: 23, 105, 255
	RSS Оранжевый Hex: # ff6600 RGB: 255, 102, 0
	Reddit Orange Hex: # ff4500 RGB: 255, 69, 0 Другие цвета Reddit
	Google+ Красный Hex: # dd4b39 RGB: 221, 75, 57
	Виноградно-зеленый Hex: # 00bf8f RGB: 0, 191, 143

СМОТРИ ТАКЖЕ: векторные логотипы социальных сетей и шрифты социальных сетей

Мы пропустили веб-сайт, который вы хотели бы добавить? Пожалуйста, дайте нам знать в комментариях ниже!

`Обновления`

`9 декабря, 2020`

Старые соцсети перенесены в самый низ.Добавлен TikTok Pink и полная цветовая палитра TikTok.

`2 апреля, 2017`

Добавлен Reddit Orange и полная цветовая палитра Reddit.

`13 февраля, 2016`

Обновлен Twitter Blue и добавлены Spotify Green, GitHub Black, Behance Blue и RSS Orange.

`1 сентября, 2015`

Добавлена полная палитра цветов Instagram.

`31 августа, 2015`

Исправленный Instagram Blue и LinkedIn Blue. Добавлены WhatsApp Green и Dropbox Blue.

`9 июля, 2014`

Добавлены Vine Green и Snapchat Yellow.

`17 января 2013 г.`

Добавлен цвет для Quora Burgundy.

`29 декабря, 2012`

Исправлены цвета для Twitter Blue, Google+ Red, Vimeo Green, Linkedin Blue, Instagram Blue, Flickr Pink, Tumblr и Foursquare. Источники были процитированы для Facebook Blue, Twitter Blue, Google+ Red, YouTube Red, Vimeo Green, Linkedin Blue, Instagram Blue, Pinterest Red, Flickr Pink, Tumblr Dark Turquoise и Foursquare Logo Blue.

`Источники`

`цветов социальных сетей на 2021 год: HEX-коды, RGB, SASS`

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

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

Вам нужны переменные SASS или LESS вместо значений HEX или RGB? Они у нас тоже есть. Воспользуйтесь нашими быстрыми ссылками, чтобы перейти к нижней части страницы.

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

`Быстрые ссылки на цвета социальных сетей в HEX и RGB по алфавиту`

`Facebook`

Синий шестигранник: # 1877f2

RGB: 24, 119, 242

`Твиттер`

Синий шестигранник: # 1da1f2

RGB: 29, 161, 242

# aab8c2 RGB (170, 184, 194)

# e1e8ed RGB (225, 232, 237)

# f5f8fa RGB (245, 248, 250)

`YouTube`

Красный шестигранник: # ff0000

RGB: 255, 0, 0

#ffffff RGB (255, 255, 255)

`Instagram`

Пурпурный шестнадцатеричный: # c32aa3

RGB: 195, 42, 163

# ffdc7d RGB (255, 220, 125)

`Pinterest`

Красный шестигранник: # bd081c

RGB: 189, 8, 28

`LinkedIn`

Синий шестигранник: # 0a66c2

RGB: 10, 102, 194

#ffffff RGB (255, 255, 255)

# f0b6a8 RGB (240, 182, 168)

`Google`

Синий шестигранник: # 4285f4

RGB: 66, 133, 244

`Snapchat`

Желтый шестигранник: # fffc00

RGB: 255, 252, 0

#ffffff RGB (255, 255, 255)

`WhatsApp`

Зеленый шестигранник: # 25d366

RGB: 37, 211, 102

# dcf8c6 RGB (220, 248, 198)

`Tumblr`

Синий шестигранник: # 35465d

RGB: 54, 70, 93

`Reddit`

Оранжевый шестигранный: # ff4500

RGB: 255, 69, 0

# cee3f8 RGB (206, 227, 248)

`TikTok`

Черный шестигранник: # 010101

RGB: 1, 1, 1

# 69c9d0 RGB (105, 201, 208)

#ffffff RGB (255, 255, 255)

`Yelp`

Красный шестигранник: # d32323

RGB: 211, 35, 35

`Мастодонт`

Синий шестигранник: # 2b90d9

RGB: 43, 144, 217

# 9baec8 RGB (155, 174, 200)

# d9e1e8 RGB (217, 225, 232)

`Spotify`

Зеленый шестигранник: # 1ed760

RGB: 30, 215, 96

#ffffff RGB (255, 255, 255)

`Яблоко`

Серый шестигранник: # a6b1b7

RGB: 166, 177, 183

#bbbbbb RGB (187, 187, 187)

#ffffff RGB (255, 255, 255)

`Amazon`

Оранжевый шестигранный: # ff9900

RGB: 255, 153, 0

`Алекса`

Синий шестигранник: # 00a7ce

RGB: 0, 167, 206

#ffffff RGB (255, 255, 255)

`Microsoft`

Красный шестигранник: # f35022

Красный RGB: 243, 80, 34

Зеленый шестигранник: # 80bb03

Зеленый RGB: 128, 187, 3

Синий шестигранник: # 03a5f0

Синий RGB: 3, 165, 240

Желтый шестигранник: # ffb903

Желтый RGB: 255, 185, 3

`Перископ`

Синий шестигранник: # 40a4c4

RGB: 64, 164, 196

# 7cd6f1 RGB (124, 214, 241)

# a4b8be RGB (164, 184, 190)

`Foursquare`

Розовый шестигранник: # f94877

Розовый RGB: 249, 72, 119

`Рой`

Оранжевый шестигранный: # ffa633

RGB: 255, 166, 51

`Среднее`

Зеленый шестигранник: # 02b875

RGB: 2, 184, 117

#ffffff RGB (255, 255, 255)

# e8f3ec RGB (232, 243, 236)

`Vimeo`

Синий шестигранник: # 1ab7ea

RGB: 26, 183, 234

#ffffff RGB (255, 255, 255)

`Skype`

Синий шестигранник: # 00aff0

RGB: 0, 175, 240

`Android`

Зеленый шестигранник: # a4c639

RGB: 164, 198, 57

`Quora`

Бордовый шестигранник: # aa2200

RGB: 170, 34, 0

#ffffff RGB (255, 255, 255)

`Дриббл`

Шестигранный розовый: # ea4c89

RGB: 234, 76, 137

# 9ba5a8 RGB (155, 165, 168)

`Slack`

Фиолетовый шестигранник: # 4a154b

RGB: 74, 21, 75

`StumbleUpon`

Оранжевый шестигранный: # e94826

RGB: 233, 72, 38

# e4e5e7 RGB (228, 229, 231)

`Flickr`

Шестигранный розовый: # f40083

Розовый RGB: 244, 0, 131

Синий шестигранник: # 006добавить

Синий RGB: (0, 106, 221)

`Yahoo`

Фиолетовый шестигранник: # 6001d2

RGB: 96, 1, 210

`Twitch`

Фиолетовый шестигранник: # 9146ff

RGB: 145, 70, 255

# f0f0ff RGB (240, 240, 255)

`Soundcloud`

Оранжевый шестигранный: # ff5500

RGB: 255, 85, 0

`DeviantArt`

Зеленый шестигранник: # 05cc47

RGB: 5, 204, 71

# d4f5de RGB (212, 245, 222)

`Карман`

Розовый шестигранник: # ee4056

RGB: 238, 64, 86

# 9bcfcc RGB (155, 207, 204)

# 83edb8 RGB (131, 237, 184)

`SlideShare`

Оранжевый шестигранный: # e68523

Оранжевый RGB: 230, 133, 35

Синий шестигранник: # 00a0dc

Синий RGB: 0, 160, 220

`500 пикселей`

Синий шестигранник: # 0099e5

RGB: 0, 153, 229

#ffffff RGB (255, 255, 255)

`ВК`

Синий шестигранник: # 4a76a8

RGB: 74, 118, 168

# edeef0 RGB (237, 238, 240)

# f7f8fa RGB (247, 248, 250)

`Steam`

Шестигранный ВМС: # 171A21

RGB: 23, 26, 33

# 66c0f4 RGB (102, 192, 244)

# c7d5e0 RGB (199, 213, 224)

`Discord`

Blurple Hex: # 7289da

RGB: 114, 137, 218

#ffffff RGB (255, 255, 255)

# 99aab5 RGB (153, 170, 181)

`Телеграмма`

Синий шестигранник: # 0088cc

RGB: 0, 136, 204

`Ясность`

Синий шестигранник: # 61bed9

RGB: 97, 190, 217

`Лист`

Оранжевый шестигранный: # df6d46

Оранжевый RGB: 223, 109, 70

Синий шестигранник: # 52b1b3

Синий RGB: (82, 177, 179)

`HomeAdvisor`

Оранжевый шестигранный: # f89000

RGB: 248, 144, 0

`Houzz`

Зеленый шестигранник: # 4dbc15

RGB: 77, 188, 21

`Список Энджи`

Зеленый шестигранник: # 29a036

RGB: 41, 160, 54

`Стеклянная дверь`

Зеленый шестигранник: # 0caa41

RGB: 0, 175, 65

`Закрытые социальные сети`

Это фирменные цвета для неактивных социальных сетей.

`Google+`

Красный шестигранник: # db4437

RGB: 219, 68, 55

`Виноградная лоза`

Зеленый шестигранник: # 00b489

RGB: 0, 180, 137

`Цвета социальных сетей: переменные Sass`

 
/ **
 * Переменные Sass
 * Цвета брендов в социальных сетях
 * /

$ facebook: # 1877f2;
$ facebookold: # 3b5998;
$ twitter: # 1da1f2;
$ youtube: # ff0000;
$ instagrammagenta: # c32aa3;
$ instagramblue: # 4c5fd7;
$ instagrampurple: # 7232bd;
$ instagramorange: # f46f30;
$ instagramyellow: # ffdc7d;
$ googleblue: # 4285f4;
$ googlered: # ea4335;
$ googleyellow: # fbbc05;
$ googlegreen: # 34a853;
$ pinterest: # bd081c;
$ googleplus: # db4437;
$ linkedin: # 0a66c2;
$ vimeoblue: # 1ab7ea;
$ tumblr: # 2c4762;
$ snapchat: # fffc00;
$ whatsappgreen: # 25d366;
$ whatsappteal1: # 075e54;
$ whatsappteal2: # 128c7e;
$ tiktokblack: # 010101;
$ tiktookblue: # 69c9d0;
$ tiktokpink: # ee1d52;
$ tiktokwhite: #fff;
$ mastodon: # 2b90d9;
$ яблоко: # a6b1b7;
$ amazon: # ff9900;
$ alexablue: # 00a7ce;
$ alexadkblue: # 232f3e;
$ microsoftred: # f35022;
$ microsoftgreen: # 80bb03;
$ microsoftblue: # 03a5f0;
$ microsoftyellow: # ffb903;
$ перископ: # 40a4c4;
$ foursquarepink: # f94877;
$ foursquarenavy: # 073282;
$ foursquareblue: # 2d5be3;
$ yelp: # d32323;
$ swarm: # ffa633;
$ medium: # 02b875;
$ skypeblue: # 00aff0;
$ skypedkblue: # 0078d7;
$ android: # a4c639;
$ stumbleupon: # e94826;
$ flickrpink: # f40083;
$ flickrblue: # 006add;
$ yahoo: # 430297;
$ twitch: # 9146ff;
$ soundcloud: # ff5500;
$ spotifygreen: # 1ed760;
$ spotifydarkgreen: # 1db954;
$ dribbble: # ea4c89;
$ slackpurple: # 4a154b;
$ slackblue: # 36c5f0;
$ slackgreen: # 2eb67d;
$ slackred: # e01e5a;
$ slackyellow: # ecb22e;
$ reddit: # ff5700;
$ deviantart: # 05cc47;
$ pocket: # ee4056;
$ quora: # aa2200;
$ quorablue: # 2b6dad;
$ slideshareorange: # e68523;
$ slideshareblue: # 00a0dc;
Пятьсот пикселей: # 0099e5;
$ vk: # 4a76a8;
$ listlyorange: # df6d46;
$ listlyblue: # 52b1b3;
$ Vine: # 00b489;
$ steam: # 171a21;
$ discord: # 7289da;
Телеграмма $: # 0088cc;
$ ясность: # 61bed9;
$ homeadvisor: # f89000;
$ houzz: # 4dbc15;
$ angieslist: # 29a036;
$ glassdoor: # 0caa41;

`Цвета социальных сетей: МЕНЬШЕ переменных`

 
/ **
 * МЕНЬШЕ переменных
 * Цвета социальных сетей
 * /

@facebook: # 1877f2;
@facebookold: # 3b5998;
@twitter: # 1da1f2;
@youtube: # ff0000;
@instagrammagenta: # c32aa3;
@instagramblue: # 4c5fd7;
@instagrampurple: # 7232bd;
@instagramorange: # f46f30;
@instagramyellow: # ffdc7d;
@googleblue: # 4285f4;
@googlered: # ea4335;
@googleyellow: # fbbc05;
@googlegreen: # 34a853;
@pinterest: # bd081c;
@googleplus: # db4437;
@linkedin: # 0a66c2;
@vimeoblue: # 1ab7ea;
@tumblr: # 2c4762;
@snapchat: # fffc00;
@whatsappgreen: # 25d366;
@ whatsappteal1: # 075e54;
@ whatsappteal2: # 128c7e;
@tiktokblack: # 010101;
@tiktookblue: # 69c9d0;
@tiktokpink: # ee1d52;
@tiktokwhite: #fff;
@mastodon: # 2b90d9;
@apple: # a6b1b7;
@amazon: # ff9900;
@alexablue: # 00a7ce;
@alexadkblue: # 232f3e;
@microsoftred: # f35022;
@microsoftgreen: # 80bb03;
@microsoftblue: # 03a5f0;
@microsoftyellow: # ffb903;
@periscope: # 40a4c4;
@foursquarepink: # f94877;
@foursquarenavy: # 073282;
@foursquareblue: # 2d5be3;
@yelp: # d32323;
@swarm: # ffa633;
@medium: # 02b875;
@skypeblue: # 00aff0;
@skypedkblue: # 0078d7;
@android: # a4c639;
@twitch: # 9146ff;
@stumbleupon: # e94826;
@flickrpink: # f40083;
@flickrblue: # 006add;
@yahoo: # 430297;
@soundcloud: # ff5500;
@spotifygreen: # 1ed760;
@spotifydarkgreen: # 1db954;
@dribbble: # ea4c89;
@slackpurple: # 4a154b;
@slackblue: # 36c5f0;
@slackgreen: # 2eb67d;
@slackred: # e01e5a;
@slackyellow: # ecb22e;
@reddit: # ff5700;
@deviantart: # 05cc47;
@pocket: # ee4056;
@quora: # aa2200;
@quorablue: # 2b6dad;
@slideshareorange: # e68523;
@slideshareblue: # 00a0dc;
@ пятьсот пикселей: # 0099e5;
@vk: # 4a76a8;
@listlyorange: # df6d46;
@listlyblue: # 52b1b3;
@vine: # 00b489;
@steam: # 171a21;
@discord: # 7289da;
@telegram: # 0088cc;
@clarity: # 61bed9;
@homeadvisor: # f89000;
@houzz: # 4dbc15;
@angieslist: # 29a036;
@glassdoor: # 0caa41;

Какие еще цвета социальных сетей следует указать здесь? Позвольте мне знать в комментариях ниже.

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

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

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

Фейсбук

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

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

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

NEW! Плагин страницы

Блок «Подписаться на страницу»

Твиттер

Кнопка «Читать»

Кнопка «Твитнуть»

Кнопка «Хэштег»

Кнопка «Упомянуть»

Виджеты Твиттер

Вконтакте

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

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

Виджет «Сообщество»

Виджет «Подписаться на автора»

Другие виджеты Вконтакте

LinkedIn

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

Кнопка «Подписаться» на компанию

Кнопка «Личный профиль»

Другие плагины LinkedIn

Google+

Кнопка +1

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

Значок Google+

Pinterest

Кнопка «Pin it»

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

Бонус: гиперссылки

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

Вариант 1

Вариант 2

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

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

Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

Список внешнего вида кнопок и иконок

Размеры кнопок и иконок

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

Последние новости категории:

Похожие статьи

Популярные статьи:

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

OJS: кнопки соцсетей | Независимое научное интернет-издание

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

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

Как работает алгоритм Инстаграма

Интерес

Время публикации

Связи

Частота захода в приложение

Количество подписок

Активность

Чем отличается бизнес-аккаунт от личного

Контактная информация

Статистика

Промоакции

Фильтр личных сообщений

Как подключить бизнес-аккаунт в Инстаграме (и как вернуться на личный)

Как добавить кнопки призыва к действию (CTA-кнопки)

Как использовать блок контактов

Какие форматы рекламы доступны в Инстаграме

Реклама поста с одним фото или кольцевой галереей

Видеореклама

Реклама в Историях

Как заранее планировать публикации

Как добавить больше активных ссылок в Инстаграм

Ссылка в описании профиля

Рекламная публикация

Ссылки в Инстаграм-историях

Сторонние приложения

Как отмечать товары в постах и Историях Инстаграма

Нужно ли размещать виджеты соцсетей на сайте?

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

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

В Instagram появилась функция восстановления «недавно удаленных» публикаций