Социальные кнопки в одну строку с формой подписки E-mail

социальные кнопки в одну строкуВ статье приводится код, который позволяет выставить кнопки социальных сейтей в одну строку, как у меня на сайте в конце статей.

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

Отныне буду отправлять всех на эту страницу))

Выглядит все примерно вот так:

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

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

Размещать будем следующий набор кнопок (в произвольной последовательности): Facebook, Google, Twitter, Mail.ru, Одноклассники. При желании можно разместить и другие (просто читайте дальше).

Итак, что нам понадобится:

  • текстовый редактор (я рекомендую Notepad++)
  • код, который я предоставлю ниже
  • немного фантазии

Поехали.

Код социальных кнопок

Следующий код необходимо поместить до закрывающего тега </head> (для WordPress: находится в файле header.php обычно):

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

Данный код позволит отрабатывать кнопке +1 от Google.

Следующий код помещаете сразу же после открывающего <body> (он так же будет в header.php сразу после </head>):

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Данный код отвечает за отработку кнопки Like от социалки FaceBook.

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

Кнопки в одну строку и добавляем форму подписки по E-mail

Теперь остается выбрать место, где будут размещены необходимые нам кнопки и вставляем приведенный ниже код с небольшими правками под себя (об этом ниже):

<table><tbody><tr>
<td><div class="g-plusone" data-size="medium"></div></td>
<td><div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="trebuchet ms"></div></td>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-via="mojWP" data-lang="ru" data-hashtags="mojWP">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>
<td><a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'caption-mm' : '1', 'caption-ok' : '2', 'counter' : 'true', 'text' : 'true', 'width' : '100%'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></td>
</tr>
<tr><td colspan="4"><form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Mojwpru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><h4>Подпишитесь на обновление сайта по почте:</h4></p><p><input type="text" style="width:200px;margin:10px;" name="email"/><input type="hidden" value="Mojwpru" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input style="width:140px; margin:10px 0 0 5px;" type="submit" value="Подписаться" /></form>
</td></tr></tbody></table>

Итак, что я Вам в коде предложил.

Во-первых: все сделано через таблицу. Данный факт позволяет разобраться любому новичку в HTML, т.к. проще уже не куда. На помощь справочник и самоучитель HTML.

Вставив сразу код у вас все будет слитно, но это поправимо. Я специально не давал параметры настройки отступов кнопок на своем сайте, т.к. на каждом они индивидуальны и зависят от шаблона. На помощь тот же справочник HTML (ссылка выше), либо статья на моем сайте CSS. Ознакомившись с ними у вас не возникнет проблем.

Далее. В форме подписки и кнопки Твиттера есть упоминание Mojwp. В этих местах необходимо заменить на свой RSS в Feedburner.google.com (просто свое имя подставьте вместо моего) и аккаунт Twitter.

Немного информации о таблицах HTML для новичков

Выше в коде есть теги, которые поясню для новичков:

<table> // открываем таблицу
...
</table> // закрываем таблицу
<tr> // открываем строку (то, что горизонтально выводится)
...
</tr> // закрываем строку
<td> // открываем ячейку (в ней помещена каждая кнопка социальной сети)
...
</td> // закрываем ячейку

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

<td colspan="4"> // говорим таблице, что эта ячейка займет по ширине 4 ячейки из таблицы

Последнее было применено в отношении формы подписки по электронной почте, т.к. она расположилась в той же таблице под кнопками. Спросите почему 4, хотя кнопок 5 представлено? Так кнопки Mail.ru и Одноклассников объединены в один скрипт разработчиком.

Послесловие

В статье представлена вся информация, которая позволит отобразить кнопки социальных сетей горизонтально, как у меня. Комментарии, типа: "А у меня не получилось" не принимаются. Ответ один: "ЧИТАЙ ВНИМАТЕЛЬНЕЕ СТАТЬЮ!!!" и переходи по ссылкам, которые в ней указываются.

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 39 комментариев
  1. Олег (4 комм.) says:
    http://helplife.com.ua

    Все мы уже тут, читаем ) ) )

  2. Мишко (1 комм.) says:
    http://unsofted.ru

    Давно хотел такое замутить 🙂 . На новом блоге 100% реализую.

  3. Марат (5 комм.) says:
    http://102news.ru

    Спасибо, это как раз то, что я искал 🙂 Лень было возиться с таблицами =)

  4. xalls (5 комм.) says:
    http://comp-on.ru/prodvizhenie-sayta-pod-pingvinom/

    Дело то хорошее, будем пробовать.

  5. Андрей (4 комм.) says:
    http://oeseo.info

    обязательно себе поставлю , по- моему нужная вещь

  6. Женя (58 комм.) says:
    http://tut-blog.ru

    Люблю ваши посты из-за доступного кода, который понятный и не тяжелый.

  7. Павел (66 комм.) says:
    http://pavgri.blogspot.com

    А почему вы не ставите кнопку от ВКонтакте?

  8. Knockie (7 комм.) says:
    http://knockie.ru

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

  9. seogrot (68 комм.) says:
    http://seogrot.com/

    Примерно так же у себя на блоге реализовывал, только остановился пока на двух кнопках (tweet и +1).

  10. Pavel (56 комм.) says:
    http://healthbps.ru/

    А зачем так много кнопок? И внизу статьи и справа еще они же. Так действительно больше количество людей по ним нажимают или просто для красоты?

    • Виталий (1675 комм.) says:

      снизу и справа немного разные функции несут, кроме +1 гугла. Кликни и проверь)

  11. Yablochkin (1 комм.) says:
    http://redapp.ru

    Всё отлично, всё поставилось, но остался один вопрос - как сделать выравнивание этих кнопок? Иначе кнопки твиттера и fb находятся слишком близко.

    • Виталий (1675 комм.) says:

      либо css, либо таблицей и задать размер ячеек

  12. Анна (4 комм.) says:
    http://omnycknik.com

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

    • Виталий (1675 комм.) says:

      взять в отдельный контейнер div и задать ему свойства css

  13. Facepook (9 комм.) says:
    http://besplatnyeprogrammy.ws/

    Установил у себя на сайте) вроде неплохо получилось)

  14. Иван (2 комм.) says:
    http://blogomoney.ru

    Спасибо за материал, буду реализовывать у себя на блоге

  15. Андрей (1 комм.) says:
    http://salatyk.ru

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

    • Виталий (1675 комм.) says:

      не понял, какая отдельно взятая страница вам нужна

  16. Артём (83 комм.) says:
    http://blog-artema.ru/

    Супер статья, спасибо разместил кнопки и код подписки + добавил кнопки от pluso, чтобы больше социалок было доступно, выглядит симпотичненько.
    Только вот мне непонятно одно, почему у меня не все коды виджетов которые я добавляю отображаются только в админке, когда выхожу из админки wordpress, виджетов нет, получается что их вижу только я, может знает кто почему так?

    • Виталий (1675 комм.) says:

      Не совсем понятная формулировка вопроса. Попробуйте еще раз)

      • Артём (83 комм.) says:
        http://blog-artema.ru/

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

        • Виталий (1675 комм.) says:

          Приблизьтесь поближе к экрану монитора...
          Даю установку: почистите кеш плагина Hyper Cache

          • Артём (83 комм.) says:
            http://blog-artema.ru/

            Спасибо, Виталий, очень быстро ответили, даже неожиданно =)
            У вас кстати классный блог и материал интересного много.

          • Артём (83 комм.) says:
            http://blog-artema.ru/

            Блин, а вот теперь совсем тупой вопрос: как почистить кеш плагина Hyper Cache =)

          • Виталий (1675 комм.) says:

            В его настройках есть соответствующая кнопка "Очистить кеш", насколько я помню. Посмотрите. Может называться чуть по-другому.

  17. Артём (83 комм.) says:
    http://blog-artema.ru/

    Clear Cache, всё отобразилось.
    Спасибоо Виталий)

  18. Василий (1 комм.) says:
    http://pollza.ru

    Отличная статья, берём на заметку))

  19. Александр (3 комм.) says:
    http://aff-forex.ru

    Спасибо автору за труд! Но у меня как все наоборот получилось - все встало вряд, а надписи типа "Подпишитесь на обновление сайта по почте:" и "Подписаться" - за место их треугольники с вопросиками внутри, подскажите как быть?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Открыть редактируемый файл шаблона в Notepad++ и пересохранить в кодировке UTF-8 без BOM http://prntscr.com/360eat

      • Александр (3 комм.) says:
        http://aff-forex.ru

        Спасибо большое, помогло! А как добавить другие кнопки социалок, у меня только 3 их?

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

          В первом предложении данной статьи есть ссылка.

          • Александр (3 комм.) says:
            http://aff-forex.ru

            спасибо!

  20. Павел (4 комм.) says:
    http://albaruthenia.ru

    В принципе всё ясно, но! Я вот плохо разбираюсь в CSS и html, мне вот не понятно как регулировать ячейки, автор сознательно не внёс в код параметры настройки ( ну а что сложно? каждый себе потом цифры замени), я и представить себе не могу как это сделать. И ваша другая статья про CSS ни чем не помогла.

  21. Павел (4 комм.) says:
    http://albaruthenia.ru

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Ну как не счесть за труд?))) Может вы хотели сказать "не сочтите за наглость"?
      Раз уж вам лень почитать справочник HTML, на который дана ссылка в статье, то:

      <td width="30%">

      или

      <td width="20px">
      • Павел (4 комм.) says:
        http://albaruthenia.ru

        Спасибо, а как сделать, что бы не было видно линий ячеек и таблицы?

        • Виталий (1675 комм.) says:
          http://mojWP.ru/

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

  22. Павел (4 комм.) says:
    http://albaruthenia.ru

    Так же столкнулся с интересной фигнёй. Почему то не отображается кнопа ВК, у меня одна есть (в начале статьи), она видна. Я это же код поместил и в низ, в таблицу. А она не видна не понятно почему. В шедере ведь один код для вк должен быть ? мне же не нужно ещё один такой же ставить?

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.09MB | MySQL:109 | 0,787sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html