mojwp.ru
Назад

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

Опубликовано: 02.08.2012
39
688

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

Частые просьбы читателей все же заставили меня написать данную статью. Если Вы постоянный посетитель 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 ячейки из таблицы

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

Послесловие

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

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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Олег
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • Мишко
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • Марат
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • xalls
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • Андрей
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • Женя
    Опубликовано: 03.08.2012 Ответить на сообщение

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

  • Павел
    Опубликовано: 05.08.2012 Ответить на сообщение

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

  • Knockie
    Опубликовано: 05.08.2012 Ответить на сообщение

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

  • seogrot
    Опубликовано: 06.08.2012 Ответить на сообщение

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

  • Pavel
    Опубликовано: 07.08.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 07.08.2012 Ответить на сообщение

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

  • Yablochkin
    Опубликовано: 22.11.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 25.11.2012 Ответить на сообщение

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

  • Анна
    Опубликовано: 25.11.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 25.11.2012 Ответить на сообщение

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

  • Facepook
    Опубликовано: 14.12.2012 Ответить на сообщение

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

  • Иван
    Опубликовано: 03.04.2013 Ответить на сообщение

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

  • Андрей
    Опубликовано: 19.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 19.04.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 30.05.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 30.05.2013 Ответить на сообщение

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

      • Артём
        Опубликовано: 30.05.2013 Ответить на сообщение

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

        • Виталий
          Опубликовано: 30.05.2013 Ответить на сообщение

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

          • Артём
            Опубликовано: 30.05.2013 Ответить на сообщение

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

          • Артём
            Опубликовано: 30.05.2013 Ответить на сообщение

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

          • Виталий
            Опубликовано: 30.05.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 30.05.2013 Ответить на сообщение

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

  • Василий
    Опубликовано: 13.10.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 01.04.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 01.04.2014 Ответить на сообщение

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

      • Александр
        Опубликовано: 01.04.2014 Ответить на сообщение

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

        • Виталий
          Опубликовано: 01.04.2014 Ответить на сообщение

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

          • Александр
            Опубликовано: 01.04.2014 Ответить на сообщение

            спасибо!

  • Павел
    Опубликовано: 15.01.2015 Ответить на сообщение

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

  • Павел
    Опубликовано: 15.01.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 16.01.2015 Ответить на сообщение

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

      или

      • Павел
        Опубликовано: 16.01.2015 Ответить на сообщение

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

        • Виталий
          Опубликовано: 16.01.2015 Ответить на сообщение

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

  • Павел
    Опубликовано: 16.01.2015 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.