|
|
Деякі блогери та власники інформаційних ресурсів, які активно використовують плагіни від Facebook і зокрема, багатостраждальну кнопку Like, мабуть, звернули увагу, що останнім часом вона почала працювати вкрай нестабільно.
На всіх трьох своїх блогах я неодноразово помічав, що після кліку на кнопку Like вона лише на секунду зараховує ваш голос, а потім повертається до свого первинного “незайманого” стану, наче ніхто і не клікав. При цьому, у вашому профілі на Facebook, звісно ж, нічого не публікується. Інакше кажучи – кнопка просто не працює!
Спершу я думав, що проблема стосується лише мене і пов’язана з неправильними налаштуваннями чи методами вбудовування коду. Хоча логіка була сумнівною, адже раніше все чудово працювало.
Перевіривши кнопки на кількох інших блогах, в тому числі й потужних Watcher-і та AIN-і, я переконався, що проблема носить масовий характер. А згодом натрапив і на гілку обговорення багу у офіційному розділі Facebook, де адміністрація компанії визнала, що проблема дійсно існує (при чому, уже досить давно). Найгірше те, що проявляється вона “випадково” і не має жодних закономірностей. Тобто кнопка Like в одних статтях на вашому блозі може працювати, а в інших – ні. І чим це спричинено – ніхто не знає.
То як же змусити кнопку Like працювати?
На жаль, у численних гілках на форумі Facebook, де тисячі вебмайстрів скаржаться на неправильну роботу кнопки Like, так і не знайшлося однозначного рішення. Мабуть, причина в тому, що проблема виникла саме через недоліки у коді Facebook, а не в коді сайтів-носіїв. Втім, певні поради, які таки змусять запрацювати “кляту” кнопку, існують.
Додаємо мета-теги Open Graph
Протокол Open Graph – це один зі способів дистрибуції вашого контенту через Facebook. Якщо говорити просто – він допомагає соціальній мережі краще індексувати і “розуміти” ваш сайт. Завдяки мета-тегам Open Graph ви отримуєте кращий контроль над тим, як ваш контент відображатиметься у Facebook.
Додавати мета-теги Open Graph потрібно у блоці <head> вашого сайту. Якщо ви користуєтеся CMS WordPress, то швидш за все знайдете цей блог у файлі header.php вашої теми.
Мета-теги Open Graph мають наступний вигляд:
<!-- Start Facebook Opengraph --> <meta property="fb:admins" content="<id адміністратора>"/> <meta property="fb:app_id" content="<id програми>" /> <meta property="og:type" content="<тип запису>"/> <meta property="og:title" content="<заголовок запису>"/> <meta property="og:site_name" content="<назва блогу>"/> <meta property="og:description" content="<опис запису>"/> <meta property="og:url" content="<посилання>"/> <meta property="og:image" content="<зображення запису>"/> <!-- End Facebook Opengraph -->
Втім, обов’язковими (тобто тими, які необхідні для коректної роботи кнопки like) є всього кілька з них. Ось повний перелік обов’язкових мета-тегів:
- fb:admins або fb:app_id – перший – це ваш id вашого облікового запису у Facebook, а другий – id вашої програми, якщо ви її створили. Необхідний хоча б один із двох метатегів. Я використовую id адміністратора. Дізнатися його просто – заходимо у свій профіль Facebook, клікаємо на власне фото у лівому верхньому куті і дивимося на URL, який відобразився у адресній стрічці. Останній набір цифр (після точки) у цьому URL – це і є ваш ID.
- og:title – назва контенту, який буде публікуватися у фейсбук. Наприклад, якщо ви розміщуєте цей тег у статті, то повинна бути вказана назва статті. У WordPress легко вирішується кодом <?php the_title() ?>
- og:type – тип контенту. Наприклад, зображення, відео, стаття та ін..
- og:image – зображення, яке асоціюється з даним контентом. Facebook часто не здатен адекватно вибрати зображення для “лайкнутої” статті. Я навіть писав, як виправити цю проблему. Тег og:image чітко вказує, яку картинку асоціювати зі статтею, тому при його використанні проблема також зникає. Втім, виникає інша – однакове зображення для всіх статей вашого блога. Про її виправлення – у окремій статті. Поки що наше завдання – змусити запрацювати кнопку like.
- og:url – канонічний URL вашої статті, що буде використовуватися як постійне посилання на неї з Facebook. У WordPress все вирішується банальним кодом <?php the_permalink() ?>, який автоматично підставляє необхідне посилання.
В результаті набір мета-тегів, які потрібно вставити у header, повинен виглядати наступним чином:
<meta property="fb:admins" content="ваш admin ID"/> <meta property="og:title" content="<?php the_title() ?>"/> <meta property="og:type" content="article"/> <meta property="og:url" content="<?php the_permalink() ?>"/> <meta property="og:image" content="http://site.com/default.jpg"/>
Не забудьте поміняти стрічки “ваш admin ID” та “http://site.com/default.jpg”” на ID вашого облікового запису у Facebook та шлях до зображення, яке показується при лайках статей.
Готово, тепер можна перевірити, чи не зробили ви помилку при інтеграції мета-тегів Open Graph. Для цього існує чудовий сервіс URL Linter, який дозволяє побачити вашу сторінку так, як “бачить” її Facebook.
Просто вводимо адресу статті у Linter і дивимося, чи не виникло помилок? Якщо помилок немає, значить теоретично кнопка like повинна почати працювати (принаймні, мені це допомогло).
Що робити, коли навіть це не допомогло?
Втім, бувають ситуації, коли навіть перелік мета-тегів Open Graph не допомагає виправити глюки кнопки Like (ми ж пам’ятаємо, що проблема у Facebook, а не в наших з вами сайтах). Якщо така ситуація трапилася – потрібно вдаватися до суперхаку.
Після публікації статті клікаємо на Like, щоб перевірити, чи працює. Якщо не працює, просто вводимо посилання на статтю в Linter і тиснемо Enter. Після пропускання статті через сервіс кнопка починає працювати. Дивно, але факт.
Користуйтеся на здоров’я!
Будемо сподіватися, що найближчим часом Facebook розбереться зі своїми багами, бо пропускати кожну статтю через Linter – не варіант.
Ваш самый счастливый день запомнится надолго, если его запечатил свадебный фотограф киев. Порадуйте себя отличными фотографиями!
Схожі записи
Якщо вам сподобалася стаття, буду вдячний за її підтримку у соціальних мережах (Twitter, Facebook, Google+ та вКонтактє)
Loading ...
Pingback: ()