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

Содержание
  1. В чём преимущество собственных социальных кнопок перед сервисами и плагинами
  2. Зачем добавлять кнопки соцсетей для сайта?
  3. Как установить кнопку Like (Мне нравится) от Facebook
  4. ЕЩЁ
  5. Кнопки социальных сетей от uSocial.pro
  6. Разновидности кнопок соцсетей для сайта
  7. Коды HTML для добавления кнопки соцсетей на сайте
  8. 8 вариантов размещения кнопок соцсетей на сайте
  9. МЕНЮ
  10. Плагин Easy Buttons
  11. Что такое социальные кнопки для сайта и зачем они нужны?
  12. СЕРВИС SHARE42.COM
  13. Кнопки поделится в соц. сетях от самых популярных сервисов
  14. Кнопка «Поделиться» ВКонтакте
  15. Facebook кнопка «Поделиться»
  16. Делаем кнопку «Поделиться» в одноклассниках
  17. Share42
  18. Добавление кнопки соцсетей на сайт с помощью «Яндекса»
  19. Как добавить/установить кнопки соцсетей на сайт WordPress без плагина?
  20. Плагин Easy Yandex Share
  21. Настройки плагина Easy Yandex Share
  22. Что такое кнопки социальных сетей на сайте
  23. Добавить кнопки путём ручной вставки кодов
  24. Выравниваем
  25. Плагин Slick Social Share

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

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


Скорость загрузки

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

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


Нет внешних ссылок

Зачем добавлять кнопки соцсетей для сайта?

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

Преимущества таких кнопок:

  1. Бесплатная реклама вашей статьи.
  2. Привлечение дополнительного трафика на сайт.
  3. Удобство для пользователя. Так он сможет сделать закладку у себя в соцсети на понравившийся материал и, например, прочитать позже.
  4. Увеличение ссылок на сайт и поведенческие факторы. (Для SEO)

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

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

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

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

Как установить кнопку Like (Мне нравится) от Facebook

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

В основном все понятно, но некоторые пункты требуют пояснения.

  • URL to Like — это первое поле, куда мы что-то можем написать. Здесь следует указывать ссылку, на которую будут вести все Like. Если же кнопка у Вас будет установлена «сквозняком» по всему сайту, то лучше это поле оставить пустым: в этом случае ссылка будет автоматически браться на статью, где была нажата. Так сделано на большинстве сайтов.
  • Send Button (XFBML Only) — довольно новая функция, которая позволяет отправить сообщение своему другу или знакомому сразу с посещаемого в данный момент сайта, т.е. Вашего. Насколько она нужна — решать Вам. Скажу, что работать она будет на Вашем сайте, если подключена библиотека JavaScript SDK.

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

Код из верхнего окошка (цифра 1) необходимо поместить в Ваш файл шаблона в пределах тега body (подчеркнуто красным). Facebook рекомендует это сделать в самом начале, поэтому открываем файл header.php (чаще всего здесь в шаблонах находится открывающий body) и вставляем весь код из первого окошка сразу после него.

Код из второго окошка отвечает непосредственно за отображение кнопки «Мне нравится» (Like). Поэтому подбираем место по своему усмотрению, но его обычно устанавливают перед статьей, либо после нее. Чтобы это сделать, нам нужно будет открыть файл single.php (если такого нет, то смотрите какой отвечает за вывод информации постов) и вставить предложенный код №2 в нужное место (обычно перед или после <?php the_content(); ?>).

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

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

Быстро глянул исходный код, погуглил и обнаружил авторский сайт — https://usocial.pro, на котором можно было бесплатно залогиниться через соцсети и сгенерировать кнопки основных соцсетей: Вконтакте, Google+, Твиттер, Одноклассники и т.п.

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

Особенно порадовала возможность делать именно «плавающие» кнопки соцсетей и при этом выбирать их положение: слева, справа и т.п.

Размещается код стандартно на сайте перед закрывающим тегом </body>, для этого понадобится доступ по FTP и знать, в каком файле у вас находится «подвал сайта», в WordPress это обычно footer.php в папке с шаблоном, уверен, что никаких проблем с добавлением возникнуть ни у кого не должно.

Разновидности кнопок соцсетей для сайта

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

  • Поделиться (share buttons). Данная разновидность кнопок работает как бесплатная реклама веб-ресурса. Виджет разрешает посетителям делиться с друзьями из соцсетей контентом с сайта, размещая ссылки на него в своем профиле. Новые пользователи проходят по этим ссылкам и таким образом увеличивают входящий трафик на сайт.
  • Подписаться (follow buttons). Эти кнопки выведут посетителей на группы в соцсетях, где они смогут оформить подписку на новости сайта. То есть соцсети в этом случае являются еще одной площадкой для информирования подписчиков о статьях, продуктах, предложениях веб-ресурса.


Подробнее

Коды HTML для добавления кнопки соцсетей на сайте

Социальные виджеты добавляются на веб-ресурс через код HTML конкретной соцсети.

  • <div class=»social youtube»>

    <a href=»#» target=»_blank»><i class=»fa fa-youtube fa-2x»></i></a>

    </div>

  • <div class=»social twitter»>

    <a href=»#» target=»_blank»><i class=»fa fa-twitter fa-2x»></i></a>

    </div>

  • <div class=»social instagram»>

    <a href=»#» target=»_blank»><i class=»fa fa-instagram fa-2x»></i></a>

    </div>

  • <div class=»social facebook»>

    <a href=»#» target=»_blank»><i class=»fa fa-facebook fa-2x»></i></a>

    </div>

  • <div class=»social skype»>

    <a href=»#» target=»_blank»><i class=»fa fa-skype fa-2x»></i></a>

    </div>

    Подробнее

  • <div class=»social vk»>

    <a href=»#» target=»_blank»><i class=»fa fa-vk fa-2x»></i></a>

    </div>

  • <div class=»social odnoklassniki»>

    <a href=»#» target=»_blank»><i class=»fa fa-odnoklassniki fa-2x»></i></a>

    </div>

  • <div class=»social pinterest»>

    <a href=»#» target=»_blank»><i class=»fa fa-pinterest fa-2x»></i></a>

    </div>

  • <div class=»social telegram»>

    <a href=»#» target=»_blank»><i class=»fa fa-paper-plane fa-2x»></i></a>

    </div>

  • <div class=»social whatsapp»>

    <a href=»#» target=»_blank»><i class=»fa fa-whatsapp fa-2x»></i></a>

    </div>

Если ваши знания в области HTML оставляют желать лучшего или вообще нулевые, то можно воспользоваться следующим алгоритмом:

Код виджета конкретной социальной сети включает три строчки. Начало строки —

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

8 вариантов размещения кнопок соцсетей на сайте


Подробнее

На сайте есть зоны, где размещение кнопок соцсетей не рекомендуется:

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

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Плагин Easy Buttons

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

Какие его возможности:

  1. Можно выбрать отображение (горизонтальное, вертикальное, снизу, сверху).
  2. Выбрать форму и размер кнопок.
  3. При клике выбрать либо открыть в новом окне страницу или же остаться в текущем.
  4. Добавление атрибута rel=”nofollow” (запретить индексацию поисковым роботам, очень удобная «фишка»).
  5. Добавить свою Rss ленту, а также подключить аккаунты социальных сетей.

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

Вот как выглядит админка плагина. Достаточно красиво и стильно.

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

Что такое социальные кнопки для сайта и зачем они нужны?

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

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

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

P.s. Я был бы очень благодарен, если бы вы добавляли статью которая вам понравится в социальные сети, это дело нескольких кликов . Спасибо!

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

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

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

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

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

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

На одном моем сайте я ставил вертикально, оно постоянно отвлекает внимание, создает чувство дискомфорта, а когда человек прочитает статью, не будет эффекта “ух-ты! кнопочки!”

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

Кодировка сайта и выбор языка – тут все понятно и думаю не требует объяснений. Затем вы можете поставить птичку на “добавить иконку сайта Share42.com” или убрать ее. Это просто вставляет в конце иконку на сайт создателя.

4. Кликайте на “Посмотрите, как это будет выглядеть”, чтобы убедится, что все в порядке. Бывает такое, что сервис глючит и на самом деле выдает не то, что надо (со мной такое было). В итоге, я хотел 5-7 кнопок, а мне давали всего 2 и я как дурак просто менял кнопки местами, отменял, а затем активировал их снова и вставлял код на сайт. Оказалось надо было просто перезапустить сам сайт.

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

6. Идем в установку и видим следующее:

Делаем все по инструкции. Вместо site.ru прописываем свой сайт. Указываем тип вашего сайта и вставляем шаблон кода сразу после статьи. Кликаем кнопку готово и идем смотреть на результат! Если все вышло, должно быть красиво .

СЕРВИС SHARE42.COM

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

Я решил выбрать следующие кнопки:

  • В контакте
  • Mail.ru
  • Blogger
  • Google plus
  • Livejournal

Размер решил выбрать средний 24х24. Далее можно поиграться с опциями.

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

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

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

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

Далее копируем код, который указан под пунктом 5 и вставляем его в страницу comments.php (Внешний Вид – Редактор – Comments.php) над формой отправки комментария. В моем случае вставляем вот здесь.

И в итоге мы имеем следующий вид.

Кнопки поделится в соц. сетях от самых популярных сервисов

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

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

share42.com – тоже мощнейший конструктор, позволяющий выбрать интересующие кнопки и настроить внешний вид блока «Поделиться». Если к сайту подключить библиотеку jQuery, то к кнопкам можно добавить счетчик, который будет подсчитывать количtство поделившихся.

Внешне такой блок с кнопками будет выглядеть примерно вот так:

share.pluso.ru – я довольно долгое время пользовался именно этими кнопками. Кнопки «Поделиться» от Pluso отлично настраиваются под дизайн сайта. Можно выбрать любые интересующие соц. сети и понравившийся дизайн кнопок.

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

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

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

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

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

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

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

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

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

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

Код будет состоять из двух частей. Первую часть необходимо вставить после открывающего тега <body>. Этим кодом вы включаете SDK для JavaScript.

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

Делаем кнопку «Поделиться» в одноклассниках

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

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

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

Share42

По количеству доступных социалок Share42, конечно уступает рассмотренному выше AddThis, но он подкупает красотой.

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

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

2. Далее идут параметры социальных иконок:

  • Тип панели с иконками — горизонтальный блок легче разместить, но плавающий вертикальный смотрится гораздо красивее и всегда находится на экране, поэтому читатель его обязательно заметит.
  • Кодировка вашего сайта — если не знаете кодировку, оставьте как есть: UTF-8.
  • Язык подсказок у иконок — русский сайт, следовательно и подсказки должны быть на русском.
  • Добавить иконку сайта Share42.com — добавить к выбранным социальным кнопкам иконку, ведущую на страницу автора скрипта — Share42.com.
  • Ссылка на RSS вашего сайта — данная опция будет активна, если вы выберете иконку RSS ленты. Напомню, RSS ленту новостей своего сайта обязательно следует добавить в сервис FeedBurner от Google.
  • К вашему сайту подключен jQuery? jQuery — это библиотека языка JavaScript предназначенная для создания всевозможных визуальных эффектов. Если не уверены, подключена она или нет — галочку не ставьте.

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

4. Установка скрипта на сайт.

Распакуйте полученный архив и загрузите полученную папку share42 на сервер в корневой каталог. Для работы с ftp могу посоветовать использовать бесплатную программу — FileZilla.

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

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

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

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

<script type="text/javascript">share42('http://site.ru/share42/',150,20)</script>

Далее его следует вставить «прямо перед или сразу после основного текста страницы». Для того же WordPress это сделать не составит труда: открываем поочередно шаблоны single.php, page.php и index.php и вставляем код сразу после строчки, отвечающей за вывод контента страницы. В моей теме WordPress она имеет вид:

?php the_content('Читать полностью'); ?>

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

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

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

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

Данные социальные кнопки предоставляет нам поисковая система Яндекс. Да-да, наш Яша способен куда на большее, чем просто блок «Поделиться». Для функционирования кнопок нам потребуется задействовать два кода.

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

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

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

<div class="yashare-auto-init" data-yashareLink="" data-yashareTitle="" data-yashareDescription="" data-yashareImage="" data-yashareQuickServices= data-yashareTheme="counter" data-yashareType="small"></div>

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

Все гениальное просто.

Добавление кнопки соцсетей на сайт с помощью «Яндекса»

Здесь виджеты соцсетей добавляются на интернет-ресурс по следующему алгоритму:

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


Подробнее

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

Как добавить/установить кнопки соцсетей на сайт WordPress без плагина?

Зайдите на страницу конструктора блока Поделиться — https://tech.yandex.ru/share/. Выберите сервисы социальных сетей (их довольно много), иконки которых будут отображаться на вашем веб-ресурсе и внешний вид блока:

Затем, копируете код и заходите в админпанели Внешний вид — Редактор тем. Открываете файл Отдельная запись (single.php) или в зависимости от вашей темы файл loop-single.php, content.php. Находим строчку <?php the_content(); ?> или похожею на неё и чуть ниже вставляем код соцкнопок. Обновляем файл. Кнопки будут расположены под каждым сообщением. Если не получается, то можно ориентироваться на код <?php comments_template(); ?> (форма комментариев) в файле Одна запись. Выше данной строчки добавляем скрипт соцкнопок.

Для того, чтобы иконки кнопок выравнять по центру, то оберните скрипт в теги <center>….</center>. Получится вот так:

Блок Поделиться после статьи

Таким же методом, можно добавить после статьи код рекламы РСЯ, ADSENSE или Рекомедуемый контент адсенсе

Обратите внимание что, после обновления вашей темы вам придётся вставлять код кнопок заново. Если у вас, друзья, не получается вывести блок кнопок на станицах записей, то советую воспользоваться плагином автоматического вывода блока «Яндекс.Поделиться» в WordPress

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

Конструктор кнопок соцсетей для сайта

Читайте о Рамблер / лайки здесь.

Плагин Easy Yandex Share

Вы можете настроить и добавить блок Поделиться на свой сайт с помощью Yandex Share.

Плагин Яндекс. Поделиться

Установка плагина стандартная, через админку. Плагины — Добавить новый. В поле поиска вводим Easy Yandex Share, устанавливаем и активируем. А далее переходим к его настройке. Продвинутый вывод блока Яндекс.Поделиться с кучей дополнительных настроек. 

Настройки плагина Easy Yandex Share

После того, как вы активируйте плагин в разделе Настройки появится новый пункт — Easy Yandex Share. Нажимаете на него и приступаете к настройкам блока Поделится в соцсетях. Модуль на русском языке, всё будет вам понятно. Здесь, больше настроек, чем в конструкторе Яндекс:

Настройки плагина Easy Yandex Share

Также выбираете соцсети (есть предпросмотр), внешний вид. Вывод блока соцкнопок до или после записи. Даже возможен вывод иконок соцсетей вертикально. Ещё хорошо — надпись к кнопкам можно свою написать. Так выглядит блок после статьи:

Блок Поделиться Яндекс после записи

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

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

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

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

А значит стоит его ранжировать повыше

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

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

Добавить кнопки путём ручной вставки кодов

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

Для начала вам нужно авторизоваться на сервисах Яндекса, можно войти в свою электронную почту, естественно Яндекса. Далее проходим вот по этой ссылке https://tech.yandex.ru/share/  и попадаем сюда:

Спускаемся чуть ниже и вот, то что нам нужно:

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

Там же вы можете сделать их с счётчиками, иконками и меню и уменьшенного размера.

Копируем код, который получился в окне ниже, далее будем работать с ним. Буду показывать на примере статьи: » Как раскрутить группу Вконтакте, Фейсбук, одноклассники и т.д«, советую её прочитать.

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

Например: «Спасибо, что поделились!» и выравниваем по центру.Далее переходим во вкладку текст

Находим в конце нашу запись «Спасибо, что поделились!» а ниже вот этот  код <p class=»buttond» style=»text-align: center;»></p>&nbsp; удаляем и вставляем наш скопированный код из Яндекса. Должно получиться вот так:

Обновляем страницу и получилось вот так

Выравниваем

Как-то не красиво получилось, раз мы уже влезли в код, давайте выровнием по центру. Эх была, не была! Шучу, нормально всё будет. Возвращаемся в наш редактор  и перед кодом нашего скрипта (скопированного кода в Яндексе) ставим код <center>  в начале и </center> в конце

Обновляем, и вот что получилось

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

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

Плагин Slick Social Share

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

  1. Тип «Floating» — плавающий тип кнопок, «Slide out» — находится за пределами. Если вы установите первый вариант то ваша кнопка будет перемещаться вместе с вами по странице, например вы спускаетесь вниз записи и блок с кнопками тоже. Во втором случае, кнопки будут закреплены строго в определенном месте, например, в записи.
  2. «Location» — здесь вы выбираете как будет размещаться ваша кнопка, или она будет вверху, либо снизу, либо внизу справа, внизу слева, вверху справа, вверху слева. Здесь уже поиграйтесь, чтоб удачно вписались кнопки в дизайн вашего шаблона блога.
  3. «Position from center». Также можно выбрать позицию относительно центра, установив галочку в соответствующем чекбоксе, т. е где бы вы не находились на странице, кнопка будет располагаться аккурат по центру, можно задавать размеры в пикселях (при включении разумеется).
  4. «Offset» (смещение) — указав параметры, можно сместить кнопку в определенное место.
  5. «Disable Floating Effects» — отключение плавающего эффекта, если хотите чтобы блок с кнопками у вас был фиксированным, т.е закрепленным в определенном месте.
  6. «Float Speed» — скорость плавающей кнопки. Рекомендуется не устанавливать слишком маленькое значение, поскольку «эффект» сразу теряется.
  7. «Slide Speed» — этот пункт отвечает за скорость, с которой будет открываться и закрываться кнопка.
  8. «Auto-Close» — например, если пользователь сделает ретвит вашей записи или поставит like, то кнопка просто исчезнет. «Load Open» — если установить такой режим, то кнопка никуда деваться не будет и всегда будет открыта. «Tab Image Url» — можете поставить свое изображение на кнопку, а если не хотите, то оставьте это поле пустым по умолчанию, тогда будут стандартные иконки.

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

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

  1. Home Page – только на домашней странице.
  2. Pages – просто на страницах.
  3. Posts Page – кнопка будет отображаться на главной странице.
  4. Category Pages – в категориях.
  5. Posts – в сообщениях вашего блога.
  6. Archive Pages – в архивах.

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

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

Далее следует «Дополнительная информация».

  1. Вводите свое имя в твиттере. Например мой ник @max_metelev. В это поле я ввожу имя без знака @
  2. Пишите Id своей группы в facebook.
  3. Facebook Admin Id – указываете свой личным id в facebook.
  4. Копируете путь к изображению или оставляете это поле пустым.
  5. В принципе тоже самое.

Не забываем сохранять изменения.

Twitter URL shortener

Shortener – здесь вы указываете с помощью какого сервиса вы будете укорачивать ссылки твиттера. Твиттер ставит ограничение на длину сообщения в 140 символов, поэтому длинные ссылки лучше обрезать.
Скачать плагин вы можете здесь — SLICK SOCIAL SHARE BUTTONS
Ну вот, о плагинах социальных кнопок поговорили, теперь настало время поговорить о сервисах социальных кнопок.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Знай и умей
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: