Для начала нужно заменить стандартный тег <html> на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
на этот код:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#"
xmlns:og="http://ogp.me/ns#" <?php language_attributes(); ?>>
В этом же файле header.php перед закрывающим тегом </head> вставляете код тегов Open Graph Facebook:
<!--Open Graph Facebook-->
<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>
<!-- постоянные значения -->
<meta property="fb:admins" content="ВАШ_ЛИЧНЫЙ_ID_FACEBOOK" />
<!-- если это статья -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink(); ?> "/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description"
content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image"
content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo
wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); } ?>" />
<!-- если это любая другая страница -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description"
content="<?php bloginfo('description'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg" />
<?php } ?>
Вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.
Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.
Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.
Замените этот тег:
<meta property="og:image"
content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo
wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />
на этот тег:
<meta property="og:image"
content="<?php if (function_exists('catch_that_image'))
{echo catch_that_image(); }?>" />
Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"] title="3 варианта, как настроить теги Open Graph Facebook для WordPress?" alt="3 варианта, как настроить теги Open Graph Facebook для WordPress?">/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
//Определяет картинку по умолчанию
$first_img = "http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg";
}
return $first_img;
}
Этот код описывает функцию catch_that_image(), которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:
$first_img = "http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg";
Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.