Как сделать социальные кнопки горизонтально и в рамке

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


Итак, прежде, чем мы начнем, необходимо определиться:

1. Кнопки каких социальных сетей вы хотите сделать.
2. Общее количество этих кнопок.
3. Все кнопки должны быть одинаковыми, т.е. либо все горизонтальные, либо все квадратные.
4. Обратить внимание на то, что у Facebook, Вконтакте и Мой мир в коде кнопок можно указать, будут ли появляться фото тех пользователей, которые сделали Like. Чтобы все кнопки поместились в один ряд, придется отказаться от этой функции.

Я буду расставлять следующие кнопки:

• Twitter
• Facebook
• Вконтакте
• Мой мир
• Одноклассники

Результат вы можете увидеть в тестовом блоге.

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

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

Несколько напоминаний, кто впервые будет устанавливать кнопки социальных сетей к себе в блог.

Для кнопки Вконтакте необходимо получить собственный API, а также внести дополнительный код перед закрывающим тегом </head>, подробнее можете прочитать в этой статье.

Для кнопки Класс от Одноклассников также потребуется указать дополнительный код в head и в body, подробнее про это читайте в этой статье.

Все это вкратце вы можете узнать и по ссылке на шпаргалку выше.

Кнопки социальных сетей по горизонтали

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