Кнопки социальных сетей для сайта Share42. Как разместить их на сайт
Здравствуйте уважаемые читатели блога. Сегодня речь пойдёт опять о социальных сетях, а точнее о кнопках социальных сетей. В этой статье я рассказывал о том, как разместить кнопки соц-сетей при помощи плагина.
Но минус плагинов в том, что они нагружают сайт тем самым теряется скорость загрузки страниц. И поэтому недавно я отключил этот плагин и поставил на свой сайт блок кнопок от сервиса Share42. О том как установить эти соц-кнопки от этого сервиса я и хочу вам поведать. Тем более меня уже просили об этом некоторые мои читатели.
Update: сейчас на сервисе Share42 скрипт видоизменился. А на блог я установил кнопки от другого сервиса.
Кнопки социальных сетей для сайта
Перейду сразу к делу без лишней воды. Сразу хочу предупредить о том, что эту процедуру установки скрипта кнопок, будет удобнее всего провести при помощи FTP клиента FileZilla и очень удобного и не менее полезного блокнота Notepad++ Поэтому, кто не установил их себе для работы и не научился ими пользоваться, прочитайте эти статьи и сделайте это.
Итак, для того чтобы выполнить это задание, нам понадобиться папка с файлами этого сервиса и скрипт (код), который мы вставим в тему нашего сайта. Я уже всю эту работу выполнил и у меня эти кнопочки красуются в левом верхнем углу контента-плавающая вертикальная панель.
За всем этим мы идём на сайт сервиса Share42 . Это бесплатный сервис, который предоставляет возможность сгенерировать код выбранных вами социальных кнопок. Поставив их на свой сайт вы дадите возможность вашим читателям делиться ссылками выших статей в социалках. Перейдя на главную страничку этого сервиса вам нужно будет:
- выбрать кнопки, кликая по ним.
- выбрать опции.
- посмотреть как они будут выглядеть на вашем сайте.
- указать путь до папки со скриптом (адрес вашего сайта).
- указать тип движка сайта.
- скачать архив сгенерированного скрипта на свой компьютер.
- распаковать архив и загрузить папку на хостинг.
- вставить сгенерированный код в файл single.php.
- вставить специальный код в файл style.css.
А теперь разберём всё по порядку:
1) Нужно сначала определиться с размером кнопок. Я выбрал 32х32. И потом нажимая на кнопки (при нажатии-выделяется, при повторном нажатии выделение снимается), выбрать те, которые вы собираетесь поставить на свой сайт.
Кнопки можно перетаскивать. Почему их нужно правильно скомпоновать? Потому что, в каком порядке вы их составите слева-направо, в такой последовательности они и будут у вас отображаться на сайте. Я выбрал вертикальную панель, поэтому сверху у меня топовые и знакомые мне социальные сети — ВКонтакте, Фейсбук, Мой Мир, Твиттер, Однокласники и Гугл+, а при нажатии на маленький треугольник внизу панельки, — выплывают остальные 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…
Подробно все пояснил) Шапку сам рисовал?
[Ответить]
Алексей Фомицкий Reply:
Июль 24th, 2012 at 3:37 пп
Спасибо Валер) Да сам, программой АААЛого.
[Ответить]
сервис хороший,с соц кнопками.для вставки лучше потренироваться на локальном сервере
[Ответить]
Алексей Фомицкий Reply:
Июль 24th, 2012 at 9:15 пп
Да, можно и на Денвере, а можно и на поддомене…
[Ответить]
Кнопки share42 так и не хотят мне покорится. Когда указываю путь к папке, ниже красной строкой рекомендуют пройти по ссылке, что-бы проверить правильно ли указан путь. Я проверяю, попадаю на свой сайт и там написано — ошибка404-страница не найдена. Но путь указан верно, где ошибка не пойму. Может вы знаете.? в чем проблема. У меня слабые познания в компе и только упорство граничащее с упрямством позволили дойти до 7 недели прокурса. Но кнопки меня уже просто достали, а так хочется их поставить.
[Ответить]
Алексей Фомицкий Reply:
Июль 25th, 2012 at 9:29 дп
Людмила, не обращайте внимание на эту ошибку, потому что скрипт ещё не установлен у вас и ошибка будет.Пройдите дальше пошагово по моей статье и всё должно получится…Если всё же сами не сможете, я могу помочь за некоторую услугу…
[Ответить]
Людмила Reply:
Июль 25th, 2012 at 11:12 дп
Спасибо Алексей, я попытаюсь еще, но мне интересно, какая услуга?
[Ответить]
Алексей Фомицкий Reply:
Июль 25th, 2012 at 11:17 дп
Вы подписаны на обновления? Подпишитесь и примите участие в акции Жми на кнопки, но только бесплатно))) За это я вам постараюсь поставить скрипт.Только мне нужны ваши 2 файла Сингл.пфп и Стайл.ксс. Я пропишу там код.Давайте лучше щас свяжемся по скайпу…
[Ответить]
Последний вариан кнопок, закреплённых в левой стороне сайта мне кажется более удачным. чем предыдущий…
[Ответить]
Алексей Фомицкий Reply:
Июль 31st, 2012 at 11:44 пп
А я ничего не менял в кнопках.
[Ответить]
кстати при переходе по страницам начиная со второй, кнопки не отображаютя
[Ответить]
Андрей Reply:
Сентябрь 27th, 2012 at 11:31 дп
У меня тоже кнопки не отображаются на второй странице.
(может та и надо?)
[Ответить]
не так не должно быть.
[Ответить]
Блин, а они у меня не пошли. Пришлось искать аналог!!!
[Ответить]
Алекс Fomik Reply:
Октябрь 23rd, 2012 at 9:25 дп
Сергей, значит что-то не правильно делали. Многие не могут поставить их на сайт…
[Ответить]
Сергей Reply:
Октябрь 27th, 2012 at 8:46 пп
Понимаете, у меня 2 блога и на первый поставились, а на второй нет. Делал я все правильно, но не пошли!!!
[Ответить]
Алекс Fomik Reply:
Октябрь 27th, 2012 at 8:49 пп
Понятненько… Может тема не даёт?
[Ответить]
Сергей Reply:
Ноябрь 11th, 2012 at 5:18 пп
Скорее всего!
[Ответить]
WPixel Reply:
Ноябрь 11th, 2012 at 5:39 пп
А что за тема такая на которую не встают кнопки?
[Ответить]
Алекс Fomik Reply:
Ноябрь 11th, 2012 at 5:52 пп
Так бывают конфликты)))
[Ответить]
WPixel Reply:
Ноябрь 11th, 2012 at 5:56 пп
Так можно посмотреть что конфликтует, и поправить. Хотя тут и конфликтовать нечему
[Ответить]
Мне так понравились эти кнопочки, что пришлось и себе установить. К тому же Share42 дает сплошные преимущества: в моем случае минус два плагина да еще и кнопка наверх есть!
Когда вставила код в файл style.css кнопки стали светлее и мне не очень понравились, поэтому пока обойдемся без украшательства.
[Ответить]
Алекс Fomik Reply:
Январь 28th, 2013 at 2:01 пп
Рад, что у тебя получилось их поставить, так как после обновления их скрипта они у меня на работали. Пришлось искать старый их скрипт (благо он был у меня на компе сохранён) и ставить его. Не знаю почему у меня не стал работать их обновлённый код…
[Ответить]
Я теперь с этими кнопками не заморачиваюсь — поставил по отдельности от твиттера, гугла, контакта и фейсбука и нормально. Больше и не надо, еще немного оформил. Ведь на другие кнопки практически никто не кликает!
[Ответить]
Алекс Fomik Reply:
Март 5th, 2013 at 8:31 пп
Это точно, что другие кнопки, кроме монстров не нажимают. Да на них вообще люди ленятся нажимать:-)
[Ответить]
Пока нифига, страница не догружается, когда вставляю этот код… Может ссылку неправильно пишу в скрипт… Вроде все по инструкции. И так и эдак перекодировал. Хм…
[Ответить]
Алекс Fomik Reply:
Ноябрь 3rd, 2013 at 8:14 пп
Что ни фига Руслан? Кнопки Шаре не можешь установить? Я их снял — думаю они подгружали сайт, а он у меня итак не шустрый. Хочу поставить от Плюсо, как уже написал ранее…
[Ответить]
Если что, снять будет не проблема) А вот поставить пытаюсь, хотя бы на главную, прописал код, но пока не выходит правильно. Ну будем пытаться. Нет ничего невозможного)
[Ответить]
Алекс Fomik Reply:
Ноябрь 4th, 2013 at 8:52 пп
Хороший настрой! 🙂
[Ответить]
Интересный сервис, раньше использовал!
А потом как-то сменил на Pluso, вроде ничего…
[Ответить]