3 варианта, как настроить теги Open Graph Facebook для WordPress
1-ый вариант. Самый простой. Плагин All in One SEO Pack
Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.
Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить». Самое важное для нас — в настройках само́й статьи или страницы блога.
Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title».
На сколько хорошо работает этот плагин, вы можете проверить, нажав на кнопку «Мне нравится» под этой статьёй. После этого на вашей стене Facebook появится первая картинка статьи и заголовок + описание, которые вы видели чуть выше на скриншоте. Переходим ко второму варианту.
2-ой вариант. Плагин Facebook Open Graph Meta
Этот вариант также прост как и предыдущий. Вы скачиваете этот плагин здесь (работу плагина я проверил, и также я знаю, что его автор — опытный разработчик, который ведёт свою страницу на Facebook), также как и в первом варианте загружаете на блог через панель управления и активируете. Я подробно остановлюсь на настройках этого плагина.
В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:
надо заменить
https://www.facebook.com/neoandrej
на
https://graph.facebook.com/neoandrej
Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).
После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.
Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу http://facebook.com/insights. Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».
Последний важный шаг. Вам необходимо вручную заменить тегв файле header.php на этот код:
xmlns:fb=»http://ogp.me/ns/fb#» xmlns:og=»http://ogp.me/ns#» >
В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег(на скриншоте ниже), который надо заменить и сохранить изменения.
После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.
3-ий вариант. Добавление и настройка тегов Open Graph вручную
Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тегна тот, что нам нужен. Открываете файл 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 перед закрывающим тегом вставляете код тегов 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 } ?>
В этих тегах вам нужно заменить 2 значения:
«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);
«og:image» content=«http://ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg»
«og:image» content=«http://ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.
Сохраняете изменения и проверяете работу тегов 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=»» alt=»»>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
//Определяет картинку по умолчанию
$first_img = «http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;
}
return $first_img;
}
</img.+src=[\'»]([^\'»]+)[\'»]>
Этот код описывает функцию catch_that_image(), которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:
$first_img = «http://ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;
Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.
Протокол Open Graph создан специалистами Facebook. Зачем его использовать? Чтобы сделать предпросмотр (превью) веб-страниц в социальных сетях смотрибельным. А в глобальном смысле для воплощения идеи семантической паутины. То есть стандартизации всей информации во Всемирной паутине, чтобы она стала пригодна для автоматической обработки.