Социальные кнопки в одну строку с формой подписки 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 ячейки из таблицыПоследнее было применено в отношении формы подписки по электронной почте, т.к. она расположилась в той же таблице под кнопками. Спросите почему 4, хотя кнопок 5 представлено? Так кнопки Mail.ru и Одноклассников объединены в один скрипт разработчиком.
Послесловие
В статье представлена вся информация, которая позволит отобразить кнопки социальных сетей горизонтально, как у меня. Комментарии, типа: "А у меня не получилось" не принимаются. Ответ один: "ЧИТАЙ ВНИМАТЕЛЬНЕЕ СТАТЬЮ!!!" и переходи по ссылкам, которые в ней указываются.
Вам, фактически, остается только настроить отступы и внешний вид таблицы. Все для этого есть на данной странице. Дерзайте.
Похожие записиЧеркани пару строк- Олег
Все мы уже тут, читаем ) ) )
- Мишко
Давно хотел такое замутить 🙂 . На новом блоге 100% реализую.
- Марат
Спасибо, это как раз то, что я искал 🙂 Лень было возиться с таблицами =)
- xalls
Дело то хорошее, будем пробовать.
- Андрей
обязательно себе поставлю , по- моему нужная вещь
- Женя
Люблю ваши посты из-за доступного кода, который понятный и не тяжелый.
- Павел
А почему вы не ставите кнопку от ВКонтакте?
- Knockie
Мне кажется панель от яндекса намного удобнее, там одним скриптом поставишь себе все нужные кнопки
- seogrot
Примерно так же у себя на блоге реализовывал, только остановился пока на двух кнопках (tweet и +1).
- Pavel
А зачем так много кнопок? И внизу статьи и справа еще они же. Так действительно больше количество людей по ним нажимают или просто для красоты?
- Виталий
снизу и справа немного разные функции несут, кроме +1 гугла. Кликни и проверь)
- Yablochkin
Всё отлично, всё поставилось, но остался один вопрос - как сделать выравнивание этих кнопок? Иначе кнопки твиттера и fb находятся слишком близко.
- Виталий
либо css, либо таблицей и задать размер ячеек
- Анна
Все получилось и оказалось не так страшно! Правда страница сливается и на светлом фоне выглядит не так красиво. Виталий, а как можно сделать, чтобы блок формы подписки отделялся от статьи?
- Виталий
взять в отдельный контейнер div и задать ему свойства css
- Facepook
Установил у себя на сайте) вроде неплохо получилось)
- Иван
Спасибо за материал, буду реализовывать у себя на блоге
- Андрей
Виталий, добрый день. Подскажи пожалуйста, а как сделать такую подписку в отдельно взятую страницу на блоге? Все, что я не пробовал вставлять, все получается в 2 слоя. Т.е. окно для имэил и кнопка подписаться.
- Виталий
не понял, какая отдельно взятая страница вам нужна
- Артём
Супер статья, спасибо разместил кнопки и код подписки + добавил кнопки от pluso, чтобы больше социалок было доступно, выглядит симпотичненько.
Только вот мне непонятно одно, почему у меня не все коды виджетов которые я добавляю отображаются только в админке, когда выхожу из админки wordpress, виджетов нет, получается что их вижу только я, может знает кто почему так?
- Виталий
Не совсем понятная формулировка вопроса. Попробуйте еще раз)
- Артём
Ну, вы можте сейчас глянуть на мой блог и ответить отображаются ли у вас кнопки лайков и форма подписки в конце статей?
Просто для меня они отображаются только когда я залогинен в админке.
- Виталий
Приблизьтесь поближе к экрану монитора...
Даю установку: почистите кеш плагина Hyper Cache
- Артём
Спасибо, Виталий, очень быстро ответили, даже неожиданно =)
У вас кстати классный блог и материал интересного много.
- Артём
Блин, а вот теперь совсем тупой вопрос: как почистить кеш плагина Hyper Cache =)
- Виталий
В его настройках есть соответствующая кнопка "Очистить кеш", насколько я помню. Посмотрите. Может называться чуть по-другому.
- Артём
Clear Cache, всё отобразилось.
Спасибоо Виталий)
- Василий
Отличная статья, берём на заметку))
- Александр
Спасибо автору за труд! Но у меня как все наоборот получилось - все встало вряд, а надписи типа "Подпишитесь на обновление сайта по почте:" и "Подписаться" - за место их треугольники с вопросиками внутри, подскажите как быть?
- Виталий
Открыть редактируемый файл шаблона в Notepad++ и пересохранить в кодировке UTF-8 без BOM http://prntscr.com/360eat
- Александр
Спасибо большое, помогло! А как добавить другие кнопки социалок, у меня только 3 их?
- Виталий
В первом предложении данной статьи есть ссылка.
- Александр
спасибо!
- Павел
В принципе всё ясно, но! Я вот плохо разбираюсь в CSS и html, мне вот не понятно как регулировать ячейки, автор сознательно не внёс в код параметры настройки ( ну а что сложно? каждый себе потом цифры замени), я и представить себе не могу как это сделать. И ваша другая статья про CSS ни чем не помогла.
- Павел
Не сочтите за труд, вышлите мне пожалуйста такой же код, только на 3 ячейки под соц.сети, с элементами отвечающими за ширину ячейки. С проставленными размерами. А я уже заменю коды на свои и подгоню размер. Буду очень признателен
- Виталий
Ну как не счесть за труд?))) Может вы хотели сказать "не сочтите за наглость"?
Раз уж вам лень почитать справочник HTML, на который дана ссылка в статье, то:
или
- Павел
Спасибо, а как сделать, что бы не было видно линий ячеек и таблицы?
- Виталий
Почитать справочник HTML или обратиться за услугами к верстальщику, чтобы вам все сделал.
- Павел
Так же столкнулся с интересной фигнёй. Почему то не отображается кнопа ВК, у меня одна есть (в начале статьи), она видна. Я это же код поместил и в низ, в таблицу. А она не видна не понятно почему. В шедере ведь один код для вк должен быть ? мне же не нужно ещё один такой же ставить?