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

Опубликовано: 24.08.2018

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

Уроки Adobe Muse: Как ваш сайт выглядит в социальных сетях или Протокол Open Graph

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

IRC (Internet Relay Chat)
rss