Відкрити меню

Кнопки соціальних мереж для блогу за допомогою сервісу Share42.com

Мої вітання, товариство! Кнопки соціальних мереж можна сьогодні зустріти практично на кожному ресурсі і це не дивно – взаємодія блогу з соціалками давно вже невід’ємний атрибут просування та розкрутки. Створюються спільноти блогів, голосування, кнопочки “Подобається”, з цих спільнот приходять відвідувачі – SMO в чистому вигляді. В цій статті ми поговоримо про можливість додати кнопки поширення від соціальних мереж за допомогою легенького скрипта, без використання плагінів.

Соціалки

Працювати ми будемо з одним дуже класним сервісом, який і надає можливість використовувати такий скрипт – це www.share42.com. На сьогодні існує дуже велика кількість плагінів для WordPress, та не всі вони мають необхідний функціонал. Основними недоліками плагінів я вважаю швидкодію (все ж таки створюють певне навантаження на ресурс) і, в багатьох випадках, відсутність відомих соціальних мереж. Є, наприклад, класні додатки, але вони містять в собі закордонні соціалки, що нам не підійде.

Вмонтувати такі кнопочки в блог дуже легко, з цим справиться будь-хто, тому, без довгих вступів на роздумів “на тему”, перейдемо до реалізації. Для початку – переходимо на сайт розробника www.share42.com і звертаємо увагу на перший пункт, де нам надають можливість обрати розмір та власне ті соціальні мережі, які нам потрібні.

Обираємо кнопки

Для прикладу – я обрав розмір 24х24, а для того, щоб виділити ті соціальні мережі, якими я користуюсь, затискаю кнопку Ctrl на клавіатурі і утримуючи виділяю потрібні мені кнопочки. В результаті повинна вийти наступна картина:

Результат вибору

Дуже зручно ще те, що в розділі “Інше” можна також додати можливість “Роздрукувати”, RSS та кнопочку “Наверх”. Я цього не робив, але комусь може згодитись.

Другий пункт – налаштування самої панелі з кнопочками. Перше – це положення кнопок, вертикально чи горизонтально. Особисто я використовую горизонтальний варіант, тому що вертикальне положення (плаваюче) мені не зовсім подобається. Якщо Ви оберете, все ж таки, вертикальну панель – тоді Вам стане доступний пункт “Обмежити видиму кількість іконок”.

Наступне – кодування сайту. Блоги на WordPress використовують кодування UTF-8, тому зупиняємось на цьому варіанті. Якщо Ваш ресурс кодується іншим методом – обираєте своє. Додати іконку сайту Share42.com – по бажанню, я не додавав.

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

Налаштування панелі

Третій і четвертий пункти можна об’єднати – тут ми встановлюємо скрипт на свій блог.

Перше – завантажуємо архів з готовим скриптом на свій ПК і розархівовуємо.

Далі – завантажуємо теку share42 на свій блог (я поклав її просто в корінь сайту) і у графі “Вкажіть шлях до цієї папки” прописуємо повних шлях до завантаженої теки share42 (наприклад, https://olegvoloshchuk.com/share42/).

Після цього у Вас з’явиться можливість перевірити правильність шляху – можете скористатись.

І останнє – обираєте систему управління своїм ресурсом. Ось що вийшло у мене:

Вбудовуємо кнопки в блог

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

Код кнопок

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

Як правило, за вивід повного посту в шаблоні WordPress відповідає файл single.php – йдемо в майстерню, Дизайн – Редактор і шукаємо цей файл в переліку.

Далі, в цьому файлі визначаємо – де виводиться сам текст посту. Як правило, за вивід тексту статті відповідає шматок коду:

ось після нього ми і вставляємо код наших кнопочок.

Вбудовуємо кнопочки

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

Результат

Щоб надати кнопочкам такої напівпрозорості – повертаємось на сайт www.share42.com та копіюємо запропонований стиль.

Стиль кнопочок

Далі – переходимо в Майстерні в Дизайн – Редактор і в файлі стилів style.css (або style.php – в кого яка тема), в будь-яке місце вставляємо отриманий стиль для наших кнопочок. Зберігаємо зміни і милуємось результатом.

Оформлення кнопочок

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

Основна перевага цього методу в тому, що Share42.com містить всі популярні соціальні мережі, дуже простий в установці та не навантажує ресурс. В парі з кнопками Like від Вконтакті та Facebook – маємо дуже ефективне джерело додаткового трафіку на свої блоги.

Встановлюйте, тестуйте та популяризуйте свої ресурси в соціальних мережах. Бажаю Вам приємної роботи та вдалого інтегрування Share42.com.

Шануйтеся!

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 3, середній: 5,00 з 5)
Loading...
Обговорення: 12 коментарів
  1. Володимир сказав:

    Доброго дня, скажіть будь-ласка,який ви використововуєте після “Шануйтеся!”? Дякую

    Відповіcти
  2. Володимир сказав:

    Доброго дня, скажіть будь-ласка,який ви використововуєте плагін після «Шануйтеся!»? Дякую

    Відповіcти
    1. Олег Волощук сказав:

      То не плагін, то код кнопок. На соціалках таку штуку можна взяти.

      Відповіcти
  3. Валерій сказав:

    то як все ж таки зробити кнопки півпрозорими? зараз на сайті http://share42.com/ 6-й пункт це “готово”. Він зараз не дає код стилю.

    Відповіcти
    1. Олег Волощук сказав:

      Я не знаю чому вони стилі прибрали. Додайте ось ці стилі код в свій файл css

      #share42 {display: inline-block; padding: 6px 0 0 6px; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
      #share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
      #share42 a {opacity: 0.5}
      #share42:hover a {opacity: 0.7}
      #share42 a:hover {opacity: 1}

      і кнопочки будуть такі ж, як і на цьому блозі.

      Відповіcти
  4. Сергій сказав:

    Дуже корисна інформація. Там, на сервісі Share42.com стисло теж зазначено як це зробити, але чомусь не вказана важлива інформація (як для початківців), куди саме треба вставляти потрібний код. Чого не скажеш про детальну інструкцію Олега Волощука – тут все детально і дуже зрозуміло. Дякую! 😉

    Відповіcти
  5. Володимир сказав:

    Дякую, все вдалося без зайвих зусиль. Те є одне питання: як зробити так, щоб спливаючі підказки були українською мовою? Бо те кляте “подельться” ріже і слух, і зір… Дякую за розуміння.

    Відповіcти
    1. Олег Волощук сказав:

      Відкриваєте текстовим редактором Notepad++ файл з архіву, який називається share42.js та шукаєте там фрази російською, які потрібно замінити. Виглядають вони приблизно так: title=”Поделиться в Facebook”.

      Змінюєте, зберігаєте зміни і закидаєте назад на хостинг.

      Відповіcти
      1. Володимир сказав:

        Все настільки просто! Дякую 🙂

        Відповіcти
        1. Олег Волощук сказав:

          Завжди радий допомогти 🙂

          Відповіcти
  6. Cергій сказав:

    Вітаю! Може хтось знає чим замінити для сайту кнопки соціальних мереж сервісу SHARE42.COM, бо вони пов’язані з Яндексом, а Інтернет-провайдер Яндексні програми блокує, і від цього сайти іноді працюють не коректно.

    Відповіcти
    1. Олег Волощук сказав:

      А як саме вони пов’язані з яндексом?

      Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google