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

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

Целый день моей работы не пропал даром и таким образом вы сохраните себе много времени, воспользовавшись моими наработками

Подготовительная работа

Для начала вам понадобятся сами кнопки соц. сетей. Чтобы выбрать по своему вкусу виды кнопок, задайте поисковым машинам работёнку найти вам иконки соц. сетей. Выбор этих иконок огромный и вам придётся попотеть . Также при скачивании обращайте внимание, чтобы иконки были в формате .png. Почему .png, поясню ниже.

Возможно в одном месте не удастся найти всё необходимое, можно задать в поиске конкретные иконки.

Также при поиске я задавала конкретные размеры, но в процессе работы поняла, что это не так важно. Если нужного размера кнопок нет, то скачивайте бОльшего размера. Потом вручную можно будет уменьшить размер до нужного. Кнопки идут размерами от 16х16 рх до 128х128. Я начала с размера кнопок на 48, спустилась до 32, в итоге установила 36

Вот здесь http://a-brezhnev.ru/2010-03-ikonki-dlya-russkix-socialnyx-setej неплохие иконки российских соц. сетей.

Далее приготовьте списочек с URL-адресами тех сетей, которые вы планируете вывести на главной странице.

Процесс созидания

Открыв любой текстовый редактор с возможностью HTML-кодировки загрузите нужные вам кнопки в одну линию. Я работала в редакторе блога.

Чтобы иконки встали в один ряд, поставьте в Выравнивании галочку Нет для каждой кнопки. В заголовке напишите: Присоединиться к такой-то сети или подписаться на то-то и то-то. Пропишите ссылку на эту сеть, вместо ссылки на изображение.

Когда все иконки будут соединены с ссылками, скопируйте полученный код и вставьте его в блокнот. В блокноте отделите ссылки друг от друга с одним межстрочным интервалом, чтобы вам легче было работать дальше.

Теперь нужно эти ссылки закрыть от индексации. Для этого в начале первого и в конце последнего кода надо поставить теги <noindex> и </noindex>. А в каждом коде надо заменить тег rel="attachment ....." тегом rel="nofollow". Для того чтобы каждая кнопка открывалась в отдельном окне надо поставить тег target="_blank". Сколько всего, да ?

В готовом виде каждый код и все коды в целом будут выглядеть примерно так:

<noindex><a href="http://feeds.feedburner.com/abramo8a/wMmx" rel="nofollow" target="_blank"><img class="alignnone size-full wp-image-2626" title="Подпишитесь на обновления abramo8a.ru по RSS" src="http://abramo8a.ru/wp-content/uploads/2012/01/rss1.png" alt="" width="32" height="32" /></a>

<a href="https://www.facebook.com/helena729" rel="nofollow" target="_blank"><img class="alignnone size-full wp-image-2627" title="Присоединяйтесь в Фэйсбуке" src="http://abramo8a.ru/wp-content/uploads/2012/01/Facebook_48x48.png" alt="" width="32" height="32" /></a></noindex>

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

Чтобы не пришлось переделывать. т.к. найти ошибку не просто в такой массе символов, не стоит торопиться. Надо делать всё спокойно и внимательно, имея достаточно времени. Если результат не устраивает, т.е. кнопки великоваты по размеру и выстроились в 2 ряда, или наоборот мелковаты, нужно вернуться в виджет и в каждом коде изменить размеры ширины width="32" и высоты height="32".

В начале января с.г. я организовала на сайте опрос "В каком формате легче воспринимается информация", в котором приняло участие 53 человека. Из результатов видно, что большинству больше нравится действовать по видеоинструкциям. На втором месте смешанный вариант. На третьем месте текстовое восприятие.

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

Дополнение по иконкам

Скачивание архивов иконок в формате .png позволяет сразу вставлять картинки в редактор, минуя фотошоп, и загружать их на любое цветовое поле, так как фон вокруг картинки прозрачный. Посмотрите, на 1 картинке нет белого обрамления, на 2 есть. Белый фон не должен отражаться при просмотре в редакторе изображений. Иначе он будет виден и на сайте.

Также важно, чтобы этот фон был как можно меньше, чтобы расстояние между кнопками было небольшим. Сравните:

И вот как это выглядит на сайте:

А здесь кнопки пришлось уменьшить в размере из-за большого расстояния:

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

Посмотрите видеоролик и настройте свои кнопки соц. сетей на главной странице сайта или блога.

Желаю всем приятной творческой работы!

Поделитесь этим постом со своими друзьями

Присоединяйтесь ко мне в соц. сетях:

Похожие статьи:

1. Как вставить фото на главной странице блога WP
2. Надо ли урезать посты на главной странице? Мнение специалиста