Tech articles – Page 25

$\"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, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.

Category: Tech articles

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