Красиво оформляем социальные кнопки

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

Перед тем как начать, стоит сделать на всякий случай бекап. Может случайно удалите какой-то код или еще что.

Нам понадобиться всего лишь добавить несколько кодов в

  • Шапку
  • Футер
  • Одну запись
  • Стили

Нас интересуют самые распространенные кнопки. Контакт, Гугля, Твитер, Фейсбук. Мы их будем устанавливать в ряд.

Как установить кнопки мне нравятся на блог?

Шаг первый. В шапку нужно поместить кусок кода от контакта.  Я уже описывала этот тут подробно.

Заходим сюда  http://vk.com/developers.php?o=-1&p=Like

Заполняем поля, подключаем свой сайт. (Вводим название сайта, адрес) Затем — сохранить.

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

Кусок кода отмеченный на картинке копируем и вставляем в header.php. Межу <head></head>. С этим все. Идем дальше. Теперь мы будет устанавливать кнопку мне нравится от фейсбука.

Заходим http://developers.facebook.com/docs/reference/plugins/like/


Как установить кнопку фейсбук мне нравится

Собственно поклацайте сами и решите, какой стиль вам больше нравится.  После того, как копку настроили, нажимаем Get Code

Установить кнопку фейсбук

Пока что никуда не надо копировать. Я просто показала как и где взять этот код.

Устанавливаем кнопку гугл +

Следующий шаг.  Внешний вид — Редактор — Подвал.

Вставляем этот кусок кода перед </body>:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></pre>
{lang: 'ru'}
</script>

Пока что все.

Теперь мы заходим в Одну запись single.php , копируем код и вставляем после тегов или где вы хотите. Обычно перед комментариями ставят.

<div class="socials">
<div class="social v">
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>
</div>
<div class="social g">
<g:plusone></g:plusone>
</div>
<div class="social t">
<a rel=”nofollow” href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="incagma">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="social f">
<iframe src="//www.facebook.com/plugins/like.php?app_id=117414535029821&amp;href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
Дальше нужно настроить расположение и это делаем с помощью стилей. Открываем (style.css) Без разницы куда вставлять.
/* ----////// Социальные кнопки /////------- */
.socials {
 position: relative;
 height: 25px;
 margin-bottom: 10px;
}
.social {
 position: absolute;
}
.v {
 left: 0px;
}
.g {
 left: 160px;
}
.f {
 left: 240px;
}
.t {
 right: 0;
 z-index: 100;
}

Как установить красивые кнопки социальных сетей
Все. После этого у вас должны появиться все четыре кнопки. Возможно вы заметили, над кнопками появилась картинка. Вы тоже можете сделать себе такую. Написать в фотошопе. Поделись с друзьями или что-то в этом духе. Загрузить картинку на блог. Открыть «Одну запись» и вставить код картинки перед кнопками социальных кнопок.
Так же кнопки можно обводить, подчеркивать, обводить пунктирными линиями. Экспериментируйте, пробуйте что-то новое. И ваш блог обязательно запомнят.
Удачи!

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

Похожие статьи

Отзывов (23) на «Красиво оформляем социальные кнопки»

  1. Я ставил при помощи плагина и у меня не вышло так ровненько в ряд их выстроить, нужно в стилях покопаться.

    Марина, настройте РСС ленту на показ анонсов, мне кажеться это будет стимулировать читателей перейти на блог, а так Вы все интересное и сразу в ридер раздаёте.

    • Все же стоит использовать как можно меньше плагинов. Сами недавно писали в статье про ускорение блога. Нужно всего лишь один раз разобраться в этом

      Алексей, спасибо за совет. С фидом нужно по колдовать и навести красоту :P

  2. Классный обзор) Правда я уже выставил себе кнопочки красиво)

    Как там кстати обзор? Или его уже не стоит ждать?)

    • Следующий обзор будет сеоонли, потом polyova.com, потом твой :P И между обзорами по обычному посту. План такой.

      Постараюсь поскорей сделать и завершить с обзорами %)

  3. Спасибо, почти всё получислось *CRAZY*

  4. Сижу за компом в 3 часа ночи и переделываю кнопки.

    Спасибо, что сделали этот пост

    • Я тоже часто ночью сижу. Днем не могу найти места в квартире. Везде шумно. Моя комната уже N-ое количество дней в режиме ремонта. %)

      Если будут еще вопросы — пишите. Не могу обещать, что моментально напишу пост, но буду стараться.

  5. Спасибо большое за урок! Все получилось, хотя мне казалось, что это просто невозможно сделать (из уроков, которые я видела на других блогах). Вот только один вопрос, кнопочки растягиваются по ширине поля (поста). У меня оно очень широкое и получается некрасиво. Если непонятно объяснила, fotovknige.ru. Что надо изменить, чтобы сместить их все влево? Вашу замечательную картинку обязуюсь сменить на что-нибудь свое, в ближайшее время)))

    • Все просто — еще раз посмотрите на пост перед картинкой. Фраза «Дальше нужно настроить расположение и это делаем с помощью стилей».

      .v — кнопка вконтакте

      .g — кнопка гугл+

      .f — кнопка фейсбук

      .t — кнопка твитер

      И каждая кнопка имеют свое позицию. Например, кнопка гугл left: 160px; это значит, что кнопка смещена вправо на 160 пикселей, если хотите подвинуть < -- то уменьшаем число до 130 например, если хотите подвинуть в другую сторону ---> то left: 180px;

      Каждую кнопку по своему вкусу можно подвинуть.

      • Спасибо за ответ. Это я вроде понимаю. И даже перед тем, как задать вопрос пробовала изменить их позиции. Вот только с кнопкой твитер проблема.

        ее координаты .t {

        right: 0;

        z-index: 100;

        }

        и что только я не пробовала с ней делать (ставить другие значения right, пробовала left...), она всегда оказывается слева и перекрывает кнопку в контакте. Может дело в z-index. Я не знаю что это такое(((

        • Конечно, у кнопки твитер расположение z-index: 100;

          Просто уберите ее или измените значение.

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

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

          • Еще раз спасибо. Вообще убрала z-index, изменила положение кнопки твитер на left. Все встало просто замечательно!

            А на счет моего сайта расстроили(((. У меня, вроде, все как обычно неплохо грузится.

  6. Добрый день! По этому уроку поставила кнопки себе на блог fotovknige.ru. Все было замечательно около 2 недель. Вчера кнопка твитер перестала работать. Подскажите, пожалуйста, в чем может быть дело.

  7. Incanta, я понимаю что они на месте, только кнопка твитер не работает. На нее нажать нельзя(((. Вот в чем проблема. А что я где-то написала, что ее не было на месте?

  8. Incanta, нет не устанавливала. Я вообще ничего не могу понять. Началось все с того, что одна из моих читателей написала мне о том, что она не может нажать на кнопку Твитера. Я попробовала у меня тоже не получается (на днях нажимала все было нормально). Сегодня зашла в свою последнюю статью, а там четыре человека нажали на эту кнопку. Значит у них получилось))). Я естественно еще раз попробовала, ни какого результата. Почему же я не могу этого сделать) Мистика %)

  9. Incanta, всего доброго, я поняла, что вы не знаете ответа. Было бы честнее об этом сказать сразу, если нет времени и желания разбираться с поставленным вам вопросом. Удачи!

  10. Вот спасибо, до 2-х часов ночи мучался с выставлением этих дурацких кнопок в ряд, никак не ставали, а благодаря этой статье за 5 минут справился. Еще раз спасибо!

    З.Ы. моему сайту только 2 дня, поэтому он еще такой «страшненький»

  11. angel-mans:

    Incanta, а скажите когда вы опубликуете поправку к кнопе Facebook. У вас ошибка вылезает. Как это исправить?

Ваш отзыв