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

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

Почти у каждой компании сегодня есть сайт и даже блог. А у вас есть сайт? Надеюсь, что да! Если еще нет, то об этом нужно срочно задуматься! Ну с блогерами и обладателями свободных профессий (консультанты и фрилансеры) и так понятно, у них обязательно есть свой адрес в интернете — веб-сайт. Друзья, проблема в том, что мало какие сайты реально оптимизированы под социальные сети. Они могут производить кучу очень полезного и интересного контента, но их никто не видит и не слышит. 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 — если вы желаете, чтобы кнопки показывали посетителю вашего сайта аватарки его друзей, кто уже кликнул на кнопку «Нравится», то поставьте галочку в этом пункте. Если никто из друзей не лайкнул страницу, статью и т. д., то Фейсбук не будет отображать фото, а в тексте предложит пользователю стать первым, кому это понравилось. Если вам позволяет место, то я рекомендую включать эту опцию, так как лица друзей положительно влияют на восприятие контента читателем, увеличивая его доверие и часто толкая его также кликнуть на кнопку, хотя бы из солидарности.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка +1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

текст гиперссылки

Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже - то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?

тогда ссылка в соц.сети будет выглядеть так:

Здесь «Сегодня день Рождения allsoft.ru - 8 лет:)» - текст написанный пользователем, остальное - информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share , остальные соц.сети тоже их вполне понимают.

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

Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.

New Ya.share({ element: "ya_share_normal", elementStyle: { "type": "none", "quickServices": ["facebook","twitter","odnoklassniki","vkontakte","moimir"] }, link: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: { twitter: { title: "Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" } } });
1. Здесь ya_share_normal - id элемента на странице (), в котором будет появляться блок с социальными кнопками, link - ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:

и 4 блока кода в JavaScript, как указано выше.

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

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

Преимущества и недостатки

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

Недостатки

Может снизиться скорость загрузки страниц.

При узкоспециализированной направленности интернет-проекта, можно не получить желаемого эффекта.

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

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

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

Сервис предлагает более трехсот вариантов разных кнопок! Можно очень просто выбрать наиболее понравившиеся.

Установка происходит буквально в один клик. Имеется статистика переходов.

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

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

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

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

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

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

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

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

P.S. Спасибо за внимание. А какой сервис предпочитаете вы? Жду ваши комментарии. :)

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

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

Каковы возможности и функции?

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

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

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

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

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

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

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

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

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

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

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

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

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

Отличное отображение на любом устройстве (Да, они адаптивные под любой размер экрана)

Чистый код - быстрый и безопасный сайт (загружается только скрипт, CSS и Шрифт, которые лежат только у вас на сервере)

Все share-технологии мобильных мессанджеров в одном скрипте (Telegram`ы всякие,)

SEO friendly - без ссылок

Не содержит картинок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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