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

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

Ну да ладно, это статья на самом деле не о шаблонах. Сегодня я бы хотел Вам рассказать о том, как установить кнопки социальных сетей на свой сайт (Facebook, Вконтакте и твиттер). Знаю, знаю, в интернете сейчас море статей про установку социальных кнопок, но… Когда я искал информацию по установке этих трех кнопок, я не нашел ни одной толковой статьи про их установку и настройку, возможно плохо искал… В общем чтобы установить и настроить отображение социальных кнопок мне пришлось потратить уйму времени, и после этого я решил передать Вам результат моих действий в виде этой статьи. Получилось у меня или нет – решать Вам! Давайте приступим!

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

Прежде всего, они удобны пользователю. Дело в том, что в нынешние времена в нашей жизни крепко укрепились социальные сети. Например, социальную сеть Вконтакте, ежедневно посещает более 30 миллионов человек в день! Так вот, люди любят делиться интересной информацией. Когда посетитель зайдет на Ваш блог, прочтет какую либо статью, и она ему понравится, он увидит знакомую ему социальную кнопку и решит поделиться Вашей записью у себя на странице. Запись тут же отобразится на его странице, и в новостной ленте, а это значит, что статью увидят все друзья этого человека. Возможно, и его друзьям понравится Ваша статья, и они также будут делиться ей, продвигая,  таким образом, Вас и ваш блог.

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

А теперь приступим к самой установке, и начнем, пожалуй, с социальной сети Вконтакте…

Кнопка мне нравится Вконтакте

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

Чтобы установить кнопку мне нравится Вконтакте, перейдите по этой ссылке и увидите вот такое окно:

Здесь Вам нужно подключить Ваш сайт к соц. сети Вконтакте. Ставим пункт ”Подключить новый сайт”, затем вводим желаемое название сайта и пишем адрес самого сайта. Поле “Основной домен сайта” заполняется автоматически. Жмем “Сохранить”. Следующим шагом настроим вид самой кнопки:

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

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

Первую часть кода (выделена красной рамкой) нужно вставить в файл header. php перед тегом </head>.

Вторую часть кода (выделена черной рамкой) вставляем в нужное место в файл single.php

Получаем кнопку мне нравиться Вконтакте на наш блог. Как видим, все проще чем кажется на самом деле. Следующая кнопка которую мы установим, будет кнопка мне нравится от Facebook.

Кнопка мне нравится от Facebook

По аналогии с кнопкой Вконтакте, идем на страницу генерации кнопок от Facebook и создаем новую кнопку.

На страницы генерации кнопки нам нужно заполнить следующие поля:

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

Поле “Send Button” означает что Вы, можете отправить Вашему другу Вашу запись. Это интересное нововведение появилось совсем недавно.

Поле Layot style отвечает за стиль кнопки. Здесь уже настраиваете по Вашему желанию.

Show Faces – показывать лица?

Verb to display текст кнопки “мне нравится” или “рекомендовать”. Like – мне нравится, recommend – рекомендовать.

Color Scheme позволяет выбрать цветовую гамму кнопки (light – светлая, dark — темная).

Font позволяет выбрать шрифт кнопки.

После создания кнопки, нажимаем “Get code”, чтобы получить код вставки кнопки на Ваш сайт. Откроется вот такое окно:

Первую часть кода (выделена красным) вставляете в файл header.php после тега <body>. Вторую часть (выделена черным) опять же вставляете в нужное место в файл single.php

Вот таким способом, мы получаем кнопку like от Facebook. Идем дальше. Следующая кнопка Twitter

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

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

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

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

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

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

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

Мы имеем три кода, которые выводят кнопку определенной социальной сети. Первый код (у меня это кнопка от Вконтакте) я обернул тегом <div style=»float:left;»> Т.е. в данном случае кнопка будет находиться слева. Следующую кнопку я обернул тегом <div style=»float:left; width : 25%»> Как видим, появился новый параметр ;width : 25% — расстояние между кнопками, его настраиваем как Вам нужно. Последнюю кнопку я обернул в тег  <div style=»float:right; width : 25%»> здесь все тоже самое, только вместо параметра left, выставлен параметр right, т.е. кнопка находится справа. Вот какой код у меня получился целиком:

<div style="float:left;">
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script><br>
</div>
<div style="float:left; width : 25%">
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</div>
<div style="float:right; width : 25%">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="life_webmaster" data-lang="ru">Твитнуть</a>
</div>

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

Ваш комментарий

  1. Спасибо за пост, добавлю себе тоже кнопки.

  2. Спасибо за пост. Взял на заметку. Вот на днях собираюсь это сделать.

  3. Статья очень пригодилась когда выставлял кнопки соц.сетей у себя в интернет-магазине, отдельное спасибо за то, что показали, как выставить в одну линию — это просто очень классный совет!

  4. А я блок от Яндекса поставил. Быстро и удобно :)

    • Кирилл Тараненко:

      А мне, честно говоря, не нравится блок от Яндекса. Ну не солидно он выглядит как-то

  5. Катерина:

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

  6. Ярослав:

    Спасибо, пригодилось:)

  7. Подскажите, а почему вы не используете различные «альтернативные» решения, позволяющие получить кнопки здесь и сейчас? Например, Social Share Buttons предоставляет такую возможность (хотя ВК все равно придется подключать отдельно)

    • Кирилл Тараненко:

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

  8. Так а куда последний- финальный код вставлять?

  9. Статья полезная для работы. Но как с сервисом Pluso. С ним сразу все кнопки в одну линию и все одним махом.

  10. А как избавится от тега <a тоесть ссылки на твиттер? Не очень хочется наставлять на каждой странице ссылку на один и тот же сайт. Это ведь сквозная ссылка и их лучше избегать.

  11. Мне больше нравится социальные кнопки PLUSO, удобно и красиво.