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

Социальные кнопки на сайт с WordPress или любых других сайтов с помощью плагина или кода HTML.

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

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

Содержание показать

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

Я понимаю, что такие кнопки необходимы для сайта.

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

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

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

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

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

Итак, начнем устанавливать кнопки поделиться для сайта.

Для своего блога в Tumblr я буду устанавливать кнопки поделиться от компании SUMO, почему именно SUMO? Все просто, инструменты для развития сайта от этой компании я использую уже давно на моем блоге WordPress, и мне нравятся эти инструменты. А установить их на любой сайт проще простого.

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

Первым делом Вам нужно зарегистрироваться в компании, это очень просто и я скажу Вам, что это очень выгодно. Почему выгодно? Дело в том, что компания Sumo (AppSumo), это не только социальные кнопки и другие инструменты для развития сайтов.

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

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

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

Evernote, Dropbox, и MailChimp, и др.

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

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

Начало регистрации в Sumo:

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

Откройте эту ссылку (Ваш браузер откроет её в новой вкладке)

На открывшейся странице выберите самый первый бесплатный тариф и нажмите на кнопку Sign Up
На открывшейся странице заполните форму регистрации. Написав в первой строке URL Вашего сайта. У меня это https://poisk.tumblr.com/

Ниже напишите Ваш email, еще ниже придумайте и напишите пароль (запишите его себе для памяти, он еще понадобится)

Или используйте для регистрации Ваш аккаунт в Google, нажав на соответствующую кнопку. Я регистрируюсь с помощью email, поэтому заполняю полностью все строчки. Нажимаю Sign Up.

Начало регистрации в сервисе Sumo
Заполните форму

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

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

Над кодом есть подсказка, куда нужно вставить этот код.

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

Очень удобно.

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

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

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

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

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

Изменить тему Tumblr

На открывшейся странице я нажимаю на фразу Изменить HTML

Здесь меняется код шаблона блога Tumblr
Нажимаю изменить HTML

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

Место в коде куда вставить код кнопок
Вставить код как показано на изображении

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

Если Вы на этом примере устанавливаете код Sumo в рукописный сайт или на сайт созданный в некоторых других CMS, Вам можно уже приступать к активации инструментов SUMO, (с Вашими email и паролем) активировать и настраивать социальные кнопки и другие инструменты.

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

Отключить мобильную версию
Отключил использование стандартной мобильной версии

Вот, собственно говоря, и вся установка инструментов Sumo на любой сайт на примере блога Tumblr.

Я перехожу на мой сайт https://poisk.tumblr.com/ и что я вижу? Я вижу маленькую синюю полоску с правой стороны окна. При наведении на которую появляется кнопка Sumo с их короной, нажав на которую, я вижу появившуюся форму авторизации, где я должен написать свои email и пароль указанные при регистрации и нажать Log In. После авторизации открывается панель инструментов Sumo, где я могу начать активировать и настраивать нужные мне инструменты для развития сайта.

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

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

Почему?

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

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

Что, расстроились?

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

Итак, игнорируем пока форму подписки и наводим курсор на вкладку SOCIAL, нажимаем Share

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

Открывается поле, где нажимаем на зеленую кнопку Activate Now для инструмента кнопки Поделиться.

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

Подключить Фейсбук и добавить аккаунт Твиттер

Где нужно нажать на кнопку Connect и подключиться к Вашему аккаунту в Фейсбук и ниже в строке Twitter прописать Ваш логин там. После этого в нижней части страницы нажать SAVE.

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

Настройка социальных кнопок в конструкторе Sumo
В конструкторе социальных кнопок я выбираю нужные мне кнопки и делаю другие настройки

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

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

Мне это подходит, но не устраивает надпись на английском Share, не нужна кнопка поделиться на email и мне нужны социальные кнопки от Вконтакте и Одноклассники.

Чтобы это исправить, я методом «перетащил и бросил», из левого окна (Available Services) в правое (Selected Services), перетаскиваю кнопки Вконтакте и Одноклассники, а кнопку поделиться на электронную почту, перетаскиваю в левое окно.

Для изменения слова Share, я нахожу строку с этим словом в разделе Shares Label ниже в панели настроек и заменяю его на слово Кликни. Основные настройки социальных кнопок я сделал. Сохраняю настройки, нажав Save. Открываю блог и вижу, что появились социальные кнопки для соцсетей Вконтакте и Одноклассники, не стало кнопки поделиться на email и слово Share изменилось на Кликни.

Обратите внимание на количество социальных кнопок, которые Вы выбрали и выберите это количество в строке Services Shown, раздела Services, чтобы все Ваши кнопки показывались.

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

В разделе Buttons, можно изменить размер и стиль кнопок, сделать отступ между кнопками, прописав в пикселях.

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

Остальные настройки в разделе Mobile у меня включены.

Вкладка настроек социальных кнопок Layout

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

Вкладка Mobile Optimized

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

На вкладке Display Rules

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

Вкладка Tracking

Эта вкладка отслеживания в бесплатной версии инструментов Sumo, не работает.

Вкладка URL Shortener

В бесплатной версии не работает.

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

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

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

Как пользователям поделиться выделенным текстом Ваших статей в социальных сетях?

Опять знакомая вкладка SOCIAL, выберите опцию Highlighter и активируйте её. После этого, откройте любую страницу Вашего сайта и выделите текст, появится форма с выделенным текстом, которым Ваши посетителе смогут легко поделиться в Твиттер и Фейсбук.

Это все инструменты вкладки SOCIAL, от Sumo.

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

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

«Автор: Леонид Никитин»

Поделитесь с друзьями

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *