Как поставить социальные кнопки на блог. Часть 2

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

Добрый день друзья! Наконец-таки я нашла несколько минут, что бы написать продолжение статьи как поставить социальные кнопки на блог, но не с помощью плагинов ВордПресс, а обычным способом. Я уже описывала как поставить кнопку retweet или как установить кнопку мне нравиться, но до сегодняшнего дня я так и не знала как установить социальные кнопки в одни ряд.

Как поставить соц кнопки в ряд

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

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

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

Для начало нам нам необходимо определиться:

  1. Какие социальные кнопки будет устанавливать?
  2. Какие виды кнопок будем выбирать? (маленькие, большие, горизонтальные квадратные, с счетчиком или без)

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

Для вашего удобства скину ссылки на сервисы.


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

--</pre>
<div id="social-knopki"><!-- Cоц. кнопки --></div>
<pre>
--

Дальше  помещаем мини контейнеры типа: контейнер твитер, контейнер вконтакте и тд.


</pre>
<div id="social-knopki">
<!--Кнопулька twitter-->
<div id="twi"><a class="twitter-share-button" href="http://twitter.com/share" data-count="vertical" data-via="IncantaM">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js">// <![CDATA[</div>

<!--Кнопулька ГугляПлюся-->

<div id="pluse">
<g:plusone size="tall"></g:plusone></div>

<!--Кнопулька Фейсбук-->

<div id="face">

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js#appId=177887922277426&xfbml=1">
// ]]></script></div>
<!--Кнопулька Вконтакте-->
<div id="vk"><script type="text/javascript">// <![CDATA[
VK.Widgets.Like("vk_like", {type: "vertical"});
// ]]></script></div>
<!--Кнопулька AddThis-->
<div id="AddThis"><!-- AddThis Button BEGIN --><script type="text/javascript">// <![CDATA[
var addthis_config = {"data_track_clickback":true};
// ]]></script><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e204d023a477369"></script><!-- AddThis Button END --></div>
</div>
<pre>

Важный момент. К каждой кнопки я присвоела значение ID,

</pre>
<div id="twi">
<div id="pluse">
<div id="face">
<div id="vk">
<div id="AddThis">

Теперь нам нужно зайти в Внешний вид — Редактор — Список стилей (style.css) и копируем этот блок. Каждой кнопки мы прописали флоат и теперь они должны располагаться в рядок

#twi {
 float: left;
 width: 60px;
 }

 #vk {
 float:left;
 width: 50px;
 }

 #pluse {
 float:left;
 width: 60px;
 }

#face {
 float: left;
 width: 60px;
 }
#AddThis {
 float: left;
 width: 50px;
 }

А еще мы может красиво социальные кнопки расположить внутри блока


#social-knopki {
 height: 70px; /*Эта штука отвечают за высоту рамки*/
 padding: 16px; /*внутренние поля*/
 margin: 10px; /*внешние поля*/
 background: #cadaba; /*Эта штука отвечает за фон внутри рамки*/
 border: 1px solid #7b917b; /*Эта штука отвечает за толщину рамки в рх, стиль и цвет*/
 }

Стоит обратить внимание, если вы хотите сделать что бы в Твитере упомянут был ваш ник замените data-via="IncantaM" — ИнкантаМ на свой.  Если вы не хотите квадратные кнопки, а например прямоугольные, то в какой кнопке надо заменить пару слов, например в твитере  data-count="vertical"  на data-count="horizontal".

Так я сделала себе, а вот нашла как красиво оформлены кнопульки.

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

Хороших выходных. Инканта.

Метки: ,

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

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

Отзывов (11) на «Как поставить социальные кнопки на блог. Часть 2»

  1. Спасибо, все очень понятно!

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

    Теперь исправлюсь.

    Удачи Вашему блогу!

  2. Наталья, спасибо за комментарий! Вот я тоже с ними долго мучалась, а оказалось все так просто.

     

    П.С поставила новый плагин «Невидимая капча» собственно без капчи и больше никто не комментирует статьи пару дней, вроде как даже немного обиделась, подумала что наверно никому не интересно, потом вспомнила про плагин нашла вот одни комментарий, остальные иероглефы какие-то 

  3. Спасибо, очень пригодится для следующего блога,так как на первом уже что-то менять страшновато

  4. Большое спасибо за информацию! Попробую установить недостающие.

  5. Кнопочки очень нужный элемент для сайта, тем более что это способствует продвижению, так как из соц. сетей идёт неплохой трафик. Спасибо!

  6. [...] Кстати, о социальных кнопках. О них вы могли немного и на моём блоге почитать, но [...]

  7. max:

    Спасибо! то что искал выручили!. =)

  8. [...] рекомендую оставлять анонсы постов, а так же стоит установить социальные кнопки. (Твитер и Фейсбук, на мой взгляд именно пухлые длинные [...]

  9. Внимательно читаю ваши обучалки. Пыталась кнопочки в ряд поставить на свой блог. Но неудачно. Не получается.

    И еще — незадача. В комментариях у меня не выводятся граватары.

    В админке они есть, а на сайте нет.

    И смайлики надо бы. Может вы статью напишете, как поставить нормальные комментарии на блог.

Ваш отзыв