БлогВеб-мастерингУстанавливаем кнопки социальных сетей в один ряд

Устанавливаем кнопки социальных сетей в один ряд

likeВсем привет. В этой статье разберемся, где взять кнопки таких социальных сетей как Вконтакте, Твиттер, Фейсбук и Гугл+, а также с тем, как сделать, чтобы эти кнопки располагались ровно в один ряд. У новичков, которые решили установить себе такие кнопки, часто это не получается, и кнопки наезжают одна на другую, либо просто располагаются друг под другом.

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

кнопки социальных сетей

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

1. Кнопка “Твитнуть” от Твиттера.

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

Затем из предложенных вариантов кнопок выберите “Отправить URL-адрес”. После выбора необходимо заполнить все данные:

кнопки социальных сетей

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

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

2. Кнопка “Мне нравится” от Вконтакте.

Заходим на страницу разработчиков Вконтакте и заполняем все необходимые данные для получения кнопки:

кнопки социальных сетей

Если вы еще не подключали ваш сайт в панели разработчиков, то первым делом делаем это – вводим название сайта, его адрес, выбираем тематику и жмем “Сохранить”. Далее выбираем вид кнопки, ее высоту и название. Ниже в окошке появляется код для вставки, который нам и нужен.

Этот код состоит из двух частей. Первая часть:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>

<script type="text/javascript">
VK.init({apiId: 1234567, onlyWidgets: true});
</script>

Эту часть нужно вставить между тегами ‹head› и ‹/head› (для этого откройте файл header.php), но если вы на своем сайте уже используете какие-нибудь виджеты Вконтакте, например комментарии, то эту часть кода вам вставлять уже не надо, так как она уже у вас есть.

Вторую часть кода, а именно:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

необходимо скопировать так же, как и код для кнопки “Твитнуть”, этот код понадобится позже.

3. Кнопка Google +1.

Заходим на эту страницу и, как обычно, заполняем все данные.

кнопки социальных сетей

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

<g:plusone size="medium" annotation="none"></g:plusone> 

Вторую часть кода помещаем в файл header.php между тегами ‹head› и ‹/head›:

<script type="text/javascript">
window.___gcfg = {lang: 'ru'};

(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = '<a href="https://apis.google.com/js/plusone.js';">https://apis.google.com/js/plusone.js';</a>
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

4. Кнопка “Мне нравится” от Facebook.

И, наконец, получим код для кнопки “Мне нравится” Фейсбука. Для этого переходим на страницу разработчиков и видим там такую панель:

кнопки социальных сетей

Поле “URL to Like” оставляем пустым, в списке “Layout” выбираем нужный стиль оформления кнопки и убираем галочки “Show Friends’ Faces” и “Include Share Button”. После этого нажимаем кнопку “Get code”.

Первую часть кода вставляем сразу после открывающегося тега ‹body› в файле header.php (не нужно этого делать, если вы уже устанавливали комментарии Facebook), а вторую часть сохраняем.

Итак, мы нашли коды для всех кнопок, теперь нужно все эти кнопки вставить в нужное нам место в конце статьи в один ряд.

Для этого открываем файл single.php и находим там место, где заканчивается статья. Обычно текст статьи в wordpress заключен в тег ‹div class=»entry»›‹/div›.

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

<div class="social_button">
<div class="twitter"><a rel="nofollow" href="<a href="https://twitter.com/share">https://twitter.com/share"</a> class="twitter-share-button" data-via="a_emelianov" data-lang="ru">Твитнуть</a></div>
<div class="vk"><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", height: 20});
</script></div>
<div class="googleplus"><div class="g-plusone" data-size="medium"></div></div>
<div class="facebook"><div class="fb-like" data-send="false" data-layout="button_count" data-width="200" data-show-faces="false"></div></div>
</div>

Как видите, весь блок имеет класс social_button, а также каждая кнопка имеет свой отдельный класс: кнопка твиттера – класс twitter, кнопка вконтакте – vk, кнопка google+ имеет класс googleplus, и кнопка фейсбука – facebook.

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

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

.social_button{
height: 25px;
margin: 10px;
width: 500px;
}
.twitter{
float: left;
}
.vk{
float: left;
}
.facebook{
float: left;
}
.googleplus{
float: left;
}

Все, готово. Теперь в конце ваших статей должны стоять красивые и аккуратные кнопки социальных сетей. К этим кнопкам можно добавлять любые другие кнопки, предварительно, по аналогии, “завернув” их код в тег ‹div›‹⁄div› с нужным классом.

На сегодня это все, надеюсь все понятно объяснил 🙂 . Если возникнут какие-нибудь проблемы, пишите в комментариях – разберемся.

Понравилась статья? Подписывайтесь на мой RSS канал rss канал, следите за мной в Твиттере , или получайте статьи по почте:

15 отзывов к записи "Устанавливаем кнопки социальных сетей в один ряд"

  1. Анатолий

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

  2. Елена

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

    • Seostager
      Елена, на сайт бы посмотреть со вставленным кодом. просто так не скажешь 🙂 напишите в обратную связь
  3. Лёля

    У меня кнопки вставились не под запись, а в самый низ сайта

    • Seostager
      Лёля, значит вы вставили код не в то место 😉
      • Лёля

        Я вставила их в те файлы о которых вы писали в самый низ кода. А куда нужно?

        • Seostager
          нужно вставлять не в низ кода, а, например, после блока div class=»entry», как написано в статье
  4. Ирина

    Здравствуйте!

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

    Может быть, можете что-то подсказать для решения этой проблемы?

    • Seostager
      Ирина, нужно смотреть код вставки. возможно есть лишние стили, которые конфликтуют друг с другом, поэтому кнопки обрезается
      • Ирина

        Буду признательна, если взглянете на код. Вот блог veganboom.blogspot.com.

  5. Ирина

    Здравствуйте. Дело в том, что я новичек среди чайников) Потому подскажите, куда именно вставлять первую часть кода для ВК и других кнопок, и где заканчивается эта первая часть и начинается вторая?
    PS. Кнопку твитнуть я установила без проблем)

    • Seostager
      Ирина, первую часть кода (она так и подписана) необходимо вставлять между тегами head /head, просто в статье эти теги исчезли), а вторую (тоже подписана) вставляете туда, где кнопка должна выводиться на сайте.
      • Ирина

        Здравствуйте. Все получилось. Но у меня с фейсбуком такая же проблема, как и у предыдущей Ирины)) Если знаете как ее решить — подскажите. 😕

  6. nemezida.su

    Привет. А зачем каждой кнопке присваивать разные классы, но одинаковые по сути? Может обявить один класс с float:left, назначить его диву и оборачивать кнопки?)

    • Seostager
      Конечно, можно и так 🙂 Я сделал для каждой кнопки свой класс, чтобы впоследствии каждой кнопке добавлять свои стили отельно.

Оставить свой отзыв


  • Использую
  • По месяцам
  • GoGetLinks - лучшая биржа для продажи и покупки вечных ссылок.
  • Beget - один из лучших хостингов России по всем показателям.
  • Sape - ссылки все еще работают. Лучшая биржа временных ссылок и не только.
  • 2domains - очень дешевые домены для ваших сайтов. Надежный сервис - пользуюсь сам.
  • Блогун - лучший сервис для размещения постовых и обзоров на блоге.