Как установить кнопки социальных сетей в один ряд?

Здравствуйте дорогие мои читатели — Sozdaiblog.ru!

В этой статье Вы узнаете, как установить кнопки социальных сетей в один ряд.

Сегодня, у Вашего покорного слуги день варения!

И мне, немного-нимало стукнуло 29 лет!

Чуть – чуть до трёх десятков не дотянул, ну это ничего я никуда пока не спешу.

Некоторое время назад мной была написана статья – «Как установить кнопки социальных сетей».

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

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

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

Вот и в этом случае, после определённого геморроя всё-таки нашлось оптимальное решение (извините за вульгарность).

Как установить кнопки социальных сетей в один ряд.

У меня этот фокус получился следующим образом.

Каждый код кнопки социальных сетей, я обернул тегом — <div>.

Затем внутри тега , прописал стиль — style=float: и указал место, где кнопка должна находиться — right

(в моём случае справа).
.
И ко всему, добавил возможность изменять расстояние друг от друга, при помощи — width : 16%.

После долгих мучений у меня получился вот такой код:

<div style="float: right;">
<a href="https://twitter.com/share" rel="nofollow" data-via="SOZDAIBLOG" data-lang="ru">Твитнуть</a>
<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script></div>

<div style="float: right; width: 16%;"><!-- Поместите этот тег туда, где должна отображаться кнопка +1. -->

</div>

<div style="float: right; width: 28%;"><!-- Put this script tag to the place, where the Share button will be -->
<script type="text/javascript">// <![CDATA[
document.write(VK.Share.button(false,{type: "round", text: "Понравилось"}));
// ]]></script></div>

<div style="float: right; width: 28%;">
<div data-send="false" data-layout="button_count" data-width="0" data-show-faces="true" data-font="arial"></div>
</div>
<div style="clear: both;"></div>

Можете опуститься в конец поста и посмотреть на мои труды.

Поиграйтесь со значениями – «width : 16%» и подгоните их по вашей теме оформления.

В конце всего кода, обязательно поставьте строчку:

<div style="clear: both;"></div>

иначе всё расплывётся.

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

Переходите по ссылке.

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

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

Здесь каждый сам вправе выбирать, что ему удобнее.

Мой совет:

Во время установки кнопки от Facebook,  поменяйте внутри её кода значение ширины на «0» (data-width="0"). Иначе будут проблемы.

Вот вроде и всё.

Расскажите пожалуйста, а как Вы укротили эти кнопки?

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

Ну, а Ваш покорный слуга пойдёт справлять именины, а то без меня, всё вкусное съедят!

С уважением, Денис Черников!