Социальные кнопки в одну строку

Социальные кнопки в одну строку

22.10.201270805

У всех социальных сетей есть свои собственные кнопки, которые позволяют быстро поделиться новостью на друзьями или просто для того, чтобы показать свой интерес к прочитанному. Не все кнопки похожи, но благо то, что на многих популярных соц. сетях есть настройки для таких кнопок. Выбрав для всех одинаковую высоту, Вы сможете поместить кнопки в одну строку. Конечно, Вы можете использовать оригинальные иконки социальных сетей, по нажатию на которые будут открываться окна для отправки ссылки в профиль. Но предпочтительней использовать «родные» кнопки. Они, в основном, не открывают дополнительные окна, что ускоряет отправку ссылки. В социальных сетях ВКонтакте, Facebook, Twitter, Google Plus, Мой мир и Одноклассники есть возможность выбрать высоту 20 пикселей. Это компромисс. Ниже будет показана пошаговая инструкция, как создать свои кнопки, а пока посмотрите на специальный код, который позволит осуществить вывод кнопок соц. сетей в одну строчку.

Также посмотрите акриловые ванны Kolpa San, это интересно, и выгодно. Если и выбирать ванны, то только эти.

Код HTML

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

Code
<div style="height:20px">

<div style="width:150px;overflow:hidden;float:left">
ВКонтакте
</div>

<div style="width:105px;overflow:hidden;float:left">
Twitter
</div>

<div style="width:135px;overflow:hidden;float:left">
Facebook
</div>

<div style="width:70px;overflow:hidden;float:left">
Google Plus
</div>

<div style="width:230px;overflow:hidden;float:left">
Мой Мир и Одноклассники
</div>

</div>

Получить кнопку ВКонтакте

Кнопки в одну строку должны иметь одну и ту же высоту. Получить виджет можно здесь. Из вариантов следует выбрать «Кнопка с миниатюрным счётчиком». Высоту выбираем 20px. Копируем код, вставляем вместо названия «ВКонтакте» в коде выше.

Кнопка Твитнуть

Перейдите на страницу получения кнопочки. Тут она сразу имеет нужный нам формат. Копируем код, вставляем в нужное место.

Facebook Like

Получить код можно на соответствующей странице. Ширину нужно взять 200. Кнопку для отправки скрыть (снять галочку), вариант выбрать простой со счетчиком.

Google +1

Кнопку от Google Plus ставьте обязательно. Сгенерировать код можете здесь. Размер возьмите второй, и вариант со счетчиком.

Нравится и класс

Это последние кнопки в строке. Вот страница. Главное, оставьте размер второй. Текст на кнопках можно убрать вообще, это сэкономит место значительно.




Сохраните в социальную сеть
Комментарии (5)
Очень интересное решение, Спасибо очень помогло
1
Гость 28.04.2013 в 23:25Спам
Здравствуйте. Хотел спросить как можно сделать, как у Вас внизу каждой статьи соц. сети красиво стоят?
2
Артем Бойко 28.09.2013 в 12:56Спам
Как сделать по центру?
0
Дмитрий 30.01.2014 в 18:28Спам
Кнопки нравится и класс,при переходе у меня только одна кнопка мой мир а одноклассников кнопки нет,хотя я там зареган,не подскажите как мне кнопку одноклассников поставить?
0
Норм, только у facebook текст на фоне следующей кнопки, как пододвинуть чтобы текст влезал
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт