Кнопки социальных сетей для сайта (“Поделиться в соцсетях”)

Опубликовано: 11.03.2016

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

Зачем нужны кнопки социальных сетей на сайте

Наличие кнопок социальных сетей — это первоочередный и важнейший фактор для продвижения в соцалках вроде Одноклассников, ВКонтакте Фейсбук, Майл, Мой мир, Гугл плюс и др. Чем больше людей кликает по этим кнопкам, чем больше ваши статьи перепечатывают и рекламируют, тем желаннее, интереснее и авторитетнее ваш сайт.

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

Сервисы создания кнопок социальных сетей

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

И здесь снова нужно провести четкое разделение между сервисами, создающими:

— независимые панели с кнопками социальных сетей (все элементы скрипта хранятся на нашем хостинге, в корневом каталоге сайта);
— панели с кнопками, подкачиваемыми с других ресурсов (в этом случае на сайте размещается только ссылка на пользовательскую панель кнопок, хранящуюся на других виртуальных площадках).

Оба варианта сервисов вполне работоспособны и эффективны. Тем не менее, автор pod-kopirku.ru рекомендует установку независимых кнопок, без единой внешней ссылки, без обращений к сторонним сайтам, без дополнительной подкачки панелей с других веб-ресурсов. Когда ваши кнопки лежат в одной директории с сайтом, ими и управлять проще, и сайт работает быстрее, т.к. не зависит от других сервисов.

Таким образом, останавливаем свой выбор на сервисе ШАРЕ42 (share42), в котором и будем создавать наши кнопки социальных сетей для сайта.

Создание панели кнопок социальных сетей: пошаговая инструкция

1. Идем по ссылке на сайте http://share42.com/

2. Приступаем к выбору нужных нам кнопок (выделяем мышкой). Можем также изменить размеры кнопок, которые будут помещены на сайте (32х32 / 24х24 / 16х16 пикселей):

1391272954_knopki-socialnyh-setey-dlya-sayta-1.jpg

3. После того, как нужные нам кнопки выбраны, спускаемся ниже и решаем, будет ли среди кнопок подписка на RSS ленту новостей. Если да, то в списке «ПРОЧИЕ» нужно также отметить соответствующую кнопку и ввести адрес нашей RSS ленты в специальное поле (смотрите скриншот):

1391272951_knopki-socialnyh-setey-dlya-sayta-2.jpg

4. Тщательно проверяем, что среди кнопок есть все нужные нам социальные сети, включая дополнительные функции: Распечатать, Добавить в закладки, RSS, Наверх.

Не забываем проверить правильность выбранной кодировки (UTF-8 или Windows-1251), позиционирование кнопок (по вертикали / по горизонтали). Поле «Добавить иконку сайта Share42.com оставляем на личное усмотрение вебмастера. Если к сайту подключен jQuery, можем указать это дополнительно.

После детальной проверки введенных данных оцениваем результат — кнопка:

«ПОСМОТРИТЕ, КАК ЭТО БУДЕТ ВЫГЛЯДЕТЬ» (откроется в новом окне)

4.1. Горизонтальная панель социальных кнопок «Поделиться»

1391272916_knopki-socialnyh-setey-dlya-sayta-3.jpg

4.2. Вертикальная плавающая панель социальных кнопок «Поделиться» (как поделиться записью в Контакте, сделать репост)

1391272991_knopki-socialnyh-setey-dlya-sayta-4.jpg

5. Если заметили ошибки или неточности, возвращайтесь к предыдущему окну и вносите правки. Если панель социальных кнопок «Поделиться» вас устраивает, все равно возвращаемся к прошлому окну и жмем соседнюю кнопку:

«СКАЧАЙТЕ ГОТОВЫЙ СКРИПТ» — Сохраняем файл-архив на компьютере — «ОК»

1391272959_knopki-socialnyh-setey-dlya-sayta-5.jpg

6. Распаковываем архив и загружаем его содержимое по FTP на сайт, в главную — корневую папку сайта (Соединение с FTP-сервером).

Когда папка из архива (не сам архив, а только его содержимое), попадет в главную директорию сайта, можем продолжать.

7. Возвращаемся к браузеру и опускаемся в окне сервиса Шаре42 еще ниже к пункту №4, к инструкциям по установке сохраненного кода на сайт. В поле URL заменяем стоящий здесь пример на конкретный путь к нашей папке с кодом, которую мы выгрузили на сайт.

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

ВАЖНО: Для вставки кнопок социальных сетей в нужное место сайта, необходимо скопировать полученный код из поля 4.5. (смотрите скриншот), вставить его в код полной новости или главного файла вашего сайта!

1391273005_knopki-socialnyh-setey-dlya-sayta-6.jpg

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

http://pod-kopirku.ru/share42/ (это для примера)

Но у вас будет свой индивидуальный URL, поэтому, копировать наш адрес для вас не имеет смысла!

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

Действуйте по аналогии, проявите смекалку.

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

1391272991_knopki-socialnyh-setey-dlya-sayta-7.jpg

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



0 0