Кнопки социальных сетей для сайта Share42. Как разместить их на сайт

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

кнопки социальных сетей для сайта, кнопки шаре 42

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

Update: сейчас на сервисе Share42 скрипт видоизменился. А на блог я установил кнопки от другого сервиса. 

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

Перейду сразу к делу без лишней воды. Сразу хочу предупредить о том, что эту процедуру установки скрипта кнопок, будет удобнее всего провести при помощи FTP клиента FileZilla и очень удобного и не менее полезного блокнота Notepad++   Поэтому, кто не установил их себе для работы и не научился ими пользоваться, прочитайте эти статьи и сделайте это.

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

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

  1. выбрать кнопки, кликая по ним.
  2. выбрать опции.
  3. посмотреть как они будут выглядеть на вашем сайте.
  4. указать путь до папки со скриптом (адрес вашего сайта).
  5. указать тип движка сайта.
  6. скачать архив сгенерированного скрипта на свой компьютер.
  7. распаковать архив и загрузить папку на хостинг.
  8. вставить сгенерированный код в файл single.php.
  9. вставить специальный код в файл style.css.

А теперь разберём всё по порядку:

1) Нужно сначала определиться с размером кнопок. Я выбрал 32х32. И потом нажимая на кнопки (при нажатии-выделяется, при повторном нажатии выделение снимается), выбрать те, которые вы собираетесь поставить на свой сайт.

шаре42

Кнопки можно перетаскивать. Почему их нужно правильно скомпоновать? Потому что, в каком порядке вы их составите слева-направо, в такой последовательности они и будут у вас отображаться на сайте. Я выбрал вертикальную панель, поэтому сверху у меня топовые и знакомые мне социальные сети — ВКонтакте, Фейсбук, Мой Мир, Твиттер, Однокласники и Гугл+, а при нажатии на маленький треугольник внизу панельки, — выплывают остальные 7 кнопок…

Вообще всего на этом сервисе 45 кнопок, из которых есть 5 Прочих:

Я выбрал 14 кнопок, в которых есть и соц-закладки и кнопка подписки по RSS. А ещё добавил кнопку Вверх, тем самым немного разгрузив свой блог, отключив плагин Scroll To Top

2) Выбираем нужные нам опции.

  •  Выберите Тип панели. Сразу предупреждаю, что горизонтальную будет проще установить, но мне понравилась плавающая.
  • Ограничить видимое кол-во кнопок. Если бы я не поставил тут галочку и не выбрал бы количество, то у меня панелька была бы очень длинной и естественно не эстетичной. Ну зачем делать такой паровоз? Вы можете ограничить до 4-5 кнопок, а остальные будут выплывать при нажатии на стрелочку.
  • Кодировка в  WordPress — UTF-8.
  • Язык подсказок естественно русский.
  • Я не добавлял иконку Шаре.
  • Если вы выбрали в панель кнопку RSS, то тут вам нужно вставить адрес вашей RSS ленты. Как узнать адрес вашей ленты — читайте тут.
  • Я не знаю что такое Кверри, поэтому галку не ставил.

3) Смотрим как блок кнопок будет выглядеть у нас на сайте и ничего пока не скачиваем.

Если вам всё понравилось, идём в следующий пункт.

4 и 5)  — Укажите путь до папки со скриптом. Т.е. пропишите адрес главной страницы вашего сайта и добавьте в конце /share42/

-Укажите тип движка.

6) Вот теперь скачиваем сгенерированный скрипт к себе на комп.

7) Распаковываем скачанный архив программой Win Rar и закачиваем эту папку со скриптом себе на хостинг в дирректорию public_html. Ещё раз повторю, что это делать удобнее всего через  FTP клиент FileZilla , либо другой файловый менеджер.

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

Внимание!!! Перед этим действием — сделайте копию вашего файла single.php, дабы обезопасить свой сайт от неприятностей. Если что-то сделаете ни так и сайт сломается, то загрузите этот файл обратно и всё опять будет чики-пуки…

8 ) Блокнотом Notepad++ открываем на редактирование файл single.php, который находится по адресу /public_html/wp-content/themes/ название вашей темы/single.php/  и вставляем 3 строчки этого скрипта  в верхнюю часть (у нас вертикальная плавающая панель) файла single.php

Я подчеркнул зелёным цифры 150 и 20, потому что от этого зависит в каком месте появится блок кнопок. У меня подошло значение 400,20. Т.е вставляете код в файл и исправляете значение 150 на подходящее вашему сайту. Поэкспериментируйте с этим значением.

И ещё, Важно!!! У каждого сайта разные шаблоны и по разному написан html код файлов, поэтому не удивляйтесь что у вас не получится с первого раза-как было и у меня. У меня всё заработало, когда я код вставил вот в это место, за тегом get_header(); ?>

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

9) Настроим стиль панели. Блокнотом Notepad++ открываем на редактирование файл style.css  Он находится по адресу /public_html/wp-content/themes/название вашей темы/style.css. И в самый низ этого файла вставляем 2 кода стилей.

 Со значением смещения панели влево margin-left придётся «поиграть». Я например настроил со значением  75. А вы экспериментируйте. 🙂

И ниже вставляем второй код стиля.

Тут просто вставляем, сохраняем изменения и Любуемся нашими нововведениями на сайте!!!

Друзья, если вы боитесь работать с кодами, я могу всё сделать за вас. А именно, — установить код кнопок share42 в ваши файлы.

Кстати, если вы выберите горизонтальную панель кнопок, то там будет попроще и вставлять код в файл single.php нужно будет в конец статьи.

На этом всё!!!

P.S. Буду благодарен за лайки в соцсетях)))

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

С уважением, Ваш покорный слуга —   Алекс Fomik…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Кнопки социальных сетей для сайта Share42. Как разместить их на сайт" 30 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. ValeronVoronin:

    Подробно все пояснил) Шапку сам рисовал?

    [Ответить]

    Алексей Фомицкий Reply:

    Спасибо Валер) Да сам, программой АААЛого.

    [Ответить]

  2. WPixel:

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

    [Ответить]

    Алексей Фомицкий Reply:

    Да, можно и на Денвере, а можно и на поддомене…

    [Ответить]

  3. Людмила:

    Кнопки share42 так и не хотят мне покорится. Когда указываю путь к папке, ниже красной строкой рекомендуют пройти по ссылке, что-бы проверить правильно ли указан путь. Я проверяю, попадаю на свой сайт и там написано — ошибка404-страница не найдена. Но путь указан верно, где ошибка не пойму. Может вы знаете.? в чем проблема. У меня слабые познания в компе и только упорство граничащее с упрямством позволили дойти до 7 недели прокурса. Но кнопки меня уже просто достали, а так хочется их поставить.

    [Ответить]

    Алексей Фомицкий Reply:

    Людмила, не обращайте внимание на эту ошибку, потому что скрипт ещё не установлен у вас и ошибка будет.Пройдите дальше пошагово по моей статье и всё должно получится…Если всё же сами не сможете, я могу помочь за некоторую услугу…

    [Ответить]

    Людмила Reply:

    Спасибо Алексей, я попытаюсь еще, но мне интересно, какая услуга?

    [Ответить]

    Алексей Фомицкий Reply:

    Вы подписаны на обновления? Подпишитесь и примите участие в акции Жми на кнопки, но только бесплатно))) За это я вам постараюсь поставить скрипт.Только мне нужны ваши 2 файла Сингл.пфп и Стайл.ксс. Я пропишу там код.Давайте лучше щас свяжемся по скайпу…

    [Ответить]

  4. Андрей:

    Последний вариан кнопок, закреплённых в левой стороне сайта мне кажется более удачным. чем предыдущий…

    [Ответить]

    Алексей Фомицкий Reply:

    А я ничего не менял в кнопках.

    [Ответить]

  5. WPixel:

    кстати при переходе по страницам начиная со второй, кнопки не отображаютя

    [Ответить]

    Андрей Reply:

    У меня тоже кнопки не отображаются на второй странице.
    (может та и надо?)

    [Ответить]

  6. WPixel:

    не так не должно быть.

    [Ответить]

  7. Сергей:

    Блин, а они у меня не пошли. Пришлось искать аналог!!!

    [Ответить]

    Алекс Fomik Reply:

    Сергей, значит что-то не правильно делали. Многие не могут поставить их на сайт…

    [Ответить]

    Сергей Reply:

    Понимаете, у меня 2 блога и на первый поставились, а на второй нет. Делал я все правильно, но не пошли!!!

    [Ответить]

    Алекс Fomik Reply:

    Понятненько… Может тема не даёт?

    [Ответить]

    Сергей Reply:

    Скорее всего!

    [Ответить]

    WPixel Reply:

    А что за тема такая на которую не встают кнопки?

    [Ответить]

    Алекс Fomik Reply:

    Так бывают конфликты)))

    [Ответить]

    WPixel Reply:

    Так можно посмотреть что конфликтует, и поправить. Хотя тут и конфликтовать нечему

    [Ответить]

  8. Анна:

    Мне так понравились эти кнопочки, что пришлось и себе установить. К тому же Share42 дает сплошные преимущества: в моем случае минус два плагина да еще и кнопка наверх есть!
    Когда вставила код в файл style.css кнопки стали светлее и мне не очень понравились, поэтому пока обойдемся без украшательства.

    [Ответить]

    Алекс Fomik Reply:

    Рад, что у тебя получилось их поставить, так как после обновления их скрипта они у меня на работали. Пришлось искать старый их скрипт (благо он был у меня на компе сохранён) и ставить его. Не знаю почему у меня не стал работать их обновлённый код…

    [Ответить]

  9. Сергей:

    Я теперь с этими кнопками не заморачиваюсь — поставил по отдельности от твиттера, гугла, контакта и фейсбука и нормально. Больше и не надо, еще немного оформил. Ведь на другие кнопки практически никто не кликает!

    [Ответить]

    Алекс Fomik Reply:

    Это точно, что другие кнопки, кроме монстров не нажимают. Да на них вообще люди ленятся нажимать:-)

    [Ответить]

  10. Руслан Rams:

    Пока нифига, страница не догружается, когда вставляю этот код… Может ссылку неправильно пишу в скрипт… Вроде все по инструкции. И так и эдак перекодировал. Хм…

    [Ответить]

    Алекс Fomik Reply:

    Что ни фига Руслан? Кнопки Шаре не можешь установить? Я их снял — думаю они подгружали сайт, а он у меня итак не шустрый. Хочу поставить от Плюсо, как уже написал ранее…

    [Ответить]

  11. Руслан Rams:

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

    [Ответить]

    Алекс Fomik Reply:

    Хороший настрой! 🙂

    [Ответить]

  12. Vlad:

    Интересный сервис, раньше использовал!

    А потом как-то сменил на Pluso, вроде ничего…

    [Ответить]

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