Кнопки поделится в соц сетях без сторонних сервисов
Социальные кнопки поделится на сайт
Создание, разработка, изготовление сайтов | WEB-STYDIA.COM

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

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

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

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

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

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

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

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

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

Что это за строка? - это как раз ваша ссылка на страницу которой человек собирается поделится, и в зависимости от вашей смс на котором сделан сайт это значение можем менятся, к примеру вышеуказанная строка выведет ссылку на страницу на которой вы находитесь методом PHP , соответственно ваша страница должна или поддерживать PHP код или быть файлом php, если же у вас WordPress то можно ее заменить на:

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

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

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

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

Следующим шагом будет добавление кода CSS для кнопок поделится:

Думаю описывать сам код не имеет смысла, а вот добавить на свой сайт вы можете двумя способами, первый это добавить вышеуказанный код CSS в свой основной файл стилей и второй это создать отдельный файл к примеру share-style.css и добавить код в него, после подключить скрипт добавим строку между <head></head> к примеру так:

При этом обязательно проверяйте пути к файлу css который подключаете.

Ну и последнее это сайт файл javascript, скачать его можно под данной статьей, ну и подключить его на свой сайт , так же как и мы поступали со стилями при подключении, между <head></head> добавляем:

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

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

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

Вас также может заинтересовать

37 комментариев

  •   16.12.2018 в 20:49

    Здравствуйте устанавливаю кнопки соц сетей в comments.tpl полностью исчезает нижнее меню.Почему так?Подскажите

    Ответить
    • Василий
        16.12.2018 в 21:04

      Ответ прост. Ошибка PHP кода.
      Вы не верно не в том месте строке устанавливаете код.

      Ответить
  •   05.03.2019 в 14:56

    Спасибо. Отличный вариант. А каким образом добавить к этому списку кнопку Телеграмм?

    Ответить
    • Василий
        06.03.2019 в 22:36

      Это в список ссылок соц кнопок добавить:

      А это добавить в JS в файл share.js:

      Ответить
  •   22.03.2019 в 16:23

    Только у меня не работало в вк подстановка Title.
    Изменил тут параметр description на title и все стало ок.
    this.popupCenter(‘https://vk.com/share.php?url=’ + url + ‘&title=’ + title +

    Ответить
    • Василий
        22.03.2019 в 16:26

      Возможно ВКонтакте что-то изменил у себя. На момент написания данной статьи всё работало отлично. Рад что у вас всё получилось.

      Ответить
  •   09.05.2019 в 11:41

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

    Ответить
    • Василий
        04.06.2019 в 17:55

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

      Ответить
  •   14.05.2019 в 13:00

    Здравствуйте, большое спасибо, очень пригодилось. Напишите, пожалуйста, как добавить WhatsApp.

    Ответить
    • Василий
        04.06.2019 в 17:54

      По возможности и свободном времени напишу там 5 мин работы.

      Ответить
        • Василий
            31.08.2019 в 13:20

          В стили это:

          В JS это:

          В index.php это:

          Пример здеся…

          Ответить
          •   01.09.2019 в 20:14

            Спасибо!
            А как вывести еще «Скопировать ссылку»

          • Василий
              02.09.2019 в 15:26

            Статья про кнопки поделится в соц сетях :)
            Но можете за пример взять к примеру этот код здесь

  •   01.06.2019 в 11:39

    Добрый день. А можно как-то указать нужное изображение? Чтобы не первое цеплялось и другие в подряд, а нужное. Например, основное фото в интернет-магазине.

    Ответить
    • Василий
        03.06.2019 в 00:21

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

      Разумеется со своими данными…

      Ответить
  •   04.06.2019 в 11:44

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

    Ответить
    • Василий
        06.06.2019 в 21:59

      Скорей всего у вас не срабатівает потому что у вас дле а в нем шаблонизатор смарту разширение tpl собственно код php не обрабатівается. Там немного больше нужно чем скопировать и вставить.

      Ответить
  •   04.06.2019 в 14:48

    Скажите, плиз, все сделала, работает, но валидатор ругается, что в ссыле нет нужного элемента hrefю Как быть, что подскажете?
    Element a is missing required attribute href.

    Ответить
    • Василий
        04.06.2019 в 17:41

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

      Ответить
    • Василий
        06.06.2019 в 21:52

      Он у Вас ругается на отсутствия href ссылки.
      Я на такие ошибки валидатора не обращаю никогда внимания.
      Но, по вашему вопросу.
      Или убираем из кода все

      Или переписываем все ссылки из тега а на любой другой тег, типу p,span,div или что то подобное, но тогда вам придется переписівать и все стили и сам js код.

      Ответить
  •   16.06.2019 в 17:17

    Спасибо за ответ!!! Ок, можно забить на валидвтор)) А ссылочный вес при этом не утекает, если везде убрать nofollow? Переделывать теги…Жесть .. Не хочется))И потом, я в java script полный ноль ;-)

    Ответить
    • Василий
        16.06.2019 в 22:04

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

      Ответить
      •   17.06.2019 в 15:17

        Спасибо! Так и поступим :smile:

        Ответить
  •   30.07.2019 в 09:17

    Спасибо за скрипт. Не могу найти как шаринг в Инстаграм прикрутить, подскажете?

    Ответить
  •   08.08.2019 в 21:17

    Здраствуйте! А как убрать G+ в кнопке(сервис же уже не работает) и какую ссылку прописать в кнопку от Гугла в js файл?

    Ответить
  • Василий
      02.09.2019 в 15:35

    Кнопку убрать не проблема , просто вырезать ее из кода а именно:

    Ну и не обязательно но по желанию это из js:

    Ответить
  •   29.10.2019 в 13:47

    Вчера знакомые ребята поделились сервисом для проверки кеширования на сайте. Проверил.
    Удивился наличию вот такого на сайте:

    https://mc.yandex.ru/metrika/advert.gif
    60 minutes Type: Cache-Control
    https://mc.yandex.ru/metrika/watch.js
    60 minutes Type: Cache-Control

    Что? Да я не использую все эти Гсервисы от Яндекса сказал Я. Нет метрики, нет вебмастера.
    А откуда же это взялось. Немного подумав понял, что это кнопки поделиться от Яндекса.

    Вот так я попал на эту очень полезную страницу.

    Скрипт установил, вроде всё работает. Спасибо огромное за это чудо!

    Пара вопросов всё таки возникло:

    1. У меня для яшашара были настроены следующие параметры:

    data-description= и data-image=
    Надо ли передавать картинку таким образом и как применить к нашему скрипту?

    2. Добавил Телеграм
    При попытке поделиться выскакивает это: https://imageup.ru/img190/3499159/2724_f_483_dyni-optom-so-sklada-v-moskve.jpg
    Как лечить?

    Ответить
    • Василий
        29.10.2019 в 14:04

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

      Ответить
      •   29.10.2019 в 21:13

        Василий, спасибо за оперативный ответ!

        По первому вопросу как бы сам вроде как разобрался. Я так понимаю картинка и описание передаётся через og:image и og:title автоматом. Я решил передавать в data-title= данные из og:description, поэтому на сайты соцсетей (ВК и мейл.ру например) передаётся и заголовок новости, и картинка, и описание.

        По второму вопросу — это видимо норма, так как то же самое происходит при переходе с кнопки от Яша-шара.

        Всё работает, всё отлично!

        Кстати, я себе ещё добавил кнопку Мой мир (mail.ru).

        Ответить

Оставить комментарий

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