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

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

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

  1. Кнопки каких социальных сетей вы хотите сделать.
  2. Общее количество этих кнопок.
  3. Все кнопки должны быть одинаковыми, т.е. либо все горизонтальные, либо все квадратные.
  4. Обратить внимание на то, что у Facebook нужно отказаться от опции показывать фото друзей - снять галочку с фразы "Show Friends' Faces", а в Google+ нужно примечание выбрать "Всплывающее".

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

  • Twitter
  • Facebook
  • Вконтакте
  • Мой мир
  • Одноклассники
  • Google+
UPD от 02.07.2015: Когда была написана эта статья, ещё не было варианта кнопки Google+ со счетчиком. Такой вариант появился позже. И первоначально мой блок предполагал 5 кнопок социальных сетей в ряд. Но я решила внести изменения в имеющуюся статью, чтобы информация была наиболее полной, добавила кнопку Google+. Но, к сожалению, 6 кнопок не помещаются в стандартную ширину большинства блогов. Поэтому ниже я расскажу, как можно иначе оформить кнопки.

Результат вы можете увидеть в тестовом блоге, внизу страницы все шесть кнопок расположены в один ряд.

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

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

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

Для кнопки Google+ (для всех, кроме владельцев блогов на Blogger) и Вконтакте помимо самого кода кнопки нужно внести дополнительный код перед закрывающим тегом </head>.

Для кнопки Google+

<script src="https://apis.google.com/js/platform.js" async="" defer="defer">// <![CDATA[
{lang: 'ru'}
// ]]></script>

Для кнопки Вконтакте

<script src="//vk.com/js/api/share.js?90" type="text/javascript" charset="windows-1251"></script>

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

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

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

<data:post.body/>

В общем, как и во многих других рекомендациях, это самое лучшее место. Итак, после этой строчки размещаем такой код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-button'>
<!--Google Plus-->
<div id='bplus'>
<div class='g-plusone'/>
</div>
<!-- Google Plus END --><!-- Odnoklassniki -->
<div id='bodcl'>
<div id='ok_shareWidget'/>
<script>
!function (d, id, did, st) {
var js = d.createElement(&quot;script&quot;);
js.src = &quot;http://connect.ok.ru/connect.js&quot;;
js.onload = js.onreadystatechange = function () {
if (!this.readyState || this.readyState == &quot;loaded&quot; || this.readyState == &quot;complete&quot;) {
if (!this.executed) {
this.executed = true;
setTimeout(function () {
OK.CONNECT.insertShareWidget(id,did,st);
}, 0);
}
}};
d.documentElement.appendChild(js);
}(document,&quot;ok_shareWidget&quot;,document.URL,&quot;{width:145,height:30,st:&#39;rounded&#39;,sz:20,ck:1}&quot;);
</script></div>
<!-- Odnoklassniki END --><!-- VKontakte -->
<div id='bvk'>
<!-- Put this script tag to the place, where the Share button will be -->
<script type='text/javascript'>
document.write(VK.Share.button(false,{type: &quot;round&quot;, text: &quot;Сохранить&quot;, eng: 1}));
</script></div>
<!-- VKontakte END --><!-- Twitter -->
<div id='btwi'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<!-- Twitter END --><!-- Facebook -->
<div id='bface'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='lucida grande' href='' layout='button_count' send='false' show_faces='false' width='90'/></div>
<!-- Facebook END --><!-- Moy Mir -->
<div id='bmail'><a class='mrc__plugin_uber_like_button' data-mrc-config='{&apos;cm&apos; : &apos;1&apos;, &apos;sz&apos; : &apos;20&apos;, &apos;st&apos; : &apos;2&apos;, &apos;tp&apos; : &apos;mm&apos;}' href='http://connect.mail.ru/share' target='_blank'>Нравится</a>
<script charset='UTF-8' src='http://cdn.connect.mail.ru/js/loader.js' type='text/javascript'/></div>
<!-- Moy Mir END --></div></b:if>
Итак, что мы сделали. Мы создали общий контейнер social-button, в который поместили все кнопки. Каждая кнопка находится в собственном контейнере.
  • Кнопка Twitter в контейнере с ID btwi
  • Кнопка Facebook в контейнере с ID bface
  • Кнопка Вконтакте в контейнере с ID bvk
  • Кнопка Мой мир в контейнере с ID bmail
  • Кнопка Одноклассники в контейнере с ID bodcl
  • Кнопка Google+ в контейнере с ID bplus

Но пока все кнопки стоят в столбик. Это происходит из-за того, что контейнер <div> – блочный элемент и по природе своей всегда выстраивается под предыдущим. А вот чтобы выстроить кнопки в ряд, мы пропишем каждому контейнеру свойство float.

Находим в шаблоне код ]]></b:skin> и перед ним добавляем:

#btwi, #bface, #bvk, #bmail, #bodcl, #bplus {
float:left; /*выстраивает кнопки в ряд*/
width:16%; /*ширина для каждой кнопки*/
}
.social-button {
padding: 16px; /*внутренние поля*/
margin:10px; /*внешние поля*/
}

Как вы видите, помимо свойства float, я указала единую для всех кнопок ширину. Но, возможно, вам потребуется для каждой кнопки в отдельности прописать свою ширину. Тогда сделайте примерно так для каждой отдельной кнопки, указав ее идентификатор:

#bface {
width: 80px;
}

Как писала выше, изначально в статье описывалось 5 кнопок, и на странице примера все пять кнопок вставали идеально. Но, когда добавила шестую кнопку от Google+, все кнопки в блок не поместились. Что можно предпринять? Во-первых, вы можете отказаться от какой либо кнопки, просто удалив ее код, во-вторых, вы можете сделать как я - разделить кнопки в два ряда. Если вы хотите сделать так же, то заключите первые три кнопки в блок:

<div class="social-button-top">здесь код первых трех кнопок</div>

А 4,5 и 6 кнопку в другой блок

<div class="social-button-bottom">здесь код последующих трех кнопок</div>

А в стили добавьте код:

.social-button-top, .social-button-bottom {
height:21px;
margin: 4% 4% 4% 10%; /*внешние поля можно менять на свое усмотрение*/
}
#btwi, #bface, #bvk, #bmail, #bodcl, #bplus {
float:left;
width:30%;
}

Обратите внимание, во-втором варианте для всех кнопок задается ширина 30%.

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

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

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

Теперь стоит поговорить о том, как оформить блок кнопок в рамку. Для этого у нас будет задействован главный контейнер social-button.
Просто применяем ему примерно такой стиль:

#social-button {
height: 20px; /*высота блока*/
padding: 16px; /*внутренние поля*/
margin:10px; /*внешние поля*/
border: 1px solid #2288BB; /*рамка – толщина, стиль, цвет*/
}

Вы можете регулировать все значения на ваше усмотрение.

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

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


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

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

  1. Olga Pasynkova

    Спасибо за хорошее решение.

    У меня на днях появился вопрос, сейчас установлены соц кнопки с помощью сервиса Яндекса. В статистике кнопки заметила, что статьи не всегда добавляют в соц сети с правильным адресом, то есть
    в конце адреса может быть
    #more
    или
    ?utm_source=BP_recent
    (это когда на статью перешли с виджета Последние сообщения). Хотелось бы, как то закрепить постоянный адрес
    , что бы именно он добавлялся с помощью кнопок. Помогите пожалуйста, если можете! Как всегда благодарна заранее за любой ответ.

  2. SEO-Дилетант'ка

    Что касается #more, то это не страшно, это не ссылка, это якорь на странице, т.е. он не создает дублирования. Относительно других адресов, подобные проблемы решаются с помощью 301 редиректа, если блог на Blogger, то мы таким редиректом пользоваться не можем. В инструментах для вебмастера от Google можно настроить (Конфигурация сайта — настройки — обработка параметров), чтобы эта поисковая система игнорировала такие ссылки, а вот в Яндексе такого решения пока нет и способов защитить блог от дублирования пока не известно.

  3. SEO-Дилетант'ка

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

    вынести за пределы контейнера social-button, т.е. весь этот контейнер поместить внутри тега
    , и контейнеру social-button прописать фиксированную ширину, например, в 355 px.

  4. SEO-Дилетант'ка

    Тег «центер» поможет после того, как вы пропишите ширину блоку.

    Где вы прописывали стиль для контейнера
    social-button (рамка, высота), там и ширина указывается — width:355px; (включайте логику, в статье все есть, делайте по аналогии:))

  5. Pavel Kling

    Возникла проблема,счетчик «twee» не изменяется . Стоит на нуле,хотя мой пост в twitter сохранили 2 раза

  6. SEO-Дилетант'ка

    Павел, обратите внимание на этот абзац в статье:

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

    Я не создаю кнопки, я только привела пример, как уже готовые кнопки от разработчиков можно расположить в своем блоге.

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

  7. Danidar

    Спасибо, Катюш, за пост! Вроде бы получилось. Правда кнопка Вконтакте особнячком, почему то, встала. По-разному пытался регулировать, но не хочет она приближаться к остальным и все:)) Да и пусть.
    У меня вопрос немножко не по теме. Как создаются странички — подразделы, например, как у тебя: SEO — Продвижение- Оптимизация — Интструменты с URL search/label ?

  8. Kristi_blond

    У меня почему то они все равно стоят в столбик, хотя изначально один раз встали в строку, после этого я решила изменить расстояние и потом не получалось в строку, я уже просто копирую и вставляю и все равно не работает, а скажите можно сделать под датой сразу вверху поста эти кнопочки?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *