1. Важливість соціальних кнопок
2. Варіанти розміщення в шаблонах
3. Як додати на сайт кнопки соц. мереж: варіант для верстальників

Від автора: ми живемо в соціальне час. Сьогодні взаємодія з іншими людьми важливо як ніколи раніше, якщо ми говоримо про інтернет-бізнесі. У зв'язку з цим, багато хто замислюється, як додати соціальні кнопки на сайт, щоб поліпшити соціальні сигнали. Це дуже розумно, тому ми обов'язково повинні з'ясувати, як це робиться.

Важливість соціальних кнопок

Іноді, коли я читаю дуже корисну статтю, я хочу її як-небудь зберегти. Не ну тут звичайно є дуже багато варіантів, як це зробити. Наприклад, зробити скріншот, скопіювати весь текст в блокнот, скачати у вигляді pdf і т.д. Але у всіх цих випадках власник сайту особливої ​​користі не отримує, та й все це далеко не найзручніші способи збереження інформації.

Інша справа - соціальні кнопки. Зазвичай при кліці по одній з них ви можете поділитися записом / посиланням на своєму акаунті в соц. мережі. Потім зайдете ввечері, і посилання буде при вас. Я так одного разу настільки забив собі стінку Вконтакте корисними статтями, що до сих пір їх читаю).

Загалом, якщо сьогодні я не бачу під статтею соціальних кнопочок, це принаймні дивує. По-перше, це зручно для читачів. По-друге, приносить безсумнівну користь веб-майстру, так як якщо його матеріали цікаві, то можна отримати купу природних соціальних сигналів безкоштовно. Ніяких накруток і іншої недолугої діяльності.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Варіанти розміщення в шаблонах

Взагалі є три основні варіанти:

Під статтею. Найпопулярніший і найочевидніший варіант. Він розрахований на те, що людина повністю прочитав або пробіг очима текст, щось йому сподобалося, і він прийняв рішення зберегти це собі.

Над статтею. Це набагато менш поширене. Тут розрахунок робиться на заголовок і перші абзаци публікації. Наприклад, побачив я заголовок "102 варіанти приготування каші". О, цікаво, відразу натиснув, зберіг собі в соц. мережу, щоб пізніше радувати себе різноманітністю за столом.

Збоку (вертикальне розташування + фіксація). Також досить поширений варіант. Він підходить для сайтів, де збоку є місце для розташування там вузького блоку. Зазвичай в такому випадку соц.сетей трохи, від 3 до 10, щоб поміститися по висоті на екрані.

Останній варіант найідеальніший, якщо вам потрібно максимум соціальних сигналів. Тому що кнопки завжди на виду, і людина може клацнути по них в будь-який момент. Ось що завгодно йому сподобалося в тексті, і він клікає. Але важливо, щоб ці кнопки якось вписувалися в дизайн і не відволікали від контенту.

Як додати на сайт кнопки соц. мереж: варіант для верстальників

Перший варіант я пропоную для верстальників. Тобто для тих, хто хоч трохи розбирається в html і css і вміє стилізувати елементи. Дуже часто по дизайну кнопки повинні бути унікальними. Але сторонні сервіси не дають можливість зробити абсолютно будь-який дизайн, часто справа там обмежується лише налаштуванням фону і якихось дрібних параметрів.

Але рішення є! Це кнопки від GoodShare. Ось так прямо і введіть в пошуку, і вам напевно видасть їх сайт. Скрипт від goodshare дуже легкий і простий, встановлюється з пари кліків (можна підключити з дуже швидкого CDN). Якщо ви верстальник або хоч трохи розбираєтеся, я не буду вам пояснювати, як встановлюються скрипти, тому що ви в курсі.

Набагато більш важлива інформація - це безпосередньо висновок кнопок. У тому місці шаблону, де потрібно вивести іконку, наприклад, ВК, вставляємо такий код:

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

<Div class = "goodshare" data - type = "vk">

ПоделітьсяВк

<Span data - counter = "vk"> </ span>

</ Div>

При цьому span data-counter є необов'язковим елементом. Це лічильник, який буде показувати кількість кліків по іконці. Щоб він працював, у вас повинна бути підключена jQuery. У більшості випадків лічильник вам не потрібен, тому цей шматок коду вам не потрібен. Власне, всі інші коду є в документації:

Таким чином, ви може скласти потрібний вам набір іконок. До слова, без стилів нічого відображатися не буде. Кнопки від goodshare прідетс оформляти з нуля, але ж вам як верстальщику саме це і потрібно? Ви можете застосовувати будь-завгодно стилі, вставити всередину діва з кнопкою якийсь завгодно текст і будь-які інші елементи.

До речі, а як же ці самі кнопки стилізувати? Ну тут є 2 виходи. Ви можете просто додати кожної новий стильовий клас, а можна використовувати селектори атрибута. Ось так:

Цим селектором можна прописати стилі для кнопки розшарювання записи в соціальну мережу Вконтакте.

Як бачите, скрипт від goodshare дає відмінні можливості. Він максимально оптимізований і дозволяє створити будь-який вид соц. кнопок.

інші способи

Гаразд, якщо вам не потрібно істотно змінювати зовнішній вигляд кнопок і ви готові задовольнитися тим оформленням, яке надає сторонній сервіс, то використовуйте один з наступного сайтів, де можна встановити соц. кнопки: share42.com, pluso, блок "Поділитися" від Яндекса

Або будь-який відповідний плагін для вашого движка. Я впевнений, таких розширень досить багато. Просто вбийте в пошук по плагинам слова на кшталт "social" і "share" і відразу отримаєте щось таке.

Я не буду детально пояснювати установку кнопок за допомогою цих способів, тому що вона проходить за одним сценарієм і вам всього лише потрібно слідувати інструкції сервісів.

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3