Від автора: ми живемо в соціальний час. Сьогодні взаємодія з іншими людьми важливо як ніколи раніше, якщо ми говоримо про інтернет-бізнесі. У зв’язку з цим, багато хто замислюється, як додати соціальні кнопки на сайт, щоб покращити соціальні сигнали. Це дуже розумно, тому ми обов’язково повинні з’ясувати, як це робиться.
Важливість соціальних кнопок
Іноді, коли я читаю дуже корисну статтю, я хочу її як-небудь зберегти. Не ну тут звичайно є дуже багато варіантів, як це зробити. Наприклад, зробити скріншот, скопіювати весь текст в блокнот, скачати в форматі pdf і т. д. Але у всіх цих випадках власник сайту особливої користі не отримує, та і все це далеко не самі зручні способи збереження інформації.
Інша справа – соціальні кнопки. Зазвичай при кліці по одній з них ви можете поділитися записом/посиланням на своєму акаунті в соц. мережі. Потім зайдете ввечері, і посилання буде при вас. Я так одного разу настільки забив собі стінку Вконтакте корисними статтями, що досі їх читаю).
Загалом, якщо сьогодні я не бачу під статтею соціальних кнопочок, це принаймні дивує. По-перше, це зручно для читачів. По-друге, приносить безсумнівну користь веб-майстру, так як якщо матеріали цікаві, то можна отримати купу природних соціальних сигналів безкоштовно. Жодних накруток та іншої недолугої діяльності.
Варіанти розміщення в шаблонах
Взагалі є три основні варіанти:
Під статтею. Найпопулярніший і найбільш очевидний варіант. Він розрахований на те, що людина повністю прочитав або пробіг очима текст, що йому сподобалося, і він прийняв рішення зберегти собі.
Над статтею. Це набагато менш поширене. Тут розрахунок робиться на заголовок і перші абзаци публікації. Наприклад, я побачив заголовок “102 варіанти приготування каші”. О, цікаво, відразу натиснув, зберіг себе в соц. мережа, щоб пізніше радувати себе різноманітністю за столом.
Збоку (вертикальне розташування + фіксація). Також достатньо поширений варіант. Він підходить для сайтів, де збоку є місце для розташування там вузенького блоку. Зазвичай у такому випадку соц.мереж трохи, від 3 до 10, щоб поміститися по висоті на екрані.
Останній варіант ідеальний, якщо вам потрібно максимум соціальних сигналів. Тому що кнопки завжди на виду, і людина може клікнути по них у будь-який момент. Ось що завгодно йому сподобалося в тексті, і він клацає. Але важливо, щоб ці кнопки якось вписувалися в дизайн і не відволікали від контенту.
Як додати на сайт кнопки соц. мереж: варіант для верстальників
Перший варіант я пропоную для верстальників. Тобто для тих, хто хоч трохи розбирається в html і css і вміє стилізувати елементи. Дуже часто по дизайну кнопки повинні бути унікальними. Але сторонні сервіси не дають можливість зробити абсолютно будь-який дизайн, часто справа там обмежується лише налаштуванням фону і якихось дрібних параметрів.
Але рішення є! Це кнопки від GoodShare. Ось так прямо і введіть в пошуку, і вам, напевно, видасть їх сайт. Скрипт від goodshare дуже легкий і простий, встановлюється з пари кліків (можна підключити з дуже швидкого CDN). Якщо ви верстальник або хоч трохи розбираєтеся, я не буду вам пояснювати, як встановлюються скрипти, тому що ви в курсі.
Набагато більш важлива інформація – це безпосередньо висновок кнопок. У тому місці шаблону, де потрібно вивести іконку, наприклад, ВК, вставляємо такий код:
При цьому span data-counter є необов’язковим елементом. Це лічильник, який буде показувати кількість кліків по іконці. Щоб він працював, у вас повинна бути підключена jQuery. У більшості випадків лічильник вам не потрібен, тому цей шматок коду вам не потрібен. Власне, всі інші коду є у документації:
Таким чином, ви може скласти потрібний вам набір іконок. До речі, без стилів нічого відображатися не буде. Кнопки від goodshare доводиться оформляти з нуля, але ж вам як верстальщику саме це і потрібно? Ви можете застосовувати які-завгодно стилі, вставити всередину діва з кнопкою який-завгодно текст і будь-які інші елементи.
До речі, а як же ці самі кнопки стилізувати? Ну тут є 2 виходи. Ви можете просто додати кожної новий стильовий клас, а можна використовувати селектори атрибутів. Ось так:
div[data type = vk]{…}
Цим селектором можна прописати стилі кнопки для розшарювання запису в соціальну мережу Вконтакте.
Як бачите, скрипт від goodshare дає відмінні можливості. Він максимально оптимізований і дозволяє створити будь-який вид соц. кнопок.
Інші способи
Добре, якщо вам не потрібно істотно змінювати зовнішній вигляд кнопок і ви готові задовольнитися тим оформленням, яке надає сторонній сервіс, то використовуйте один з таких сайтів, де можна встановити соц. кнопки: share42.com, pluso, блок “Поділитися” від Яндекса
Або будь-який відповідний плагін для вашого движка. Я впевнений, таких розширень досить багато. Просто забийте в пошук по плагинам слова на кшталт “social” і “share” і відразу отримаєте щось таке.
Я не буду докладно пояснювати встановлення кнопок за допомогою цих способів, тому що вона проходить за одним сценарієм і вам всього лише потрібно слідувати інструкції сервісів.
Ось ми і розглянули коротко варіанти додавання кнопочок “Поділитися”. Якщо ви готові трохи заморочити, то рекомендую скрипт goodshare. Якщо ж вам потрібен повністю готовий налаштований варіант, то вибирайте будь-який спосіб з перерахованих вище.
