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

29 Дек 2011 в 15:01

Кнопки «Поделиться» позволяет вашим посетителям размещать ссылку на страницу вашего сайта в социальных сетях или блогах.

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

Для построение кнопочек социальных сетей в один ряд, я использую код HTML для построения таблиц.

Для этого пишу код:

<div>
<table>
  <tr> <!—строка таблицы  -->
    <td style="text-align: center;" >Код кнопки</td> <!—столбец таблицы--> 
  </tr>
</table>
</div>
<td>...</td>

- столбцы таблицы. Повторяем столько раз, сколько нужно вставить кнопок.

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

<table BORDER="1">

А еще лучше,так это вставить скрипт блока "Поделится", который выстроит все кнопочки в ряд, и который нашла на сервисе «Хостинг JavaScript-библиотек»:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>

<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj"></div>

И получится красиво 🙂

01.04.2013

Со времени написания статьи появился еще один сервис, который предлагает код социальных кнопок для сайтов - это сервис сайта PLUSO.

Буду благодарна за комментарий!

Буду благодарна, если Вы поделитесь этой статьей:

0

Рубрики: 2.2. Настройка WordPress

Обсуждение
Отзыв Виктория 18 ноября 2011

Круто! Осталось понять, куда все это втыкнуть))))))

[Ответить]

Отзыв Виктория 21 ноября 2011

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

[Ответить]

Отзыв Виктория 21 ноября 2011

У меня есть еще один наболевший вопрос: какой плагин установить, чтобы видеть количество просмотров определенной статьи?
Спасибо.

[Ответить]

Валентина Ответил(а):

Для этих целей я использую плагин WordPress Popular Posts

[Ответить]

Отзыв Виктория 1 декабря 2011

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

[Ответить]

admin Ответил(а):

Виктория, Спасибо за использование материалов моего сайта в Вашей работе! рада очень, что Вам он помог! Удачи Вам!

[Ответить]

Отзыв Виктория 3 декабря 2011

Валентина, спасайте! Воруют фото с моего сайта! Как сделать вотермарк? Помогите!

[Ответить]

admin Ответил(а):

Виктория, запретить копировать фотки с сайта не возможно. Ведь почти все умеют пользоваться кнопкой Принт Скрин, как минимум. Накладывайте на фотки водяные знаки!

[Ответить]

Отзыв Виктория 7 декабря 2011

Вотермарк работает отлично)))))

[Ответить]

Отзыв Виктория 7 декабря 2011

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

[Ответить]

admin Ответил(а):

Очень рада, что мои труды кому-то пригодились 🙂

[Ответить]

Отзыв Кино любитель 26 декабря 2013

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

[Ответить]

Валентина Ответил(а):

А как этот код доработать на любое разрешение экрана? Вы случайно не знаете?

[Ответить]

Кино любитель Ответил(а):

Не знаю. Нужно спрашивать у тех, кто такими вещами занимается.

[Ответить]

Ваш отзыв