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

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

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

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

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

Добавление на сайт на WordPress

Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.

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

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

Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.

Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.

В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.

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

Кнопки от Pluso

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

Еще один вариант – Share42

Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.

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

Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

Google +1

Google +1 позволяет пользователям проголосовать за страницу вашего портала и рассказать о ней своим друзьям в социальной сети Google+. Чем больше голосов она соберет, тем лучше к ней будет относится Google, поэтому старайтесь выбирать размер для нее по-больше и располагать на видном месте.

Настройте размер и внешний вид кнопки, выберете русский язык. Расширенные настройки вам вряд ли пригодятся. Как видите, получит социальные кнопки от Яндекс и Google очень легко и быстро. Буквально два клика мыши, и все готово!

AddThis.com предлагает разместить оранжевую кнопку Share (или оранжевый +), содержащую огромное количество всевозможных социальных сетей, закладок и сервисов. Самые популярные социалки можно вынести из общего списка и поместить отдельно рядом с Share. Помимо этого, сервис предлагает аналитику и статистику по активности читателей. Для доступа к ней на addthis.com следует зарегистрироваться.

Если вы все правильно сделали и папка со скриптом действительно загружена в корневой каталог, то ее адрес будет http://vash_site.ru/share42/. Укажите его в пункте 3 раздела «Установка скрипта на сайт».

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

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

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

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

Последнее, что следует сделать, это скопировать стили из шага №6 в файл стилей вашего сайта — с расширением.css. Чаше всего этот файл носит название style.css.

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

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

Первый код отвечает за функционал кнопок, его вставляем перед закрывающим тегом head, который в темах для WordPress располагается в шаблоне header.php.

< script src= "//yandex.st/share/cnt.share.js" >

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

< div class = "yashare-auto-init" data- yashareLink= "" data- yashareTitle= "" data- yashareDescription= "" data- yashareImage= "" data- yashareQuickServices= "yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data- yashareTheme= "counter" data- yashareType= "small" >

Обратите внимание на атрибут data-yashareType="small". Здесь задается размер иконок: small — маленький, big — большой. Все гениальное просто.

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

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

Код кнопки состоит из двух частей:

1. Скрипта, заключенного между тегами имеющими примерно следующий вид:

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

На этом все, спасибо за внимание. Берегите себя!

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

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

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

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

Что представляет собой обычная социальная кнопка?

Для примера возьмем скрипт социальной кнопки ВКонтакте. Ее код:

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

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


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

Варианты легкого размещения

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


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


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

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


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

Социальные кнопки и WordPress

Для популярных CMS создано множество плагинов групповой установки социальных кнопок. Рассмотрим пример установки плагина Social Share Buttons for WordPress .

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

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

1) Заходим в административную панель сайта. Слева выбираем вкладку «Плагины », «Добавить новый ».
2) На странице «Установить плагины » в поисковое поле вводим название расширения и нажимаем на кнопку «Поиск плагинов »:


3) В результатах поиска находим имя нужного расширения. После чего нажимаем на ссылку «Установить»:


4) После загрузки архива и установки активируем плагин нажатием соответствующей ссылки:


5) После его активации в левой консоли инструментов появится новый раздел «Share Buttons »:


Настройки плагина состоят из нескольких пунктов:

Еще несколько проверенных плагинов для WordPress :

  • Fixed Social buttons – этот плагин позволяет добавить на сайт плавающую социальную панель, которую можно «прилепить» сверху, снизу или сбоку;
  • Html Social share buttons – данный плагин включает в себя социальные кнопки, созданные исключительно с помощью css и html.
Социальные кнопки и Joomla

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

  • Поддержка всех наиболее популярных версий движка;
  • Простота настройки;
  • Характеристики внешнего вида задаются для каждой кнопки отдельно;
  • Малый вес инсталляционного пакета.

Порядок действий:

1) Заходим в административную часть сайта на Joomla и выбираем значок «Менеджер расширений ».
2) Здесь определяемся с источником для загрузки расширения:


3) После инсталляции расширения переходим в «Менеджер плагинов » и активируем только что установленное расширение. Для этого нужно нажать на зеленый значок вверху страницы:


4) Для настройки нажимаем на имя расширения в списке. В данном плагине настройки отображения задаются для каждой социальной кнопки отдельно:


Еще несколько проверенных расширений для Joomla:

  • Social Bookmarking – данный плагин существует сразу в нескольких версиях. Каждая позволяет расположить социальную панель в определенном положении (горизонтально, вертикально, или вообще сделать ее плавающей );
  • JL Like – этот плагин не производит дополнительную загрузку внешних скриптов, позволяет вести статистику голосов из социальных сетей.
Скрипт или плагин?

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

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

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

Код социальных кнопок можно получить на одном из специализированных сервисов. Их обзор представлен выше. Для примера возьмем сервис Share42 . Он поддерживает создание социальных кнопок для популярных движков. Порядок действий.

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

Соцкнопки необходимы, это очевидно. Вопрос в другом - какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель - выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

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

Состав команды аттестуемых таков:

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

Особенности кнопок uSocial

Приведем некоторые факты , убедившие нас в правильности принятого решения.


Шаг-2

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

Здесь же можно активировать кнопку "Вверх", включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

Шаг-4

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

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

Примеры кода микроразметки для популярных социальных сетей (код нужно прописывать перед тегом ):

1. Facebook и Вконтакте используют Open Graph protocol:





3. Для Twitter код выглядит так:



4. Для Google+ так:

- cсылка на профиль автора в Google+
- название сайта
- текст сниппета (до 40 символов)
- описание сайта
- путь к файлу изображения

Инструменты для работы с микроразметкой.