Как добавить кнопки социальных сетей (3)

Чтобы добавить кнопки социальных сетей на сайт, нужно скрипт кнопок ввести в код сайта. Генератор Share42.com уже сделал для скрипт для вашего сайта, остался последний, но очень важный шаг.

Руководство для первокурсника: как добавить кнопки социальных сетей

Начало: как поставить кнопки социальных сетей

Этап 4, как добавить кнопки социальных сетей в wordpress

Четвертый этап «Установите скрипт на своем сайте» самый ответственный. Но он очень плохо описан на сайте-генераторе скриптов Share42.com. Поэтому пп. 1-2 сделайте по инструкции ниже.

Распакуйте zip архив share42 и увидите два файла: icons.png и share.js.

dobavit-knopki-socialnyx-setejИдете на хостинг в панель управления. В правой колонке, выбираете домен сайта, куда планируете добавить кнопки социальных сетей . (Если у вас один сайт этот шаг пропускайте – сайт будет выбран автоматически).  В левом меню находите раздел «Файлы и резервные копии» и переходите в «Файловый менеджер».

 

Создаете новую директорию share42 – как показано на изображении.

dobavit-knopki-socialnyx-setej-2dobavit-knopki-socialnyx-setej-3

Новая директория share42 появляется в числе других. Открываете ее и внизу страницы, загружаете файлы icons.png и share.js.  из распакованного ранее архива в текущую директорию  ( /domains/site.name/public_html/share42 ). На этом работы на хостинге заканчиваются, возвращаемся на сайт Share42.com.

dobavit-knopki-socialnyx-setej-6Укажите путь до папки, которую вы только что разместили на хостинге (п. 3). Если вы делали точно так же, как описано выше, то этот путь будет иметь адрес: http://site.name/share42/. Будьте внимательны! Обязательно поменяйте site.name на ваш домен.

dobavit-knopki-socialnyx-setej-4Проверьте, правильно ли вы установили скрипт. Для этого пройдите по ссылке, которая появится под указанным путем до папки на хостинге. Если вы видите содержание скрипта, такое же как на скриншоте ниже, значит вы все сделали правильно. Если не видите, то скорее всего вы неправильно прописали путь (например, сделали ошибку в домене сайта), либо не туда залили скрипт на хостинге. Удалите директорию share42 на хостинге и начинайте сначала.

Отметьте тип сайта – WordPress (п.4).

Этап 5, как добавить кнопки социальных сетей в wordpress

Горизонтальную панель нужно отрегулировать, меняя  расстояние: от начала страницы до панели в пикселях (data-top1), от верха видимой области страницы до панели (data-top2), смещение по горизонтали вправо(data-margin). Для того, чтобы поместить кнопки слева нужно установить отрицательное значение, например -820.

Сгенерированный код копируйте и размещайте в коде сайта. Для этого войдите в Консоль сайта – Внешний вид – Theme Editor (Редактирование темы) – header.php. Вставьте код в самом низу header.php.

dobavit-knopki-socialnyx-setej-6

Вертикальная панель не содержит эти параметры, но ее нужно правильно вставить в код – также вставлен в конце header.php.
Важно! Не разбивайте ранее установленные коды и скрипты. То есть код социальных кнопок вставляйте после закрывающих тегов, который может выглядеть как: </a> или </div>.

После каждого исправления кода (параметры отступов в вертикальной панели, место размещения на сайте в горизонтальной панели) чистите кэш, даже если там нет просроченных страниц, все равно удаляйте весь кэш. В противном случае, вы можете не увидеть сделанных только что изменений и будет продолжать делать исправления в коде. Таким образом, можно даже сломать сайт. Поэтому чистите кэш сайта после каждого малейшего изменения в Консоле.
Можно установить дополнительные параметры, но если вы еще не разбираетесь в HTML, то воздержитесь пока.

Продолжение: кнопки социальных сетей для сайта

Руководство для первокурсника: как добавить кнопки социальных сетей

Марина Белоусова

Преподаватель-эксперт в области прикладных социально-экономических программ Центра компьютерного обучения «Специалист» при МГТУ им. Н.Э. Баумана. Директор специальных и краудфандинговых проектов Российского агентства развития информационного общества. Владелец интернет-проектов под брендом Эксперт BTL.

Поделитесь своим инсайтом

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>