Open Graph

Leave a comment Posted on Tech articles

Open Graph тэги вручную для тем WordPress

open-graph-facebookДля начала нужно заменить стандартный тег <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, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.