0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

Социальные сети на сайте

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

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

Статья в тему:  Что можно написать в разделе интересы Вконтакте

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

Например, на сайте «mebel.ru» они находятся в правом нижней части:

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

Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:

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

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

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

Блок «Поделиться» от Яндекса

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

  • Вконтакте;
  • Facebook;
  • Twitter;
  • Одноклассники;
  • Мой Мир;
  • Livejournal;
  • Я.ру;
  • Friendfeed;
  • Мой круг;
  • Google+;
  • Pinterest;
  • Surfingbird.
Статья в тему:  Как изменить вам пароль в контакте. Пароль вконтакте

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

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

Выбрав внешний вид блока «счетчики», вы получите кнопки сервисов с отображением числа сделанных репостов, т.е. сколько данной новостью человек уже поделилось в соответствующей соц. сети. Эта функция поддерживает наиболее популярные социальные сети (Вконтакте, Facebook, Twitter, Google+, Я.Ру, Мой Мир, Одноклассники.ru).

На сайте это выглядит следующим образом:

Если вы используете сервис Яндекс.Метрика, счетчик для контроля посещаемости сайта, то сможете без труда отслеживать статистику кликов по социальным кнопкам от Яндекс, что может быть полезным. Зачем нужны счетчики посещаемости читайте в статье «Счетчик посещаемости сайта: зачем он вам нужен?».

Шаг 3

Что бы разместить блок «Поделиться» на весь сайт:

  • Вариант 1. Можно воспользоваться вставкой кода в Дополнительные блоки страницы (например разместить полученный код в раздел Код счетчиковили Блок информеров).
  • Вариант 2. Разместить код в шаблон Главная. Верх перед закрывающим тегом (данная функция доступна, если у Вас есть расширенные права доступа к системе управления сайтом).

Добавление соц. панели с помощью Share42

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

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

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

  • 4. Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:
    1. 1) Разархивируем архив.
    2. 2) При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
    3. 3) Указываем путь к папке.
    4. 4) Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
    5. 5) Вставляем в шаблон страницы сгенерированный код.

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

    2 нюанса расположения кнопки соцсетей на сайте

    Продумываем расположение

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

    Чаще всего социальные виджеты ставят в начале или в конце статьи, а также в sidebar. Можно протестировать разные варианты расположения и решить, какое будет оптимальным для конкретного веб-ресурса.

    Задаем внешний вид социальных кнопок

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

    • быть заметными на фоне сайта, но не оттягивающими внимание пользователей на себя;
    • логотипы социальных сетей должны быть идентифицируемыми, даже если они видоизменены исходя из общей стилистики веб-ресурса;
    • использование минимальных анимационных эффектов в виде, например, плавного изменения цвета при наведении курсора, но никак не навязчивое мигание или неожиданное выскакивание;
    • применение не более пяти — семи социальных кнопок с учетом целевой аудитории сайта (в России обычно пользуются YouTube, Instagram, «ВКонтакте», «Одноклассниками», Facebook, мессенджерами Viber и WhatsApp);
    • ссылки на социальные сети должны работать с учетом того, что, к примеру, ссылку на Google+ могут открыть только корпоративные пользователи из-за закрытой соцсети, а в переживший цепь блокировок Telegram не всегда получается беспроблемно войти;
    • быть удобного для клика размера: оптимально от 10 на 10 пикселей до 40 на 40 пикселей, то есть не слишком маленькие и в то же время заметные, такие, на которые удобно нажимать, не задевая соседние кнопки.

    Мнение о вебинаре Александра Борисова

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

    Основные критические ошибки начинающих вебмастеров

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

    Юзабилити сайта — удобство пользователя при просмотре блога. Многие веб-мастера, считают, что привлекая посетителей из поисковых систем однажды — они смогут их удерживать постоянно. К примеру, на мой блог только из поисковых систем в среднем приходят 90% посетителей, а лишь единицы остаются.

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

    Имейте терпение и выдержку, ну хотя бы пока не напишите 100 статей и трафик не станет 300 хостов в сутки — тогда и карты в руки!

    Конечно, это не все ошибки, но очень важные!

    Немного размышлений о кнопке социальных сетей на сайте

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

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

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

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

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

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

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

    WordPress

    Если вы ничего не понимаете в этом коде, что куда нужно копировать и как все это работает, выход есть. Если у вас движок WordPress, можно установить плагин, с помощью которого у вас появятся кнопки социальных сетей. Сегодня таких плагинов просто большое количество. Заходи в админку — Плагины. Можно сразу написать в поиске плагинов «соц кнопки», «social» или «вконтакте». Я уверен, вы что то найдете.

    Среди большинства таких подобных плагинов для WordPress, посмотрев на рейтинг, больше всего ставят именно такие:

    1. Social Share Buttons for WordPress.
    2. Social.
    3. Social Media Feather — lightweight social media sharing and follow buttons.

    На самом деле подобных таких плагинов очень много, нужно устанавливать и перебирать, какой вам больше понравится, правильно работает, что показывает и как его можно настроить под себя. Разберем на примере первый такой плагин Social Share Buttons for WordPress.

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

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

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

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

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

  • Ссылка на основную публикацию
    Статьи c упоминанием слов:

    Adblock
    detector