Власні соціальні кнопки. Кнопки соціальних мереж Як зробити великі кнопки соціальних мереж

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

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

• Вконтакте
• Фейсбук
• Однокласники
• Гугл «+1»
• Твіттер
• Мій світ

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

Кнопка досить гнучка, напис на ній можна міняти на будь-яку бажану (за умовчанням "зберегти").

Спочатку вам потрібно перейти на сторінку з , там же ви отримаєте код скрипту, який потрібно буде встановити на свій сайт, щоб відобразилася кнопка.

Тут можна вибирати один із 5 стилів: кнопка, кнопка без лічильника, посилання, посилання без іконки, іконка.

Поле «текст» дозволяє змінювати стандартний напис «зберегти» на свій.

В якості URL-адреси можна вибирати адресу сторінки з кнопкою або адресу іншої сторінки (на ваш вибір). У першому випадку кнопка буде ділитися посиланням на сторінку, де розташована сама кнопка. У другому випадку кнопка буде ділитися вказаним вами посиланням, незалежно від того, де вона сама знаходиться.

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

Другий варіант кнопки - віджет "Мені подобається". Його простіше встановити на сайт, т.к. в кінці ви отримаєте лише одну частину коду, яку потрібно буде розмістити у потрібному місці сайту.

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

Назва сайту – тут краще вказати коротку та справжню назву вашого сайту.

Адреса сайту – вкажіть адресу головної сторінки вашого сайту.

Основний домен сайту – вкажіть головне дзеркало сайту (його можна знайти в якості параметра оператора «Host»), якщо важко це зробити – то залиште пропоноване ВКОНТАКТІ.

Варіанти кнопки – це різні стилі кнопки, вони впливають її зовнішній вигляд.

Висота кнопки – геометричні розміри "Мені подобається".

Назва кнопки – доступні два варіанти (мені подобається, це цікаво).

Код для вставки – код, який потрібний для відображення кнопки соціальної мережі Вконтакте.

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

URL to Like - URL-адреса сторінки для кнопки (якщо поле не заповнене, то буде братися адреса сторінки, на якій розташована кнопка).

Send Button – наявність галочки включає нову можливість – відправляти посилання до Фейсбуку (відобразиться додаткова кнопка – «надіслати»). При увімкненні одночасно відображатиметься дві кнопки.

Layout Style – стиль кнопки, що впливає на її зовнішній вигляд (стандартним вважається button_ count ).

Width – ширина кнопки у пікселях.

Show Faces - при включенні будуть показуватися аватари людей, які вже натиснули на цю кнопку.

Font – тип шрифту кнопки.

Color Scheme – фон простору поряд із кнопкою (білий та чорний).

Verb to display – назва кнопки (подобається я рекомендую).

Get Code – кнопка, яка формує код скрипту.

Дані соціальні мережі набули широкої популярності в російськомовному інтернеті, там мешкає величезна кількість людей, тому не варто нехтувати встановленням кнопки «Клас» від сервісу «Однокласники» та «Подобається» від сайту «Мій світ».

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

Розмір за висотою – геометричний розмір кнопок.

Вид – зовнішній вигляд рамки кнопок.

- Вибір кнопок (подобається, клас)

Лічильник – увімкнення та вимкнення лічильника натискань на кнопки (праворуч, зверху – розташування лічильника).

Текст на кнопках – вибір однієї із трьох назв, доступних для кнопок.

Код для вставки – код скрипта, який потрібно буде встановлювати на веб-сайт.

Нова соціальна мережа, яка за короткий час набрала величезну аудиторію. Важко уявити сайт без кнопки «+1», т.к. вона не тільки дозволяє додавати посилання до соціальної мережі та збільшувати кількість «плюсиків», але й може впливати на результати сайту в ТОПі пошукової системи Google.

Всі подробиці про це, а також встановлення та налаштування кнопки знаходяться .

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

Спочатку потрібно вибрати потрібну кнопку (нас цікавить перший варіант – кнопка «надіслати посилання»).

Після цього на сторінці з'явиться форма із кількома полями, які потрібно заповнити.

Надіслати посилання – вибір сторінки, на якій розташована кнопка або будь-який інший.

Текст – вибір тексту, який з'являтиметься поряд з кнопкою (НЕ НА КНОПКУ).

Показувати лічильник – увімкнути чи вимкнути відлік кількості натискань на кнопку.

За допомогою – вибір способу додавання повідомлення посилання Твіттер (практично ні на що не впливає).

Відзначити – вибір мітки, яка публікуватиметься у Твіттері (практично ні на що не впливає).

Велика клавіша – збільшення геометричного розміру кнопки.

Відмовитись від адаптації Твіттера – відмова від стилів Твіттера (краще залишити поле без галочки).

Мова – вибір мови кнопки.

Справа буде сформовано код, який потрібно додати на сайт.

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

Розмір – маленький чи великий розмір кнопки.

Стиль – вибір між кнопкою чи іконкою.

Наявність лічильника – увімкнення або вимкнення лічильника натискань на кнопку.

Зовнішній вигляд кнопки – приклад того, як виглядатиме кнопка.

Заголовок – вибір заголовка для сторінки (довільний або заголовок поточної сторінки).

Код вставки – потрібний код, який додається на сайт.

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

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

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

Код – потрібний скрипт, який потрібно додати на сайт.

Останнім часом широкої популярності набув конструктор кнопок соціальних мереж – PLUSO. Перейти на сайт можна за цим посиланням.

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

Спочатку потрібно вибрати стиль кнопок та лічильників з кількох пропонованих (горизонтальні, вертикальні, кольорові, безбарвні тощо).

Потім необхідно налаштувати ряд параметрів, вибравши

• розташування блоку (вертикальний, горизонтальний);
• колір кнопок (яскраві, темні);
• величину блоку (великий, дрібний);
• лічильник (наявність чи відсутність);
• фон (безбарвний або кольоровий);

Код буде сформований згідно з вказаними вами параметрами, після чого його потрібно вставити на сайт.

Ще один сервіс, що дозволяє сконструювати кнопки для свого сайту – Share42.com/ru.

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

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

Тип панелі з іконками - відображення блоку кнопок (дуже цікавий варіант "вертикальна плаваюча").

Обмежити видиму кількість іконок – вибір числа кнопок, що відображаються (інші будуть приховані за посиланням).

Кодування сайту – вибір кодування вашого сайту.

Додати іконку сайту Share42.com – можливо, слід забрати галочку.

Показувати лічильники - увімкнення лічильника натискань по кнопках (тільки при jQuery, що працює).

Установка даного скрипта досить складна, але вона крок за кроком описується на самому сайті Share42.

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

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

У редакторі шаблону потрібно знайти файл "Заголовок" (header. php), якщо такого немає, тоді - "Основний шаблон" (index.php). Тепер потрібно знайти тег або . Якщо в зазначених файлах таких тегів немає (всі теми різні, таке цілком можливо), тоді вам доведеться відкривати для редагування всі файли та шукати в кожному з них тег. Для пошуку можна використовувати клавіші «Ctrl+F».

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

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

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

Вам потрібно знайти місце, де закінчується стаття (основна текстова частина сторінки). Для цього потрібно редагувати файл "Один запис" (single. php).

Тепер потрібно знайти оператор, який відповідає за виведення основного вмісту статті. У моєму випадку це "the_content", відразу після нього і розміщується код кнопок.

Аналогічно можна розміщувати код на початку статті, потрібно лише знайти місце між заголовком та текстом статті.

У цьому невеликому уроці ми створимо прості та кастомні кнопки для шарингу у соціальні мережі.

Пропонований мною варіант позбавлений цих недоліків - всі файли будуть на вашому сервері (тобто впаде разом із сайтом), нічого не підвантажуючи ззовні, і до того ж дуже добре кастомізується. Крім того, у нас буде невеликий плюс - зазвичай до складу соціальних кнопок входить велика трійка (ВКонтакте, Facebook та Twitter). У нашому випадку в обоймі присутні Mail.Ru, Однокласники та Telegram, щоб ніхто не пішов з нашого сайту нерозшарованим.

Єдиний істотний мінус: кількість натискань на кнопки вважатися не буде. Ми йдемо за рамки простоти та гнучкості.

Вперше питання про власні кнопки соц.мереж мене відвідав у той момент, коли для сторінки на сайті соціальний шаринг був дуже потрібен, але всі ресурси не підходили по дизайну. І не мене одного – сама ідея кастомних кнопок далеко не нова. Найцікавіше рішення, на мій погляд, було виявлено мною на Хабрі і після нетривалих пошуків привела на GitHub . Я взяв за основу логіку роботи таких кнопок шарингу та творчо їх доопрацював.

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

ВКонтакті Facebook Mail.Ru Однокласники Twitter Telegram

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

function setOnclick(a) ( a.setAttribute("onclick","popupWin = window.open(this.href,"contacts","toolbar=0,status=0,width=626,height=436"); popupWin. focus(); return false"); ) function externalLinks() ( var links = document.getElementsByTagName("a"); for (i=0; i