Я отмечал важность SMO (Social Media Optimization) в продвижение сайта. Теперь поговорим непосредственно о том, как сделать социальную оптимизацию на своем сайте, а точнее как добавить социальные кнопки популярных сетей на сайт.

Для начала покажу как это собственно говоря должно выглядеть на сайте. На многих блогах и новостных сайтах внизу после любой статьи можно увидеть нечто подобное:

Это и есть социальные кнопки, благодаря которым достигается SMO , а далее и социальная активность. Эта статья посвящена вопросу где взять код этих соц. кнопок и как правильно установить их к себе на сайте. Рассмотрим для начала установку Google+.

Начнем с получения кода кнопки для Facebook. Для этого зайдите на эту страницу: https://developers.facebook.com/docs/plugins/like-button . Вы должны увидеть следующую картину:

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

1. URL to Like
Это необязательный параметр. Если оставить поле пустым, то у каждой страницы будет свой индивидуальный счетчик лайков. Если вписать туда какой-то конкретный адрес URLa , то счетчик будет единым (лайки суммируются со всех страниц этого сайта).

2. Send Button
Добавить или убрать кнопку для отправки сообщений. Я рекомендую убрать эту кнопку, т.к. наша цель поставить просто кнопку "мне нравится", хотя возможно у вас совсем другие цели.

3. Layout Style
Стиль отображения кнопки. Лично мне больше всего нравится standard.

4. Width
Ширина кнопки в пикселях. Я ставлю обычно не больше 100 пикселей.

5. Verb to display
Что будет отображено на кнопке: "мне нравится" или "я рекомендую". Обычно я выбираю первый вариант (стоит по умолчанию), поскольку это более действенный способ замотивировать пользователя поставить лайк.

6. Color Scheme
Цветовая гамма: либо белая, либо черная.

7. Font
Просто задание шрифта для надписи "мне нравится".

После задания настроек наживаем на кнопку "get code" и размещаем на сайте. Обычный код кнопки для facebook:

Теперь рассмотрим как получить код кнопки "мне нравится" от ВКонтакте. Для этого перейдите на следующую страницу: https://vk.com/dev . У Вас должна открыться следующая страница:

Сначала нужно будет добавить новый сайт. Для этого выберите из выпадающего меню "сайт/приложение" пункт подключить новый сайт:

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

Как и в предыдущих случаях, для начала перейдите в место получения и настройки кнопки.

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

Начну с того, что самым простым способом, если у вас WordPress, является просто установить какой-нибудь плагин для этого дела. Какой? Я, например, пользовался Juiz Social Post Sharer. А вообще, просто введите в поиске плагинов слово social и просмотрите, что там есть. Преимущество тут только в том, что вам, вероятно, не придется ничего настраивать.

Яндекс тоже разработал страницу, на которой вы можете настроить и поставить себе кнопки. На этой страничке вы можете выбрать нужные сервисы (а их примерно 25). Справа вы можете выбрать внешний вид блока. Это могут быть счетчики, которые будут показывать, сколько раз на кнопки нажали пользователи. Это, в свою очередь, поможет вам отслеживать, полезен ли материал читателям.

JavaScript. Быстрый старт

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

Теперь вам нужно найти файл с кодом, который выводит статьи. В wordpress, например, он обычно называется single.php или подобным образом. Итак, если вам нужно поставить блок с кнопочками после статьи, ищем строчку the_content. Именно за ней можно вставить код. Вам очень поможет, если разработчик вашего шаблона делал комментарии в коде.

Редактировать файлы сайты можно некоторыми способами. Например, сделать это напрямую через админку движка (внешний вид — редактор). В этом случае код не подсвечивается, поэтому ориентировать в нем не так удобно. Другой способ – через ftp. Подключитесь к сайту с помощью ftp-клиента, перейдите в wp-content – themes. Тут нужно найти тот шаблон, который является активным у вас в данный момент. Заходим в него и находим тот самый single.php или ищем что-то похожее по названию.

В самом файле с кодом найдите строчку the_content с помощью поиска (Ctrl + F). Вставьте где-нибудь после нее этот код.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Вы можете выбрать стиль кнопок, настроить их фон, положение и размер. Также можно выбрать иконки со встроенным счетчиком. А еще одним преимуществом кнопок от Pluso является их потрясающий внешний вид и возможность встроить их в практически в любой дизайн.

Когда все настроено, просто копируем код и вставляем его в том месте, где хотим увидеть соответствующий блок.

Если предыдущие варианты вам чем-то не понравились, есть другой способ, как поставить кнопки социальных сетей на сайт. Это сервис share42.com. Назван так, наверное, потому, что на момент создания в нем было 42 кнопки социальных сервисов, хотя на данный момент их 43.

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

Иконки, которые вам нужно, нужно выбрать, кликнув по ним мышкой. Отдельно хочу отметить наличие таких интересных возможностей, как добавление в избранное браузера, ссылка на rss и кнопка «Наверх».

Далее вы можете выбрать тип панели: горизонтальная или вертикальная? И если выбрана вторая, то количество кнопок можно ограничить. Кодировку я рекомендую оставить UTF-8. Вы можете также добавить иконку самого сервиса в комплект кнопок, чтобы пользователи с вашей странички могли перейти на него и установить себе тоже эти кнопки.

Также если вы планируете добавить иконку rss, то обязательно нужно указать адрес вашего фида, а если хотите показывать количество нажатий по кнопкам, должны быть отмечены две последние галочки.

Ниже есть 2 кнопки. Первая позволяет взглянуть, как будут выглядеть социальные кнопки, которые вы настроили. С помощью второй скачивается скрипт. Его нужно загрузить через ftp к себе на сайт в корневую папку.

Следующим шагом укажите на странице сервиса путь к этой папке. Зачастую достаточно заменить site.com на ваше доменное имя. Все, остается вставить код, выбрав перед этим cms, на которой работает ресурс. Куда вставлять код вы уже должны понимать, я надеюсь.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

На сайте сервиса вы точно не потеряетесь. Ровно посередине находится кнопка установки скрипта, по нажатии на нее нам будет предложено 2 варианта. Я рекомендую первый, подключение через CDN. Копируем код и вставляем его куда нибудь в подвал сайта, перед закрывающим тегом body. В wordpress нужно вставить в footer.php.

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

Это самое главное преимущество сервиса по сравнению с конкурентами, о которых я напишу в этой же статье. Оно заключается в том, что вы сами можете настроить внешний вид иконок так, как нужно вам! Также в качестве преимущества этого способа я хотел бы отметить то, что скрипт не грузит сервер и не влияет отрицательным образом на скорость загрузки страниц, потому что он очень легкий и грузиться из CDN.

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

Где:
data-type – название соц. сети. Его вы можете посмотреть в документации.
data-counter – счетчик, который считает количество нажатий по кнопке. Возможно, он вам не нужен, тогда можно его попросту не писать. Если почитаете документацию, то увидите, что счетчик поддерживается не везде.

С помощью css-стилей, конечно же. Сейчас я вам покажу на примере одной кнопки, которая у меня есть. Оформить кнопку очень легко, обратившись к ней по ее data-атрибуту. Для этого нужно знать о селекторах атрибутов. Если вам ничего о них не известно, просто делайте как я покажу, но если хотите разобраться в теме, то вот о них.

Ну а я открою style.css и в самом конце файла опишу стили для кнопки:

Div{ background: #25496F; border-radius: 50%; color: #fff; max-width: 80px; padding: 10px; text-align: center; font-size: 18px; cursor: pointer; }

Как видите, я использовал селектор атрибута, чтобы дотянуться до нее. Отлично. Все стилевые правила объяснять не буду, получилась вот такая штука:

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

Тем временем я сделал уже 3 кнопки:

Пускай они немного примитивны, но что мешает сделать их них конфетки? К тому же даже в таком виде они уже уникальны, таких кнопок нет нигде, потому что лично я только что их сделал.

Короче, скрипт от Goodshare для тех, кому нужна свобода в настройке соц. кнопок. Хотите свободы? Получите, распишитесь.

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

На странице сервиса вы можете выбрать один из восьми стилей отображения кнопок, можете выбрать, какие сети показывать в первой строчке, а какие спрятать под плюс. Чуть ниже вы можете дополнительно настроить дизайн.

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

Дополнительно вы можете указать конкретный адрес страницы, которая будет расшариваться. Это нужно очень редко. Дело в том, что по умолчанию при нажатии на кнопку в соц. сеть отправляется адрес той страницы, на которой стоят кнопки. Если же вы укажете конкретный адрес расшариваемой страницы, то где бы эти кнопки у вас ни стояли, они будут отправлять в соц. сеть только 1 страницу, которую вы указали. Я незнаю, для чего это вам. В 99% случаев просто оставьте пустыми эти поля.

Share 42 — это еще один полезный сервис, который позволит вам установить социальные кнопки на сайт. Чтобы начать установку, перейдите http://share42.com/ru на сайт. Радует, что тут все настройки на одной странице. Вы можете выбрать размер иконок и те из них, которые вам необходимо. Для этого 1 раз кликните по иконке.


На этом скриншоте вы можете увидеть, что я выбрал 6 кнопок для использования. Далее ниже вам нужно выбрать дополнительные опции. В принципе, там все интуитивно понятно. Все те поля и галочки необязательны для заполнения.

Далее сервис предлагает вам посмотреть, как будут выглядеть ваши кнопки, после чего скачать скрипт с ними к себе на компьютер. Этот скрипт надо будет разархивировать. Внутри будет папка share42. Вы должны закинуть ее к себе на сайт. Смотрите сами куда именно. Можно просто в корень, но я рекомендую непосредственно в шаблон.

Теперь вам нужно на сайте сервиса ввести путь к папке, куда вы закинули скрипт. Например, если вы забросили его в шаблон, то путь будет примерно таким:
http://site.name/wp-content/themes/название-шаблона/share42/
Ну это если у вас сайт на wordpress. Кстати, тут же вам сервис предлагает выбрать, какой у вас движок. Выбираем нужный вариант.

После того, как путь к папке со скриптом указан, и cms выбрана, остается скопировать сгенерированный кусок кода и вставить его в том месте, где вы хотите видеть эти самые кнопки. В wordpress, например, наверняка вы захотите добавить их после каждой записи. Для этого переходим в single.php , находим, где заканчивается вывод статьи и вставляем туда код. Теперь кнопки появятся под каждой статьей. Вот так они выглядят в моем случае:

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

У темы, которая у вас установлена, есть список шаблонов. Среди них должен быть single.php , что означает — одиночная запись (пост, статья). Именно в это файл нужно вставить скопированный код. Однако если вы вставите в самое начало, то кнопки будут перед статьей.

Даже если вы не знаете HTML я дам вам подсказку. Если вы планируете вставить кнопки в начале статьи, то найдите в коде шаблона первый блок (div) и вставьте код туда. Хорошо, когда в коде шаблона есть комментарии разработчика. Опирайтесь на них. Например, POST START, CONTENT START, POST END — такие пометки явно показывают, что здесь начинается или заканчивается статья.

Видите в коде "bp_after_post_content"? Тут даже интуитивно понятно, что это уже конец статьи. Именно перед этим фрагментом кода я создал блок, куда и вставил код Яндекс кнопок.

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

А как добавить в wordpress социальные кнопки? Плагин Juiz Social Post Sharer может помочь вам в этом. О нем я уже писал в . Кстати, там есть еще один вариант добавления кнопок социальных сетей — API Яндекса.

Что ж, ну а на этом я буду заканчивать. И так получилось около 5-6 способов добавления кнопок, если соединить 2 статьи. Какой-то из них наверняка понравится и вам.

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

Иногда, когда я читаю очень полезную статью, я хочу ее как-нибудь сохранить. Не ну тут конечно есть очень много вариантов, как это сделать. Например, сделать скриншот, скопировать весь текст в блокнот, скачать в виде pdf и т.д. Но во всех этих случаях владелец сайта особой пользы не получает, да и все это далеко не самые удобные способы сохранения информации.

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

Вообще есть три основных варианта:

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

Над статьей. Это гораздо менее распространено. Тут расчет делается на заголовок и первые абзацы публикации. Например, увидел я заголовок “102 варианта приготовления каши”. О, интересно, сразу нажал, сохранил себе в соц. сеть, чтобы позже радовать себя разнообразием за столом.

Сбоку (вертикальное расположение + фиксация). Также достаточно распространенный вариант. Он подходит для сайтов, где сбоку есть место для расположения там узенького блока. Обычно в таком случае соц.сетей немного, от 3 до 10, чтобы поместиться по высоте на экране.

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

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

Но решение есть! Это кнопки от GoodShare. Вот так прямо и введите в поиске, и вам наверняка выдаст их сайт. Скрипт от goodshare очень легкий и простой, устанавливается с пары кликов (можно подключить из очень быстрого CDN). Если вы верстальщик или хоть немного разбираетесь, я не буду вам объяснять, как устанавливаются скрипты, потому что вы в курсе.

Гораздо более важная информация – это непосредственно вывод кнопок. В том месте шаблона, где нужно вывести иконку, например, ВК, вставляем такой код:

При этом span data-counter является необязательным элементом. Это счетчик, который будет показывать кол-во кликов по иконке. Чтобы он работал, у вас должна быть подключена jQuery. В большинстве случаев счетчик вам не нужен, поэтому этот кусок кода вам не нужен. Собственно, все остальные кода есть в документации:

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

Кстати, а как же эти самые кнопки стилизовать? Ну тут есть 2 выхода. Вы можете просто добавить каждой новый стилевой класс, а можно использовать селекторы атрибута. Вот так:

div{...}

Этим селектором можно прописать стили для кнопки расшаривания записи в социальную сеть Вконтакте.

Как видите, скрипт от goodshare дает отличные возможности. Он максимально оптимизирован и позволяет создать любой вид соц. кнопок.

Другие способы

Или любой подходящий плагин для вашего движка. Я уверен, таких расширений достаточно много. Просто вбейте в поиск по плагинам слова вроде “social” и “share” и сразу получите что-то такое.

Я не буду подробно объяснять установку кнопок с помощью этих способов, потому что она проходит по одному сценарию и вам всего лишь нужно следовать инструкции сервисов.

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

Сервисы, которые я использовал на сайтах клиентов и на своём блоге — и . Эти сервисы позволяют достаточно легко реализовать поставленную задачу.

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в . Все стили сведены к минимуму. Плюс простой каркас html.

Мы же рассмотрим классический вариант, когда кнопки расположены после статьи.

Сделать это можно либо открыв файл, отвечающий за вывод статей (single.php ) и в исходный код добавить блок социальных кнопок. Либо это можно сделать через файл функции темы (functions.php ).

Я покажу оба варианта, а вы для себя выберите подходящий.

Предупреждение: Пред началом всех действий сделайте резервную копию файла single.php!

Открываем административную панель Вордпресс – «Внешний вид» — «Редактор» — «Одна запись (single.php)» .

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

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

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

А вот и сам html код блока социальных кнопок:

","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="facebook "> &subject=","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="livejournal "> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="twitter "> ","sharer","toolbar=0,status=0,width=700,height=400");" href="javascript: void(0)" class="odnoklassniki "> &target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote "> ","sharer","toolbar=0,status=0,width=812,height=585");" href="javascript: void(0)" class="digg "> . Каждая ссылка имеет свой класс, через который присваивается изображение кнопки.

На этом вставка через исходный код закончена. И далее нужно подключить css стили.

Предупреждение: пред началом работ, — сделайте резервную копию файла functions.php!

Для того чтобы использовать это вариант, нужно открыть файл functions.php и в самом конце добавить этот код:

Пояснения по коду: место, где будут выставлены кнопки социальных сетей, определяется через API ключ comments_template . По этому ключу определяется место перед комментариями. Сам код соцкнопок заключён в обратные теги открытия и закрытия php. В коде я их обозначил красным цветом. в этом вся хитрость вставки html кода в php, через функции темы.

На этом и это способ окончен, переходим к загрузке изображений на сайт.

Для примера я подготовил несколько спрайтов с изображениями социальных кнопок. Скачать их можете .

Спрайт, который я использую в качестве примера, весит всего 3,97 кб и содержит только необходимые кнопки. А раз это спрайт, то и запрос к базе всего одни, а не для каждой кнопки в отдельности.

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

Этот шаг можно конечно, выполнить самым первым, но я предпочитаю вначале выполнить всю сложную техническую работу, а уже после приступить к приятным мелочам с css стилями.

Итак, открываем файл style.css, отвечающий за дизайн вашего сайта. И вставляем вот эти стили:

Share a { display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test..png ") no-repeat scroll 0px 0px transparent;} .share a.vkontakte { background: url("http://test..png ") no-repeat scroll -168px 0px transparent; } .share a.google { background: url("http://test..png ") no-repeat scroll -252px 0px transparent; } .share a.livejournal { background: url("http://test..png ") no-repeat scroll -336px 0px transparent; } .share a.twitter { background: url("http://test..png ") no-repeat scroll -42px 0px transparent; } .share a.mail { background: url("http://test..png ") no-repeat scroll -294px 0px transparent; } .share a.odnoklassniki { background: url("http://test..png ") no-repeat scroll -126px 0px transparent; } .share a.pinterest { background: url("http://test..png ") no-repeat scroll -210px 0px transparent; } .share a.liveinternet { background: url("http://test..png ") no-repeat scroll -378px 0px transparent; } .share a.evernote { background: url("http://test..png ") no-repeat scroll -420px 0px transparent; } .share a.bookmark { background: url("http://test..png ") no-repeat scroll -462px 0px transparent; } .share a.email { background: url("http://test..png ") no-repeat scroll -504px 0px transparent; } .share a.print { background: url("http://test..png ") no-repeat scroll -546px 0px transparent; } .share a.digg { background: url("http://test..png ") no-repeat scroll -588px 0px transparent; } .share a.spring { background: url("http://test..png ") no-repeat scroll -630px 0px transparent; }

Пояснения по коду: класс.share определяет общий вид блока, размеры каждой кнопки, отступы и задаёт единый фон. А далее каждая ссылка имеет свой класс и каждой такой ссылке, через свойство background присваивается вид кнопки. Кнопки выполнены в качестве css спрайта, и каждая кнопка имеет ширину и высоту 40px, а между ними отступ 2px, что позволяет с точностью определить изображение для каждой кнопки. То есть первая кнопка указана, как 0, а вторая как 42 и так далее. В коде эти значения обозначены оранжевым цветом. Ссылка на спрайт тоже выделена оранжевым цветом, её вы меняете на путь к своему спрайту.

На этом весь процесс создания своего блока социальных кнопок – закончен. Можно смело переходить к проверке.

А ещё у меня есть видеоурок, в котором весь процесс показан наглядно, полюс показана работа самих кнопок. Смотрите и внедряйте на своих сайтах и блогах.

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