Социальные кнопки — не только дизайн

Социальные кнопки — не только дизайн

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

Важность наличия на блоге кнопок соц. сетей

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

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

Какими должны быть кнопки социальных сетей? Слишком маленькие – они в любом случае обратят на себя внимание, но прелести вашему дизайну, разумеется, не добавят. Кричащие – и того хуже. А вот те, что я установила на своем блоге и теперь предлагаю использовать вам – самое то. Установить их очень просто. Надо лишь немного поработать с файлами дистрибутива CMS, которую вы используете, и темы, установленной на вашем блоге. Для этого используем FileZilla Client.

Как эти кнопки установить

Где нам взять и как установить красивые кнопки социальных сетей? На сайте share42.com предлагается достаточно большой выбор. Нужно просто пометить те из них, которые вам понравятся и которые вы считаете нужным установить на ваш блог. Только помните, что в какой последовательности вы их пометите, в такой же они и установятся на блоге. Поэтому первоочередность продумайте заранее.

Как установить кнопки соц. сетей

Выбрали? Теперь вам нужно определиться с типом панели – выбрать либо обычную горизонтальную, которая будет располагаться под каждым опубликованным постом, либо плавающую вертикальную, которая выглядит очень стильно и будет сопровождать вас в процессе чтения статьи. Кодировка – UTF-8, язык – русский. Посмотреть, как это будет выглядеть, можно и на моем блоге, так что скачивайте скрипт и переходите во вкладку Установка.

Распакуйте архив, переименуйте папку в «Soc. knopki» и поместите ее в корень вашего блога на хостинге. Укажите точный путь до этой папки. У меня это выглядит так: src="http://biznesstart. ru/soc_knopki/share42.js". И во второй строке скрипта - http://biznesstart. ru/soc_knopki. Не забудьте отметить, на какой CMS базируется ваш блог: Joomla, WordPress и т. д. Если вы используете движок DLE, то вам в раздел «прочие».

Завершающий этап установки

Далее вам предлагается скопировать код, предназначенный для вашего блога, т. е. содержащий точный путь к папке с кнопками. Готово? Теперь возвращаемся к программе FilleZila Client, где нас интересуют файлы той темы, которую вы используете на вашем блоге. Заходим: wp-content –themes-ваша тема-single. php. Именно файл single. php нам и нужно отредактировать.

У меня он упорно открывается в простом блокноте, а нам необходимо сделать это в Notepad+. Если у вас он тоже ведет себя не так, как надо, вытаскиваем его на рабочий стол, там он откроется, как положено. Вставить скопированный нами код необходимо сразу под частью кода, отвечающего за вывод поста. Поэтому находим <div> ... </div> со словом content и перед закрывающим </div> вставляем то, что скопировали. Возвращаем его обратно на хостинг. Система спросит нас о замене – соглашаемся.

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

Завершающий этап – добавить расположенный чуть ниже код для оформления панели наших кнопок. Для этого необходимо скопировать данный код и добавить его в файл style. css, находящийся в той же папке с темой вашего блога. Вставляем его в самый хвост содержимого файла style. css, сохраняем и любуемся результатом.

При установке кнопок я выбрала тип панели горизонтальный. Смешно, но просто не обратила внимания на возможные варианты. На втором своем блоге обязательно поставлю вертикальную плавающую панель – уж очень она мне нравится. Так что не ошибитесь с выбором и установите кнопки социальных сетей — ничего сложного в этом нет.


Карта сайта


Информационный сайт Webavtocat.ru