Как добавить метаданные Open Graph для Facebook в тему WordPress

Как добавить кнопку лайка от Facebook или его же кнопку Отправить, я думаю, вы знаете. Если же нет — пишите в комментариях, будет соответствующая статья на блоге. Обычно Facebook корректно и с «умом» выбирает данные записи для публикации ее в ленте ФБ. Однако, все же случаются сбои и Facebook берет не ту картинку для миниатюры, неверный заголовок страницы и т.д. В сегодняшней статье мы поделимся способом как добавить мета-данные open graph для самой популярной социальной сети в мире в тему WordPress, который и решит все проблемы с неверными данными, получаемыми от страниц.

Есть два способа. Один для тех пользователей, которые «дружат» с кодом. Второй же — простая установка плагина.

Facebook Open Graph Meta for WordPress

Просто устанавливаем и активируем плагин Facebook Open Graph Meta for WordPress. Затем идем в Настройки » Facebook OG Meta.

Вводим свой Facebook ID, название сайта и изображение по-умолчанию — плагин работает.

Работаем с кодом

Открываем файл functions.php вашей темы и вставляем следующий код внутрь:

//Добавляем Open Graph в Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

//Разрешаем добавить Open Graph Meta Info

function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
        echo '<meta property="fb:admins" content="ВАШ USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Здесь название вашего сайта"/>';
	if(!has_post_thumbnail( $post->ID )) { //у записи нет миниатюры - используем изображение по-умолчанию
		$default_image="http://example.com/image.jpg"; //заменяем ссылку на своё изображение по-умолчанию на сервере либо на картинку из медиафайлов
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Примечание: Не забудьте изменить название сайта в месте «Здесь название вашего сайта». Также измените ссылку дефолтного изображения на свою. Мы рекомендуем указать изображение с вашим логотипом, и если у записи не окажется миниатюры, то выведется логотип вашего сайта. Исследования показывают, что расшаренные записи без изображения менее эффективны, нежели те, которые с картинкой. Также не забудьте добавить свой USER ID. Узнать его (Facebook USER ID) можно по этой ссылке: http://graph.facebook.com/igor.butsky (Просто замените igor.butsky на ваше имя страницы в Facebook).

Помните, если вы не дружите с кодом, то просто скачайте и установите плагин Facebook Open Graph Meta for WordPress. Там есть панель с настройками, где вы сможете его настроить через графический интерфейс.

VN:F [1.9.22_1171]
Rating: 1.0/5 (1 vote cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • aaa

    зачем указывать мой идентификатор в фб? и что делать, если нужно использовать эту кнопку не с моим аккаунтом, а для сайка компании, какой ид тогда указывать?

    • ADv

      Ну, к примеру, создайте компании страницу в ФБ, перейдите по ссылке в конце поста (для моей компании это будет http://graph.facebook.com/deviseltd ) и скопируйте ID оттуда…

  • Дмитрий

    Картинка по умолчанию выбирается пустая, что только не делал, устанавливал open graph, facebook like button и другие, указывал в ней адрес картинки, и даже танцевал с бубном, все равно пустая! В чем может быть дело!?

    • ADv

      Размер картинки может не соответствовать требованиям ФБ.

  • Dmitr

    У меня эти теги с помощью Jetpack добавляются, если включить сервисы поделиться или публикация. И вот проблема: сервисы нужны включенными, а формат вывода тегов меня не устраивает. Как отключить их вывод?

  • Елена

    Подскажите, при «поделиться» в соц. сетях появляется картинка как я понимаю по умолчанию, а нужно чтобы была картинка, которая на самой странице. Как это исправить?

Scroll To Top