Здрастуйте, шановні читачі блогу . Ще один комплект кнопок соцмереж в колекцію. Навіщо потрібні, сподіваюся не треба пояснювати? На всяких випадок, однак, скажу. Вони дозволяють отримувати халявні сигнали з соцмереж, які можуть опосередковано допомогти в просуванні сайту. У будь-якому випадку гірше не буде (статті можуть швидше індексуватися, пошуковикам буде простіше розбиратися з авторством матеріалів; який-ніякий, а трафік з соцмереж теж можливий — дивлячись хто поділився вашої статті).
Хоча, гірше після їх установки теж може бути. Були випадки, коли безкоштовно поширювані скрипти заражали сайти вірусами, показували нелегітимно рекламу. Багато набори кнопок настільки важкі, що серйозно гальмують швидкість завантаження сторінок сайту, що в свою чергу може погіршити ставлення до вашого сайту пошуковиків.
Взагалі, супер легких наборів кнопок соцмереж не буває, але бувають вдалі поєднання ваги і функціоналу. Лайкли, як мені здається, відноситься до такого типу. Тут немає картинок кнопок, які створюють додатковий запит під час завантаження (використовуються векторые аналоги спрайтів, як я розумію). Код повністю розміщується на вашому сайті, а значить немає проблем з зависанням зовнішніх джерел і виникаючими від цього проблемами.
Крім цього, набір мінімалістичний і при цьому функціональний: можна задати обмеження довжини тайтлов для Твіттера, що для мене актуально, перейменувати кнопку (або взагалі видалити з неї текст), а так само ще по дрібниці щось налаштувати. Набір являє з себе фреймворк, який дозволяє одним додаванням класу змінювати розмір і стиль кнопок. Загалом, недоліків поки не знайшов, але ви мені про них скажете, якщо знаєте. Правда ж, адже?
Прості і досить оригінальні кнопки соціальних мереж
Коли щось шукаєш спеціально, то зазвичай попадається все одне і те ж — пошуковики далекі від досконалості і повнота як і раніше залишає бажати кращого. Описаний нижче фреймворк я побачив у когось або хтось про нього написав із тих авторів, кого я читаю. Стало цікаво, спробував, сподобалося, залишив. Власне, майже точно так само було і з усіма попередніми варіантами цього незамінного атрибуту будь-якого сайту.
Ну, а зараз поки ще свіжі враження вирішив написати маленький пост на цю тему. Власне, можна було б, звичайно, просто дати посилання на сторінку Лайкли і ви б розібралися без мене. Автор плагіна дуже лаконічний в описі і все потрібне описано буквально в перших абзацах.
Але у мене все ж блог для початківців, тому опишу все детально з описом деяких моментів стосовно до блогу на WordPress (у кого інший движок — прошу вибачити, бо ні на чому іншому цей блок соціальних кнопок я ще не пробував, але думаю, що труднощів виникнути не повинно).
Отже, для початку завантажуєте з вказаної сторінки останню актуальну версію «набору юного техніка». Власне, всередині архіву ви виявите всього два файлика: likely.js (скрипт) і likely.css (стильове оформлення). І все! Прикиньте тобі, ні картинок, ні тобі інструкцій. Хоча інструкції є на наведеною сторінці. Але ми їх будемо застосовувати по своєму.
Отже, що потрібно зробити для установки Лайкли на свій блог під управлінням WordPress:
Твітнуть
Поділитися
Плюсануть
Поділитися
Відправити
Класснуть
Линкануть
Запинить
Природно, що вас ніхто не змушує додавати на свій сайт все кнопки. Рядки з непотрібними вам соціальними мережами просто видаліть. Якщо хочете змінити порядок розташування кнопок, то просто переставте блоки div у потрібному порядку. Все простіше нікуди.
Якщо все ОК, то можна приступати до невеликим налаштувань цього фреймворку.
Налаштування блоку кнопок соцмереж від Лайкли
Ну, налаштувань не так вже й багато. Можна спробувати поміняти зовнішній вигляд. Тут все як у Бутстрапе реалізується простим додаванням класу. Додавати потрібно у головний контейнер (зовнішній div). Наприклад, я збільшив розмір кнопок соцмереж додаванням класу likely-big.
Було:
Стало:
І все. Ніяких тобі мук з CSS кодом. Хоча я, після того як визначився з розміром і типом кнопок в коді файлу likely.css (який переніс в основний стильовий файл моєї теми оформлення), видалив всі зайві властивості для класів likely-light і likely-small. Так само прибрав рядки з CSS, які ставили розмір кнопок за замовчуванням.
Так, забув сказати, що автор розсудливо стиснув CSS код (прибрав з нього всі прогалини і його тепер важко читати і правити). Тому спочатку його розтулив в онлайн сервісі (просто додаєте в нього стислий код праворуч і тиснете на кнопку «Очистити» ліворуч). Можна було б потім ще й почистити CSS код від невикористовуваних рядків, але поки що цього достатньо.
До речі, мені ще фон кнопок за замовчуванням (без наведення на них вказівника миші) не сподобався. Я його замінив на трохи більш світлий, ну і шрифт теж трохи світлішою зробив. Думаю, що ви самі з цим розберетеся клікнувши на будь-якій кнопці Лайкли правою кнопкою миші і вибравши пункт «Переглянути код» (в Хромі). Там буде навіть номер рядка у файлі стилів вказана, де потрібно буде правити.
Тепер про інші налаштування. По-перше, моя вічна проблема — довгі тайтли, які не вкладаються в прокрустове ложе довжини повідомлень Твіттера. Вирішується знову ж таки все дуже елегантно. Я просто в тег Div для твіттера додав атрибут data-title:
Тепер тайтл звільнюється в Твіттер буде довжиною не більше 110 символів. У мене вже була у файлі functions.php з папки з темою WordPress додана функція, яка це і реалізує (без неї не спрацює описаний спосіб скорочення тайтла):
function trim_title_chars($count, $after) {
$title = get_the_title();
if (mb_strlen($title) > $count) $title = mb_substr($title,0,$count);
else $after = «;
echo $title . $after;
}
Друге питання — це завдання картинки, яка буде «пиниться», тобто вирушати в соціальну мережу Пинтерест. По ідеї, це має бути перша картинка в статті (принаймні у мене так). Для цього я додав в тег Div пинтереста ось такий атрибут data-media:
Правда щоб це спрацювало, треба щоб в нашому улюбленому файлі functions.php з папки з темою WordPress була б додана така функція:
post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = «/files/no-image.gif.jpg»;
}
return $first_img;
}
?>
Тепер після натискання на кнопку «Запинить» расшаривается перша картинка посту.
Загалом, поки все. А ви що думаєте з приводу цього набору соціальних кнопок? Цікаво ваша думка.
Удачі вам! До зустрічей на сторінках блогу
