Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

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

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

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

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

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

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

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

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

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

Поехали.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Послесловие

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

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

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи.

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

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

  2. Мишко says:
    http://unsofted.ru

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

  3. Марат says:
    http://102news.ru

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

  4. xalls says:
    http://comp-on.ru/prodvizhenie-sayta-pod-pingvinom/

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

  5. Андрей says:
    http://oeseo.info

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

  6. Женя says:
    http://tut-blog.ru

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

  7. Павел says:
    http://pavgri.blogspot.com

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

  8. Knockie says:
    http://knockie.ru

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

  9. seogrot says:
    http://seogrot.com/

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

  10. Pavel says:
    http://healthbps.ru/

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

    • Виталий says:

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

  11. Yablochkin says:
    http://redapp.ru

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

    • Виталий says:

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

  12. Анна says:
    http://omnycknik.com

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

    • Виталий says:

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

  13. Facepook says:
    http://besplatnyeprogrammy.ws/

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

  14. Иван says:
    http://blogomoney.ru

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

  15. Андрей says:
    http://salatyk.ru

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

    • Виталий says:

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

  16. Артём says:
    http://blog-artema.ru/

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

    • Виталий says:

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

      • Артём says:
        http://blog-artema.ru/

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

        • Виталий says:

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

          • Артём says:
            http://blog-artema.ru/

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

          • Артём says:
            http://blog-artema.ru/

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

          • Виталий says:

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

  17. Артём says:
    http://blog-artema.ru/

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

  18. Василий says:
    http://pollza.ru

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

  19. Александр says:
    http://aff-forex.ru

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

    • Виталий says:
      http://mojWP.ru/

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

      • Александр says:
        http://aff-forex.ru

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

        • Виталий says:
          http://mojWP.ru/

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

          • Александр says:
            http://aff-forex.ru

            спасибо!

  20. Павел says:
    http://albaruthenia.ru

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

  21. Павел says:
    http://albaruthenia.ru

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

    • Виталий says:
      http://mojWP.ru/

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

      или

      • Павел says:
        http://albaruthenia.ru

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

        • Виталий says:
          http://mojWP.ru/

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

  22. Павел says:
    http://albaruthenia.ru

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

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

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

© 2011-2018 | mojwp.ru | Копирование материала разрешено только с письменного согласия
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!