Как интегрировать Facebook Open Graph с WordPress

Протокол Facebook Open Graph позволяет вам делиться контентом своего блога не только со своими читателями, но и с друзьями из Facebook. Лучшая часть - когда кто-то понравилось ваш контент (ы), он будет опубликован в их профиле Facebook. Но это еще не все, Open Graph позволяет вам исследовать более интересные способы взаимодействия и взаимодействия со своими читателями. В конечном итоге - если это сделано правильно - это укрепляет ваш бренд и увеличивает трафик вашего сайта.

В сегодняшнем посте мы рассмотрим как интегрировать Facebook Open Graph с собственным WordPress в подробном пошаговом руководстве. Это потребует редактирования ваших существующих тем WordPress и создания приложения Facebook (если у вас его нет).

Готовы? Давайте запустим браузер и ваш любимый редактор кода. Полное руководство после прыжка.

Шаг 1. Создайте приложение на Facebook

Нам понадобится Идентификатор приложения и чтобы получить это, вам нужно создать приложение для Facebook. Если у вас уже есть, перейдите к шагу 2.

Создать приложение легко, вот что вы делаете:

1. Войдите в Facebook, перейдите на страницу разработчика.
2. Нажмите "Настройте новое приложениекнопка в правом верхнем углу.
3. Дать имя в ваше новое приложение, согласна в Facebook, нажмите Создать приложение.
4. Идти к Веб-сайт вкладка, заполните адрес сайта а также Домен сайта.
5. Запишите значение Идентификатор приложения где-то и ударилСохранить изменениякнопка.

Это все! Вы всегда можете вернуться позже, чтобы заполнить остальную информацию.

Шаг 2. Заменить Тег

Откройте файл заголовка вашей темы (Header.php) в вашем любимом редакторе. Всегда сохраняйте резервную копию на случай, если что-то пойдет не так.

Найдите следующую строку кода или строку, начинающуюся с >

Заменить его на:

Держите header.php открытым, он нам понадобится для третьего шага.

Шаг 3. Вставьте OG теги

Вставьте следующий код сразу после тег или раньше тег.

      "/>          

Вот некоторые из значений, которые вам нужно изменить:

• Строка 3: заменить your_fb_app_id с Идентификатор приложения из шага 1.
• Строка 4: Вы можете получить your_fb_admin_id под вашей страницей Facebook Insights, (Подробнее). Нажми на "Insight для вашего сайтазеленая кнопка, захватите всю строку кода и замените строку 4.
• Строка 12: эта строка определяет изображение, представляющее ваш пост. Если ваша тема поддерживает WordPress Post Thumbnails, она должна работать нормально. Но если этого не произойдет, он будет грациозно потерпеть неудачу без изображения. Проверьте шаг 3a для альтернативного обходного пути.
• Строка 19: заменить logo.jpg с ссылкой на логотип вашего блога. Он будет отображаться, если на вашем блоге опубликована не-постовая страница в вашем блоге..

Шаг 3а - Когда происходит сбой wp_get_attachment_thumb_url

когда wp_get_attachment_thumb_url () не удалось сработать, скорее всего вы переходите к атрибуту содержимого без значения, как показано ниже:

Простой обходной путь - заменить строку 12 следующим кодом:

Далее откройте functions.php и вставьте следующий код:

function catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ match); $ first_img = $ соответствует [1] [0]; if (empty ($ first_img)) // Определяет изображение по умолчанию $ first_img = "/images/default.jpg";  return $ first_img; 

Этот код замены пытается использовать вызов функции catch_that_image () захватить и вывести URL первого изображения, с которым оно сталкивается. Замените строку 10 URL-адресом изображения по умолчанию, если функция не может найти свое первое изображение.

Шаг 4. Вставьте Facebook Javascript SDK

Следующий Javascript дает вам доступ ко всем функциям Graph API и диалогов. Он также позволяет легко интегрировать социальные плагины Facebook, такие как кнопка «Нравится», Facepile, Рекомендации и т. Д..

Поместите это в header.php, сразу после

замещать your_fb_app_id в строке 4 с Идентификатор приложения из шага 1 ранее.

Шаг 5. Давайте проверим это!

Мы завершили интеграцию Facebook Open Graph в блог WordPress. Давайте сделаем пару тестов, чтобы убедиться, что мы сделали все правильно.

Тест № 1 - Просмотр исходного кода

Взгляните на исходники одного из постов блога, у вас должно получиться что-то вроде этого:

Проверьте свойства и их значения, убедитесь, что они правильные.

Тест № 2 - установить лайк-бокс

Если вы не установили кнопку «Нравится» на Facebook, возможно, пришло время ее получить. Поместите следующий код в любом месте (желательно до содержимого или после содержимого) внутри single.php:

Затем найдите друга в подобно Это. Вы должны увидеть нечто подобное, появившееся в его профиле на Facebook:

Дополнительно: плагин WordPress

Если вам как-то не удалось установить коды или вам нужно сделать это быстро и легко - для этого есть плагин WordPress..

Facebook Open Graph Meta в WordPress - это плагин WordPress, который добавляет метаданные Facebook, чтобы избежать проблем с миниатюрами, неправильных заголовков, проблем с описанием и т. Д..