Привіт! Мене звуть Рікардо Прієто, і я працюю (і пишу) над веб-дизайном, версткою та досвідом роботи в SiloCreativo, звідки ми допомагаємо людям розробляти свої проекти за допомогою підручників, порад та ресурсів.
Знижка 20%
Теми WordPress, такі як Divi, за 1 долар кожна
Кілька місяців тому ми переробили наш веб-сайт, і однією з тем, яка завжди піднімала нас у голові, були кнопки соціальних мереж для обміну контентом. Дискусія завжди велася навколо двох питань, з одного боку розташування бару партнераl (вертикальний або горизонтальний, плаваючий або статичний) і з іншого боку соціальні мережі, які ми б включили в межах цього соціального бару (твіттер, facebook, pinterest ...).
Щодо розташування соціальних значків, ми чітко усвідомлювали, що це повинно залишатися якомога непоміченішим, оскільки найголовніше, що користувач читає вміст, і якщо він йому подобається і вважає його корисним, то він може ним поділитися. Ось чому ми побачили розташування мережевих кнопок цікавим в кінці статті, щоб користувач, прочитавши його, міг поділитися ним. Пам’ятайте, спочатку користувальницький досвід.
Але надання можливості скористатися кнопками, щоб поділитися ним у будь-який час, здавалося хорошим варіантом і для нас. Для цього ми мали розробити плаваючу соціальну клавіатуру Він відображатиметься фіксованим у вертикальній частині екрана, коли ми знаходимося на робочому столі, і горизонтально в нижній частині на мобільних телефонах і планшетах. Ми зробили кілька дизайнів та тестів з HTML та CSS, і тут ми ділимось одним із варіантів, який нам сподобався найбільше.
Виправлена панель соціальних медіа з HTML та CSS3
Для цієї конструкції, орієнтованої на мобільні телефони та планшети, ми обрали турнік, який залишайтеся на внутрішній стороні екрана, займаючи 100% ширину. Вибраними соціальними мережами є Facebook, Twitter, Pinterest та WhatsApp, які є чотирма, що дають нам найкращі результати щодо нашого контенту. Ми також додали ще два блоки, один з яких переходить до форми підписки на розсилку, а інший - для переходу до наступної статті.
HTML складається з окремого контейнера зі списком ul, де кожен із соціальних значків буде елементом списку.
Контейнер, що виділяється з класом .social-sharing, буде самою соціальною панеллю і буде позиціонуватися як фіксований (хоча в прикладі ви бачите його абсолютним, оскільки позиціонувати його у вікні прикладу, створеному для цієї мети, лише так ).
Для організації соціальних піктограм ми вибрали flexbox, надавши піктограм чотирьох соціальних мереж фіксовану ширину (40 пікселів) і розподіливши залишок місця між блоком розсилки та посиланням для переходу до наступної статті.
Що стосується соціальних значків, ми дотримувались описаних тут кроків та принципів. Використання того самого шрифту значків (у цьому випадку - FontAwesome), який ви вже використовуєте на своєму веб-сайті в меню значків гамбургера, або пошук піктограм Twitter, Facebook та інших мереж - позитивний момент, оскільки ми не додаємо зображення та не беремо додаткової плати на наш веб-сайт. Використання псевдоелементів CSS дозволяє нам генерувати ці соціальні піктограми без зображень і правильно їх бачити на екранах сітківки.
Цей CSS застосовується глобально до всієї Інтернету, але якщо ви хочете обмежити його так, щоб він відображався лише на мобільних телефонах і планшетах, тоді ви повинні використовувати медіазапит і містити в ньому всі правила CSS.
Плагіни плаваючої соціальної панелі та інші опції
Вам може здатися дивним, що у випадку проекту, що виконується в WordPress, ви вирішили розробити соціальну панель за допомогою HTML і CSS, а не використовувати один із багатьох плагінів, що існують для створення панелі кнопок. Правда полягає в тому, що у версії 2.0 SiloCreativo ми використовуємо плагін Jetpack з його модулем спільного використання, але ми прийняли рішення припинити його використання.
Причина дуже проста. Більшість плагінів використовують власні бібліотеки значків, нові стилі та деякі інші файли JS. Це для збільшення навантаження на Інтернет, щоб нарешті доведеться змінювати стилі, щоб дати їх нашому дизайну. Єдине, що ми втратили, - це можливість підрахувати, скільки разів він ділився в мережах, але, чесно кажучи, це не здається причиною з достатньою вагою для завантаження 3 або 4 додаткових файлів, окрім відповідних дзвінків на підрахувати кількість акцій.
Тому ми обрали щось легше (лише HTML та CSS) та настроюване, де ви можете додати, як ви бачили підписку на розсилку, на додаток до переходу до наступної статті. Що ви думаєте про це рішення? Як у вас є соціальні іконки, реалізовані на вашому веб-сайті?