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

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

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

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

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

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

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

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

Джей и Боб за компьютером с Аффлеком.

Также очень важным фактором является ускорение индексирования новых страниц сайта. Лично я всегда, после добавления нового поста на блог, включая этот, используя кнопки социальных сетей добавляю страницу с материалом на свою страницу ВК, Facebook, Google+ и Twitter? А также закидываю в группу. По наблюдениям используя кнопки и связку с сервисом пингов типа Letusindex мои новые страницы индексируются уже на следующие сутки. Проверял сервисом AdvegoPlagiatus на оригинальность авторства и всегда указана только мое.

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

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

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

Установка кнопок не представляет трудностей и для начала нам необходимо попасть в раздел Яндекса «Блок поделиться» (адрес страницы: https://tech.yandex.ru/share/). Тут нам необходимо выбрать внешний вид блока и получить соответствующий код для вставки.

Код из раздела поделиться Яндекса.

Теперь берем полученный код нашего скрипта и заходим в шаблон джумла в файл index.php по следующему пути:

…/templates/ваш_шаблон/index.php

И подключаем полученный скрипт путем вставки перед закрывающимся тегом <head> следующей строки:

<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script>

А также идем по следующему пути к файлу который отвечает за формирование вывода материалов в самом шаблоне после строчки <?phpecho $this->item->text; ?> и вставляем полный код с Яндекса:

.../templates /ваш_шаблон /html /com_content /article/default.php

Отлично, кнопки работают и отображаются на сайте. Но посмотрите они какие-то маленькие и не особо смотрятся на общем фоне. Тут нам необходимо в самом коде скрипта поменять текст small (маленький) на  big (большие) как показано на скриншоте.

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

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

Социальные кнопки для Джумла 3 с помощью плагинов Uptolike и Pluso

Если уж Вам не по душе или же не хотите заморачиваться с простановкой кода кнопок на сайт, тогда можно воспользоваться готовыми, а самое главное БЕСПЛАТНЫМИ решениями с помощью специальных сервисов. Данные два сервиса совсем не будут грузить систему и грузятся очень быстро.

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

Среди основных достоинств по сравнению с кнопки социальных сетей от Яндекса является следующие моменты:

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

Вставку кода делаем таким же образом как показывал в случае с Яндексом. Также можно почитать рекомендации в разделе FAQ на интересующие вопросы.

Вид кнопок для сайта.

А теперь давайте рассмотрим интересный плагин социальных кнопок с названием Uptolike. Мне он очень понравился так как имеет множество прикольных настроек как отображения начиная от размера и заканчивая положениями на сайте. Предлагается как готовый плагин для Джумла и WordPress. Вот некоторые преимущества по сравнению с остальными вариантами:

  • Прописывать код никуда не надо, а просто устанавливаем плагин для CMS, который все сделает сам (есть и генератор кода);
  • Можно онлайн видеть, как будут расположены и отображены кнопки на сайте;
  • Есть возможность отображать кнопки в самой статье или же ввиде боковой панели слева или справа в окне сайта;
  • Можно поставить различные вариации, помимо самих кнопок, которые тоже идут в комплекте (скачиваете одно, а получаете целый букет бонусов БЕСПЛАТНО, очень круто);
  • Можно создать и настроить одновременно с кнопками: поделиться картинкой, создать опрос, голосовать за статью лайком, свою метрику и социальную авторизацию на сайте.

Разделы сервиса аптулайк.

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

Кнопка “добавить в закладки” на сайт

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

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

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

В первую очередь нам необходимо попасть в файл index.phpнашего шаблона на Джумла по пути:

.../templates /ваш_шаблон /html /index.php

И вставляем перед закрывающимся тегом <head> вот такой код вызова окна закладок браузера:

<div class=”book”><a onclick=”window.external.AddFavorite(‘http:// firelinks.ru/’); yaCounter6405709.reachGoal(‘zakladki’); return false;” href=”#” class=”test_class1″ rel=”sidebar”></a> </div>

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

Идем в наш файл стилей шаблона CSS и в самый низ кода вставляем следующий блок:

.book {

    height: 151px;

    width: 22px;

    padding-left: 0px;

    position: fixed;

    top: 45%;

    left: 0px;

    z-index: 5;

    background-image: url(“/images/ zakladka. png”);

    background-position: -10px -10px;

}

.test_class1 {

    position: absolute;

    top: 0px;

    left: 0px;

    display: block;

    width: 25px;

    height: 151px;

    text-decoration: none;

    z-index: 1;

}

 

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

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

Всего самого наилучшего и до скорых встреч.

С уважением, Галиулин Руслан.

Рейтинг
( Пока оценок нет )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
Галиулин Руслан
Добавить комментарий

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