Приветствую Вас друзья на своем сайте,а речь сегодня пойдет о установке кнопок социальных сетей на сайт.
Существует много разнообразных способов установить кнопки социальных сетей на сайт:
- Устанавливать отдельно к каждому сервису свою кнопку;
- Установить панель с социальными кнопками на сайт воспользовавшись сторонним сервисом.
Я воспользовался вторым способом и выбрал вот такую панель с кнопками:
В первом случае каждую кнопку необходимо вписывать в шаблон сайта,во втором же случае Вам необходимо только один раз внести код.
Устанавливаем кнопки социальных сетей на сайт.
Если Вы желаете установить такую же панель к себе на сайт,тогда прошу следовать инструкции:
1) Идем на сайт http://Share42.com
2)Выбираем размер кнопок социальных сетей,которые впишутся в Ваш дизайн.
Я решил,что на своем сайте http://wp.infohub.su буду использовать размер 32 на 32.
3)Теперь Вам необходимо выбрать какие именно сервисы мы будем отображать на сайте.
Для себя я выбрал самые распространённые такие как Twitter, Facebook, Google, Вконтакте,Одноклассники,Яндекс, Мой круг.
Отмечаем выбранные сервисы мышкой:
4)Отмечаем нужные опции галочкой:
- Как видите есть возможность выбрать горизонтальную панель,или вертикальную.
Для себя я выбрал горизонтальную,так как разместил я кнопки социальных сетей сразу после текста записи.
- Выбрать кодировку сайта.Так как у меня UTF-8 выбираю именно эту опцию.
- Язык подсказок-это понятно,на каком языке будет подсвечиваться подсказки.
- Если у Вас на сайте транслируется RSS лента,тогда необходимо выбрать пиктограмму RSS
И вписать адрес Вашей RSS ленты в соответствующее поле “Ссылка на RSS вашего сайта”.
5)Скачайте готовый скрипт и мы приступим к установке кнопок социальных сетей на сайт.
6)Теперь нам необходимо закачать данный скрипт на хостинг,воспользуемся FTP и программой FileZilla.
Урок о том как закачать файлы на FTP сервер мы проходили в шаге №15 думаю вопросов в этой части не будет.
Распаковываем скачанный скрипт на компьютер желательно на рабочий стол.
Открываем FileZilla, подключаемся к Вашему серверу и копируем папку с рабочего стола в папку с Вашим сайтом на сервере.
Теперь необходимо вернуться на сайт share42.com и заполнить расположение папки share42.Вместо wp.infohub.su впишите доменное имя Вашего сайта.Что такое доменное имя мы рассматривали в уроке Шаг №14. Как зарегистрировать доменное имя и хостинг.
Ставим галочку о том что у нас WordPress.
7)Теперь кнопки социальных сетей необходимо добавить в шаблон на WordPress.
Открываем папку с нашим шаблоном через FileZilla.
Необходимо найти файл single.php который находится в папке с шаблоном.
Структуру шаблона мы рассматривали в ранних уроках.
Нажимаем по нему правой кнопкой мыши и выбираем пункт “Просмотр/Правка”.
Теперь нужно найти место,в которое необходимо вставить код кнопок социальных сетей.
Выводить кнопки будем после текста статьи,а значит в файле single.php ищем примерно такой код:
<?php the_content(»);?>
после него нам необходимо вставить код который копируем с сайта share42.com:
Сохраните файл single.php и согласитесь изменить его на сервере.
Нажимаем да.
8)Дело осталось за малым,скопировать код CSS для оформления кнопок социальных сетей.
Идем на сайт share42.com и находим нужный нам код:
Копируйте код,теперь идем в консоль WordPress->Внешний вид->Редактор, прокручивайте в самый низ и вставляйте код:
Теперь осталось сохранить файл,нажимаем :
Теперь можно посмотреть как выглядят кнопки социальных сетей на сайте.
Переходим в любую статью,прокручиваем до конца статьи и наблюдаем:
Ребят, если не понятно куда нужно вставить код в Вашей теме,напишите название шаблона в комментариях, а я подскажу в каком месте нужно вставлять код.
На этом все.Если у Вас остались вопросы по прохождению этого шага,пишите в комментарии.До скорых встреч.В следующем уроке мы поговорим о Статистике посещения сайта.