Как установить красивые кнопки «лайков» со счётчиками от Social Likes

Как установить кнопки Social Likes на сайт WordPress

Реферальные банеры

Всем привет! Не так давно я установила себе кнопки социальных сетей со счетчиками, которые выполнены в едином стиле. Хочется отметить, что сервис Social Likes предоставляет возможность установить одним блоком кнопки лайков со счетчиками от самых популярных социальных сетей:  Вконтакте, Одноклассники, Twitter, Facebook, Мой мир,  Google+.

Раньше у меня выводились кнопки Вконтакте, Twitter, Facebook, Google+ в одну строку, но для каждой использовался свой скрипт, который генерировался на официальном сайте. Как добавить такие кнопки Вконтакте, Twitter, Facebook я писала в статьеhttps://inetsovety.ru/kak-dobavit-knopki-vkontakte-facebook-i-twitter/  Сейчас я занялась ускорением блога. Анализируя свой блог на скорость загрузки, я заметила, что загрузка каждой из этих кнопок оказывает влияние на суммарную скорость загрузки страницы. Было принято решение найти альтернативный способ вывода. К сожалению, разновидностей кнопок со счетчиками, да еще и в классическом стиле оформлении не так много.

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

На многих моих сайтах стоят кнопки от share42.com, в частности в статье https://inetsovety.ru/plavayushtaya-panel-knopok-sotssetey/ Но у этих кнопок нет счетчиков. Но мне нравится способ их вывода. На самом сервисе я выбираю оформление кнопок, потом скачиваю архив с двумя файлами, которые потом загружаю на хостинг. Загрузка кнопок осуществляется с моего хостинга. Принцип работы кнопок соцсетей от Social Likes похожий.

Установка кнопок Social Likes

  1. Первым делом переходим на сайт http://sapegin.github.io/social-likes/ru/
  2. Подбираем оформление кнопок. Вариантов оформления несколько. Мне больше всего понравилось классическое оформление. Кстати, кому не нужны счетчики возле кнопок лайков, отключите их. Можно выбрать положение кнопок: горизонтальное, вертикальное и одной кнопкой. Также можно указать, кнопки каких соцсетей будут выводиться.
    кнопки социальных сетей со счетчиками
  3. Посмотреть, как выглядят кнопки можно в самом верху. После того, как Вы определились со стилем кнопок, нажимайте на большую оранжевую кнопку с надписью "Скачать кнопки".
  4. Сделайте резервную копию шаблона перед дальнейшей установкой кнопок.
  5. Нужно распаковать скачанный архив. В нем будет 3 файла. Файлы social-likes.min и social-likes_classic мы будем копировать на хостинг в папку сайта, а из файла index возьмем код вывода кнопок. Тот же самый код показан на сайте Social Likes над кнопкой "Скачать кнопки":
    код установки кнопок Social Likes
  6. Состоит код вывода кнопок из двух частей. Отмеченная цифрой 1 на картинке выше часть кода добавляется в файл header.php до закрывающего тэга шапки </head> . Обратите внимание на следующий момент. Нужно указать правильный адрес к файлам social-likes.min и social-likes_classic, которые Вы загрузили на хостинг. Я эти файлы загрузила в папку social-likes в корневой папке сайта. Соответственно адрес к файлу у меня такой: https://inetsovety.ru/social-likes/. Вот мой код:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>      <script type="text/javascript" src="https://inetsovety.ru/social-likes/social-likes.min.js"></script>  <link rel="stylesheet" href="https://inetsovety.ru/social-likes/social-likes_classic.css" type="text/css" media="screen" />

    Также, если в файле header.php уже есть код с содержанием jquery, то еще раз добавлять его не нужно. Значит библиотека jquery уже подключена.

  7. Вторую часть кода добавляем в файл single.php в то место, где будет выводиться блок кнопок. Вот пример моего кода:
    как вставить код социальных кнопок в статью

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

  • не правильно указан адрес к файлам;
  • два раза подключается jquery. В одном из бесплатных шаблонов, у меня jquery подключался следующей строкой:
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    если Вы добавили код вызова файлов кнопок выше строки вызова библиотеки, то кнопки не будут отображаться (будет просто текст).

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

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 19
  1. Людмила С. Кузнецова

    Огромное спасибо за статью! Именно то, что я давно искала!

  2. adrin

    Вот бы счетчик лайков обычный, а не соц сетей — другое дело.

    1. Нина

      Возможно и такое скоро придумают)

    2. Люся

      Может, такой счётчик лайков уже и придумали, и он есть.

  3. Сергей

    Добрый день, а как насчет Joomla 2.5

    1. Виктория (автор)

      Добрый! С Joomla не работаю.

  4. Виталий Охрименко

    Отличный обозреватель, можно поставить себе эти кнопки

    1. Люся

      Не забудьте перед установкой сделать резервную копию шаблона.

  5. Диана

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

    1. Сергей Грицюк

      Думаю можно совместить — использовать встроенные в шаблон и от другого сервиса.

      1. Нина

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

      2. Люся

        Совмещение кнопок от разных сервисов создаст дополнительные временные и материальные затраты. Проще выбрать один сервис.

  6. Рашида

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

  7. Александр

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

  8. Александр

    Я пользуюсь кнопками share 42, вполне отличные тем более что можно установить счетчик и заменить изображения социальных кнопок на свои по желанию

  9. Виталий

    Очень классные кнопки. Но поставить их себе, признаться, ума не хватало. А очень хотелось.

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

    Начал я искать в нете. Думаю, неужели никто не объяснил, как работать с этим кодом. И через полдня поиска наткнулся на вашу статью.

    Очень все доходчиво. Спасибо вам огромное. Помогли.

  10. seomodern

    Дизайн у кнопок симпатичнее, чем у кнопок от Яндекса, но у кнопок от Яндекса проще установка.

    Я остановился на кнопках от последнего. Количество соцсетей такое же.

    1. Виталий Охрименко

      А я наверное в новом шаблоне внедрю эти кнопки, больно уж они симпатишные

      1. Люся

        Лишь бы толк от кнопок был, кнопки не для красоты ставятся.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.