Як додати соціальні кнопки на сайт

16

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

Як додати соціальні кнопки на сайт

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

Іноді, коли я читаю дуже корисну статтю, я хочу її як-небудь зберегти. Не ну тут звичайно є дуже багато варіантів, як це зробити. Наприклад, зробити скріншот, скопіювати весь текст в блокнот, скачати в форматі 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. Якщо ж вам потрібен повністю готовий налаштований варіант, то вибирайте будь-який спосіб з перерахованих вище.