Як додати на сайт кнопки соціальних мереж

Кнопки від GoodShare - для тих, кому потрібна свобода в налаштуванні

Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:

1. Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
2. HostIQ - хостинг преміум якості.
3. Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
4. Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!

На сайті сервісу ви точно не заблукаєте. Рівно посередині знаходиться кнопка установки скрипта, після натиснення на неї нам буде запропоновано 2 варіанти. Я рекомендую перший, підключення через CDN. Копіюємо код і вставляємо його куди небудь в підвал сайту, перед закриває тегом body. У wordpress потрібно вставити в footer.php.

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

Це найголовніша перевага сервісу в порівнянні з конкурентами, про яких я напишу в цій же статті. Воно полягає в тому, що ви самі можете налаштувати зовнішній вигляд іконок так, як потрібно вам! Також в якості переваги цього способу я хотів би наголосити на тому, що скрипт не грузить сервер і не впливає негативним чином на швидкість завантаження сторінок, тому що він дуже легкий і грузиться з CDN.

Коротше, переходимо до справи. Там, де ви хочете вивести кнопку соц. мережі Вконтакте додаємо наступний код:

де:
data-type - назва соц. мережі. Його ви можете подивитися в документації.
data-counter - лічильник, який рахує кількість натискань на кнопку. Можливо, він вам не потрібен, тоді можна його просто не писати. Якщо почитаєте документацію, то побачите, що лічильник підтримується не скрізь.

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

Як оформити кнопки від goodshare?

Ну а я відкрию style.css і в самому кінці файлу опишу стилі для кнопки:

div [data-type = vk] background: # 25496F;
border-radius: 50%;
color: #fff;
max-width: 80px;
padding: 10px;
text-align: center;
font-size: 18px;
cursor: pointer;
>

Як бачите, я використовував селектор атрибуту, щоб дотягнутися до неї. Відмінно. Всі стильові правила пояснювати не буду, вийшла ось така штука:

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

Тим часом я зробив вже 3 кнопки:

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

Коротше, скрипт від Goodshare для тих, кому потрібна свобода в налаштуванні соц. кнопок. Хочете свободи? Отримайте, розпишіться.

Кнопки від Pluso

Особлива фішка цих кнопок в тому, що ви бачите тільки 6 найпопулярніших соц. мереж, але при натисканні на плюс з'являється можливість відправити запис в десятки інших, менш відомих місць.

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

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

Кнопки від Share42

Далі сервіс пропонує вам подивитися, як будуть виглядати ваші кнопки, після чого завантажити скрипт з ними до себе на комп'ютер. Цей скрипт треба буде розпакувати. Всередині буде папка share42. Ви повинні закинути її до себе на сайт. Дивіться самі куди саме. Можна просто в корінь, але я рекомендую безпосередньо в шаблон.

Після того, як шлях до папки зі скриптом вказано, і cms обрана, залишається скопіювати згенерований шматок коду і вставити його в тому місці, де ви хочете бачити ці самі кнопки. У wordpress, наприклад, напевно ви захочете додати їх після кожного запису. Для цього переходимо в single.php. знаходимо, де закінчується висновок статті і вставляємо туди код. Тепер кнопки з'являться під кожною статтею. Ось так вони виглядають в моєму випадку:

Найпростіший спосіб в WordPress

Що ж, ну а на цьому я буду закінчувати. І так вийшло близько 5-6 способів додавання кнопок, якщо з'єднати 2 статті. Один з них напевно сподобається і вам.