Спонсор публікації:
Если вам нужен компьютер, обратите внимание на ноутбуки apple в киеве – это не только надежность, но и непревзойденное качество!

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

Існує кілька способів рішення цієї проблеми. Скажімо, внутрішній стандарт Facebook Open Graph Protocol дозволяє прописати мета-теги в header-і блога, і вказати прямий шлях до зображення, яке повинно відображатися у Facebook. Ось як виглядає цей тег:

<meta property="og:image" content="http://example.com/logo.jpg"/>

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

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

На щастя, існує рішення, яке дозволяє досягнути саме такого ефекту. Користувачі WordPress можуть скористатися спеціальним плагіном Facebook like thumbnail.

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

function fb_like_thumbnails()
{
    global $posts;
    $default = 'http://example.com/logo.jpg';
 
    $content = $posts[0]->post_content; // $posts is an array, fetch the first element
    $output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
    if ( $output > 0 )
        $thumb = $matches[1][0];
    else
        $thumb = $default;
 
    echo "\n\n<!-- Facebook Like Thumbnail -->\n<link rel=\"image_src\" href=\"$thumb\" />\n<!-- End Facebook Like Thumbnail -->\n\n";
}

Звісно, стрічку example.com/logo.jpg потрібно замінити на шлях до свого логотипу.

Оскільки у Facebook є власний кеш і він може зберігати картинки до “старих” лайків протягом 24 годин, можна скористатися сервісом Facebook, який “переіндексує запис”. Потрібно ввести адресу сторінки у поле http://developers.facebook.com/tools/lint До речі, цей сервіс показує, як Facebook “бачить” вашу сторінку.

Тепер все працює коректно:

Сподіваюся, ця стаття була для вас корисною і допомогла краще розібратися з правильним відображенням лайків у Facebook.