Меню Рубрики

Установка кнопок поделиться в соц сетях

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

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

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

  • Блок поделиться от Яндекса;
  • использование сторонних сервисов для добавления кнопок;
  • плагины поделиться в социальных сетях для сайта на WordPress;
  • описание добавления кнопок каждой социальной сети по отдельности;
  • добавление иконок на профили в социальных сетях.

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


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

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

Яндекс кнопки соц сетей

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

  1. Используем Конструктор блока «Поделиться» для выбора требуемых соц сетей.
  2. Выбираем «Внешний вид блока».
  3. Копируем код и вставляем в нужном месте на сайт.

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

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

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

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

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

Не буду проводить обзор всех возможных сервисов, их суть одна и та же:

  1. Выбираете соц сети.
  2. Изменяете внешний вид.
  3. Копируете код.
  4. Вставляете у себя на сайт.
  • http://share.pluso.ru/
  • http://share42.com/ru
  • https://uptolike.com/
  • http://social-likes.js.org/ru/

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

Не буду долго описывать, незачем, все интуитивно понятно.

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

Как установить кнопки соц сетей на сайт WordPress

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

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

Для данного случая мы выбрали два удобных плагина, которые именуются как Social Share Buttons и Jetpack.

Модуль «Поделиться» от плагина Jetpack.

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

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

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

Заходим в административную панель, далее Jetpack/Настройки. И выбираем группу модулей «Социальные».

Далее находим нужный нам модуль «Поделиться» и переходим по его ссылке.

Затем нажимаем «Настроить» и нас перекидывает в меню настроек социальных сетей.

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

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

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

В следующем меню мы настраиваем стиль кнопки и места их вывода на нашем сайте.

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

Установка кнопок социальных сетей на сайт WordPress. Настройки Social Share Buttons.

Итак, не будем ходить вокруг да около, а перейдем сразу же к установке кнопок социальных сетей. Заходим с админки в меню настройки и добавления плагинов. Через поиск находим предложенный нами Social Share Buttons for WordPress.

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

Читайте также:  Установка подогревателя тосола мтз

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

Главные настройки отображения кнопок социальных сетей на сайте WordPress.

Что мы можем тут настроить?

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

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

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

  1. Выбираем понравившиеся стиль и сортируем на свое усмотрение наши иконки.
  2. Настраиваем с какими именно соц. сетями вы хотите взаимодействовать и где соответственно продвигать свой продукт.
  3. Настройка отступов между иконками.

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

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

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

Добавление каждой кнопки соц сети по отдельности

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

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

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

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

По аналогии с предыдущим примером даю ссылку для получения кнопки и привожу скриншот настроек:

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

Кнопка поделиться Одноклассники

Все аналогично, переходим на сайт, подбираем кнопку, копируем код.

Кнопка поделиться Google+

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

Кнопка поделиться от Твиттер

Твиттер так же предоставляет широкие настройки для кнопок. Ссылка тут, скрин ниже:

Кнопка поделиться от Mail.ru

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

Похоже на Однокласники, с чего бы это 😆 .

Добавление иконок на профили и группы в социальных сетях на сайт

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

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

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

Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.

В этом примере я показал сразу три варианта добавления иконок, первый с использованием картинок с другого сайта, второй WordPress-совский используя функцию bloginfo(), третий, более правильный и оптимальный, указание абсолютного пути к картинке на сервере.

Что касается CSS, тут я вам навряд сильно помогу, могу лишь дать несколько советов по примеру ниже:

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

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

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

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

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

источник

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

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

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

Читайте также:  Установка принтера hp deskjet 5443

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

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

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

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

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

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

К основным преимуществам этих «помощников» можно отнести:

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

Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

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

  • Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
  • Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
  • Периодическое появление рекламы;
  • Отсутствие стабильного алгоритма работы через AJAX;
  • Возможное использование памяти браузеров;
  • Наличие сомнительного трафика;
  • Непредставление гарантий безопасности данных пользователей.

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

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

И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

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

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

Яндекс кнопки соц сетей

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

  1. Со счетчиком расшариваний;
  2. С выпадающим меню;
  3. Мелкие иконки в стиле минимализма.

Список доступных для шаринга сетей:

Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

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

Pluso

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

Доступные стили и социальные сети:

Окно предварительного просмотра и дополнительных опций:

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

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

Uptolike

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

Готовые иконки могут иметь такой вид:

Можно выбрать все значимые современные сети:

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

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

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

Share42

Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

Сервис предлагает быстрое формирование блоков, которое включает:

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

Функции предварительного просмотра и скачивания;

Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:

Sharethis

Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).

Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

    После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

  • Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
  • Финальное получение кода (требует регистрации).

    Addthis

    Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

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

    Кнопки соц. сетей на сайте могут быть:

    1. Скользящими (floating);
    2. Зафиксированными на странице (inline);
    3. Раскрывающимися при наведении (expanding);
    4. Баннерами и слайдерами.

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

    После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

    Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

    Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

    и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

    Social-Likes

    Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

    Дальнейшие действия для установки:

    1. Нажать «скачать кнопки»;
    2. Сохранить архив на ПК;
    3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
    4. Перед прописать:

    Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

  • Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
  • Odnaknopka.ru

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

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

    Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

    Скрипт социальных кнопок выглядит так:

    Для работы с виджетом код сложнее:

    Для установки достаточно поместить данные в шаблон.

    Pip.Qip.ru

    Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок — Pip.Qip. Простота здесь лишь подчеркивает комфорт.

    Для получения заветного кода нужно:

    1. Указать тип площадки для размещения;
    2. Выбрать стиль из списка;
    3. Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.

    Останется лишь поместить его в код сайта.

    Добавление кнопок соц сетей вручную

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

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

    Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

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

    Первую часть кода следует поместить внутри тега :

    Вторую – в место непосредственного расположения кнопки:

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

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

    Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

    После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

    Шаг 2 – Добавляем Javascript.

    Встраивается в html-код страницы единожды. Лучшее место – сразу после тега .

    Шаг 3 – сам код кнопки и его размещение.

    Кнопка поделиться Одноклассники

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

    Здесь находится страница конструктора.

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

    Кнопка поделиться Google+

    Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

    Официальная страница открывает простой способ установки «+1» с помощью кода:

    Кнопка поделиться от Твиттер

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

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

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

    Кнопка поделиться от Mail.ru

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

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

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

    Добавление иконок на профили и группы в социальных сетях на сайт

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

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

    Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:

    html-код в таком случае будет:

    Легкие и кастомные кнопки расшаривания

    Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).

    1. Нет лишнего трафика;
    2. Нет рекламы;
    3. Корректная работа;
    4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
    5. Нет проблем с поеданием памяти браузера.

    Список ссылок на шаширнг в популярных социальных сетях:

    Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

    Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

    Ну и стилизация кнопки в CSS:

    Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url’ы для шаринга, которые приведены выше.

    источник