Як інтегрувати відкритий графік Facebook з WordPress

Протокол Facebook Open Graph дозволяє обмінюватися вмістом свого блогу не тільки з читачами, але і з друзями у Facebook. Найкраща частина - коли хтось сподобався Ваш вміст (и) буде опубліковано на своєму профілі Facebook. Але це ще не все, Open Graph дозволяє вивчати більш цікаві способи взаємодії та взаємодії з читачами. У кінцевому підсумку - якщо це зроблено правильно - він створює ваш бренд і збільшує трафік вашого сайту.

У сьогоднішньому посту ми розглянемо як інтегрувати Facebook Open Graph з самостійно розміщеним WordPress детальний покроковий посібник. Це вимагатиме редагування існуючих тем WordPress і створення програми Facebook (якщо у вас її немає).

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

Крок 1. Створіть програму Facebook

Нам знадобиться Ідентифікатор програми і щоб отримати це, вам потрібно створити програму Facebook. Якщо у вас вже є один, перейдіть до кроку 2.

Створення програми легко, ось що ви робите:

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

Це все! Ви завжди можете повернутися пізніше, щоб заповнити решту інформації.

Крок 2. Замініть Тег

Відкрийте файл заголовка теми (header.php) у вашому улюбленому редакторі. Завжди тримайте резервну копію на випадок, якщо щось піде не так.

Шукайте наступний рядок коду або той, який починається з >

Замінити його на:

Тримайте header.php відкритим, ми будемо потребувати його для 3-го кроку.

Крок 3. Вставте OG теги

Вставте наступний код відразу після або раніше тег.

       "/>          

Нижче наведено деякі значення, які потрібно змінити:

• Рядок 3: Замінити your_fb_app_id з Ідентифікатор програми від кроку 1.
• Рядок 4: Ви можете отримати your_fb_admin_id на сторінці Facebook Insights (Додаткова інформація). Натисніть "Статистика для вашого веб-сайту"Зелена кнопка, захопити весь рядок коду і замінити рядок 4.
• Рядок 12: цей рядок визначає зображення, яке представляє вашу публікацію. Якщо ваша тема підтримує мініатюри WordPress Post, вона повинна працювати нормально. Але якщо цього не відбудеться, то він не вийде граціозно без зображення. Ознайомтеся з кроком 3a для альтернативного шляху.
• Рядок 19: Замінити logo.jpg з URL-адресою до логотипу вашого блогу. Він відображатиметься, коли на вашому блозі буде розміщено сторінку, що не публікується на Facebook.

Крок 3a - Коли "wp_get_attachment_thumb_url" не працює

Коли wp_get_attachment_thumb_url () не вдалося працювати, ймовірно, ви перейдете до атрибута вмісту без значення, як це показано нижче:

Простим обхідним шляхом буде замінити рядок 12 на наступний код:

Далі відкрийте functions.php і вставте наступний код:

функція catch_that_image () global $ post, $ posts; $ first_img = "; ob_start (); ob_end_clean (); $ output = preg_match_all ('// i ', $ post-> post_content, $ matches); $ first_img = $ match [1] [0]; if (empty ($ first_img)) // Визначає зображення за замовчуванням $ first_img = "/images/default.jpg";  повернути $ first_img; 

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

Крок 4. Вставте SDK для Facebook Javascript

Наступний Javascript надає вам доступ до всіх функцій API і діалогових вікон Graph. Вона також дозволяє легко інтегрувати соціальні плагіни Facebook, такі як кнопка Like, 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, щоб уникнути виникнення ескізів, неправильного випуску назви, помилки в описі й т.д..