Використовуємо соцмережі

469
  • Чим ці кнопки соціальних мереж краще (гірше) інших?
  • Налаштування блоку кнопок соцмереж від Лайкли
  • Здрастуйте, шановні читачі блогу . Ще один комплект кнопок соцмереж в колекцію. Навіщо потрібні, сподіваюся не треба пояснювати? На всяких випадок, однак, скажу. Вони дозволяють отримувати халявні сигнали з соцмереж, які можуть опосередковано допомогти в просуванні сайту. У будь-якому випадку гірше не буде (статті можуть швидше індексуватися, пошуковикам буде простіше розбиратися з авторством матеріалів; який-ніякий, а трафік з соцмереж теж можливий — дивлячись хто поділився вашої статті).

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

    Використовуємо соцмережі

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

    Крім цього, набір мінімалістичний і при цьому функціональний: можна задати обмеження довжини тайтлов для Твіттера, що для мене актуально, перейменувати кнопку (або взагалі видалити з неї текст), а так само ще по дрібниці щось налаштувати. Набір являє з себе фреймворк, який дозволяє одним додаванням класу змінювати розмір і стиль кнопок. Загалом, недоліків поки не знайшов, але ви мені про них скажете, якщо знаєте. Правда ж, адже?

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

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

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

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

    Використовуємо соцмережі

    Отже, для початку завантажуєте з вказаної сторінки останню актуальну версію «набору юного техніка». Власне, всередині архіву ви виявите всього два файлика: likely.js (скрипт) і likely.css (стильове оформлення). І все! Прикиньте тобі, ні картинок, ні тобі інструкцій. Хоча інструкції є на наведеною сторінці. Але ми їх будемо застосовувати по своєму.

    Отже, що потрібно зробити для установки Лайкли на свій блог під управлінням WordPress:

  • Підключаємося до сайту по ФТП (я не прихильник роботи з файлами теми з адмінки, бо завжди зручніше це робити у Блокноті з двома плюсами), відкриваємо файлик відповідає, наприклад, за формування статей сайту (він зазвичай обзивається single.php, але може бути й інакше — дивіться мануал по влаштуванню тим у вордпрес). І додаємо в нього (в потрібне місце, наприклад, там, де був код раніше встановлених кнопок соцмереж) ось такий простий Html код з кнопками і їх назвами (назви можете поміняти на свій розсуд — я залишив, бо у автора добре вийшло, на мій погляд):

    Твітнуть
    Поділитися
    Плюсануть
    Поділитися
    Відправити
    Класснуть
    Линкануть
    Запинить
    Природно, що вас ніхто не змушує додавати на свій сайт все кнопки. Рядки з непотрібними вам соціальними мережами просто видаліть. Якщо хочете змінити порядок розташування кнопок, то просто переставте блоки div у потрібному порядку. Все простіше нікуди.

  • Далі автор кнопок радить додати в секцію Head код для підключення завантажених вами в архіві файликів likely.js і likely.css. Але я б вам цього робити не радив. Просто краще для швидкості роботи сайту, якщо звернень до сервера при завантаженні сторінок буде якомога менше. Два додаткових запиту — це моветон. Особливо, якщо без втрати якості підключити цей фреймворк можна і по іншому. Хоча, вибирати вам.
  • Я, наприклад, просто скопіював вміст файлика likely.css в буфер обміну і вставив його в свій основний стильовий файл style.css. Немає зайвого запиту і все працює без проблем. Ну, а вміст likely.js додав в файлик, де я об’єднав всі скрипти. Детальніше про об’єднання і стиснення CSS стилів Вордпресс і про об’єднання і стиснення скриптів можете прочитати за посиланням.
  • Всі. Змінений вміст файлів зберігаємо (Файлзила, якщо її використовували, повинна буде запитати про збереження змін, з чим ви і погодьтеся). Заходимо на будь-яку сторінку сайту і після її оновлення бачимо таки кнопки соцмереж від Лайкли. Не побачили? Тады потримайте шифт на клавіатурі і спробуєте ще раз оновити сторінку. Побачили? Якщо ні, то «упс» — щось зробили не так.
  • Якщо все ОК, то можна приступати до невеликим налаштувань цього фреймворку.

    Налаштування блоку кнопок соцмереж від Лайкли

    Ну, налаштувань не так вже й багато. Можна спробувати поміняти зовнішній вигляд. Тут все як у Бутстрапе реалізується простим додаванням класу. Додавати потрібно у головний контейнер (зовнішній div). Наприклад, я збільшив розмір кнопок соцмереж додаванням класу likely-big.

    Було:

    Стало:

    І все. Ніяких тобі мук з CSS кодом. Хоча я, після того як визначився з розміром і типом кнопок в коді файлу likely.css (який переніс в основний стильовий файл моєї теми оформлення), видалив всі зайві властивості для класів likely-light і likely-small. Так само прибрав рядки з CSS, які ставили розмір кнопок за замовчуванням.

    Так, забув сказати, що автор розсудливо стиснув CSS код (прибрав з нього всі прогалини і його тепер важко читати і правити). Тому спочатку його розтулив в онлайн сервісі (просто додаєте в нього стислий код праворуч і тиснете на кнопку «Очистити» ліворуч). Можна було б потім ще й почистити CSS код від невикористовуваних рядків, але поки що цього достатньо.

    До речі, мені ще фон кнопок за замовчуванням (без наведення на них вказівника миші) не сподобався. Я його замінив на трохи більш світлий, ну і шрифт теж трохи світлішою зробив. Думаю, що ви самі з цим розберетеся клікнувши на будь-якій кнопці Лайкли правою кнопкою миші і вибравши пункт «Переглянути код» (в Хромі). Там буде навіть номер рядка у файлі стилів вказана, де потрібно буде правити.

    Тепер про інші налаштування. По-перше, моя вічна проблема — довгі тайтли, які не вкладаються в прокрустове ложе довжини повідомлень Твіттера. Вирішується знову ж таки все дуже елегантно. Я просто в тег Div для твіттера додав атрибут data-title: