23.10.2024

3 +1

Адміністрація

Як вбудувати відео Facebook у публікації та сторінки WordPress

Вбудовування відео Facebook у публікацію або сторінку WordPress означає вставку живого відтворюваного відеоплеєра безпосередньо у ваш контент за допомогою або URL-based oEmbed handshake, або iframe-сніпету — без завантаження файлів. WordPress обробляє це нативно через вбудований список oEmbed-провайдерів, який включає Facebook, тобто необробленого URL відео, вставленого в редактор, достатньо для відображення повністю функціонального плеєра на фронтенді.

Цей посібник охоплює кожен доступний метод у технічній глибині: блоковий редактор Gutenberg, Classic Editor, нативний код вбудовування Facebook та сторонні плагіни. Він також розглядає зміни автентифікації, які Facebook запровадив у 2018 та 2023 роках і які порушують просте вставлення URL для багатьох користувачів — критична деталь, яку більшість посібників повністю опускає.

Чому вбудовування відео Facebook складніше, ніж здається

Facebook припинив підтримку анонімного oEmbed-ендпоінту у жовтні 2020 року. З того часу будь-який oEmbed-запит до graph.facebook.com/oembed_video вимагає дійсного Facebook App ID та зареєстрованого домену. WordPress core досі перераховує Facebook як підтримуваного oEmbed-провайдера, але без налаштованого App ID вбудовування мовчки не вдається і відображає лише заповнювач або необроблений URL.

Це найпоширеніша причина, чому розробники WordPress виявляють, що вставлення URL відео Facebook «просто не працює» на продакшн-сайтах, навіть якщо це, здається, працює в деяких локальних або кешованих середовищах.

Розуміння цього обмеження визначає, який метод слід використовувати.

Метод 1: Блоковий редактор Gutenberg з блоком вбудовування Facebook

Блоковий редактор Gutenberg надає спеціальний блок Embed з варіантом Facebook. Це рекомендований шлях для більшості інсталяцій WordPress версії 5.0 або новіших.

Крок 1: Скопіюйте правильний URL відео Facebook

Не всі URL відео Facebook є рівнозначними. Використовуйте канонічний URL для поширення, а не URL з адресного рядка браузера під час перегляду відео у повноекранному режимі.

Перейдіть до відео Facebook у вашому браузері.
Натисніть меню з трьома крапками (...) у верхньому правому куті публікації.
Виберіть Копіювати посилання.

Отриманий URL повинен відповідати одному з таких форматів:

https://www.facebook.com/username/videos/1234567890/
https://www.facebook.com/watch/?v=1234567890
https://fb.watch/xxxxxxxxxx/

Уникайте використання URL, що містять /reel/, якщо ви маєте намір вбудувати стандартне відео — Reels використовують інший ендпоінт і можуть некоректно розпізнаватися через стандартний oEmbed-шлях.

Крок 2: Відкрийте вашу публікацію або сторінку в блоковому редакторі

На панелі керування WordPress перейдіть до Публікацій або Сторінок і відкрийте елемент контенту, який хочете редагувати. Натисніть іконку +, щоб додати новий блок у потрібному місці.

Крок 3: Вставте блок вбудовування Facebook

Введіть Facebook у поле пошуку блоків або перейдіть до Embeds на панелі блоків. Виберіть блок Facebook. З’явиться поле для введення URL.

Крок 4: Вставте URL відео та вбудуйте

Вставте скопійований URL у поле введення та натисніть Enter або клацніть Embed. WordPress надсилає oEmbed-запит до API Facebook. Якщо налаштовано дійсний App ID (див. розділ про App ID нижче), відеоплеєр негайно відображається у попередньому перегляді редактора.

Якщо ви бачите повідомлення *«Вибачте, цей контент не вдалося вбудувати»*, проблема майже напевно пов’язана з відсутнім App ID, а не з форматом URL.

Крок 5: Опублікуйте або оновіть

Натисніть Опублікувати або Оновити. Вбудований плеєр тепер активний на фронтенді.

Метод 2: Classic Editor (URL на окремому рядку)

Для сайтів, що досі використовують плагін Classic Editor або версії WordPress до 5.0, механізм oEmbed працює через інший шлях коду, але спирається на той самий базовий API.

Кроки

Скопіюйте URL відео Facebook, використовуючи той самий процес, описаний вище.
Відкрийте вашу публікацію або сторінку в Classic Editor.
Перейдіть на вкладку Visual (не Text/HTML).
Вставте URL на окремому рядку, без навколишнього тексту, без розмітки гіперпосилань і без кінцевих символів.
Натисніть Опублікувати або Попередній перегляд.

Клас WP_oEmbed WordPress перехоплює URL під час обробки фільтра the_content і замінює його розміткою iframe, поверненою oEmbed-ендпоінтом Facebook.

Критична пастка: Якщо ви вставите URL всередині абзацу з іншим текстом, WordPress не запустить oEmbed-розпізнавання. URL повинен займати окремий вузол абзацу у вмісті публікації.

Метод 3: Нативний код вбудовування Facebook (iframe)

Цей метод повністю обходить систему oEmbed WordPress і працює незалежно від конфігурації App ID. Це найнадійніший варіант для публічних відео.

Як отримати код вбудовування

Перейдіть до відео Facebook.
Натисніть меню з трьома крапками (...) і виберіть Embed.
Facebook генерує сніпет <iframe>. Скопіюйте повний сніпет.

Типовий сніпет вбудовування відео Facebook виглядає так:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560&t=0"
  width="560"
  height="314"
 
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

Вставка iframe у WordPress

У Gutenberg: Додайте блок Custom HTML і вставте код iframe безпосередньо.

У Classic Editor: Перейдіть на вкладку Text (перегляд HTML) і вставте iframe у потрібному місці. Не вставляйте його на вкладці Visual — WordPress видалить або екранує HTML.

Зробіть iframe адаптивним

Стандартний iframe Facebook використовує фіксовані розміри в пікселях, що порушує відображення на мобільних пристроях. Оберніть його в адаптивний контейнер:

<div>
  <iframe
    src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fusername%2Fvideos%2F1234567890%2F&show_text=false&width=560"
   
    scrolling="no"
    frameborder="0"
    allowfullscreen="true"
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
  </iframe>
</div>

Значення padding-bottom: 56.25% підтримує співвідношення сторін 16:9. Змініть на 75% для контенту 4:3.

Виправлення вимоги Facebook App ID

Якщо ви хочете, щоб нативний метод oEmbed WordPress (Методи 1 і 2) працював надійно, вам необхідно зареєструвати Facebook App і надати його ID для WordPress.

Крок 1: Створіть Facebook App

Перейдіть на developers.facebook.com і увійдіть.
Натисніть My Apps > Create App.
Виберіть тип додатку Consumer.
Завершіть майстер налаштування. Вам не потрібно подавати додаток на перевірку для базового використання oEmbed.
З панелі керування додатком скопіюйте ваш App ID.

Крок 2: Додайте App ID до WordPress

Найчистіший підхід — додати App ID через functions.php вашої теми або плагін для конкретного сайту:

add_filter( 'oembed_fetch_url', function( $provider, $url, $args ) {
    if ( strpos( $provider, 'facebook.com' ) !== false ) {
        $provider = add_query_arg( 'access_token', 'YOUR_APP_ID|YOUR_CLIENT_TOKEN', $provider );
    }
    return $provider;
}, 10, 3 );

Замініть YOUR_APP_ID та YOUR_CLIENT_TOKEN значеннями з панелі керування вашим Facebook App у розділі Settings > Advanced > Client Token.

Крім того, кілька плагінів обробляють це автоматично — зокрема Embed Plus for Facebook та WP Facebook oEmbed Fix.

Метод 4: Сторонні плагіни для розширеного контролю

Плагіни є правильним вибором, коли вам потрібні функції, що виходять за межі базового відтворення: власні розміри плеєра, відкладене завантаження, шлюзи згоди GDPR або вбудовування на основі стрічки.

Smash Balloon Social Post Feed є найбільш широко використовуваним варіантом. Після встановлення та авторизації облікового запису Facebook він надає шорткод та блок Gutenberg з детальними елементами керування шириною плеєра, поведінкою автовідтворення та відображенням підписів.

Embed Plus for Facebook зосереджується конкретно на автентифікації oEmbed і є легким рішенням, якщо ваша єдина мета — виправити проблему App ID без додавання повноцінного плагіна соціальної стрічки.

WP YouTube Lyte / Embed Optimizer (від команди WordPress Performance) може відкладено завантажувати вбудовування Facebook, щоб запобігти блокуванню рендерингу сторінки iframe — суттєве покращення Core Web Vitals на сторінках з великою кількістю контенту.

Порівняння методів

Метод	Потребує App ID	Адаптивний за замовчуванням	Працює з приватними відео	Рівень налаштування	Найкраще для
Блок Embed у Gutenberg	Так (після 2020)	Так	Ні	Низький	Стандартні публічні відео, просте налаштування
Вставка URL у Classic Editor	Так (після 2020)	Так	Ні	Низький	Застарілі інсталяції WordPress
Нативний iframe Facebook	Ні	Ні (потрібне ручне виправлення)	Ні	Середній	Надійне вбудовування без налаштування API
Сторонній плагін	Залежить	Так	Частково	Високий	Розширені макети, відповідність GDPR, стрічки

Продуктивність та міркування щодо Core Web Vitals

iframe вбудовування Facebook завантажує кілька сторонніх скриптів з connect.facebook.net, що може додати 200–600 мс затримки блокування рендерингу та негативно вплинути на показники Largest Contentful Paint (LCP) та Total Blocking Time (TBT).

Практичні способи пом’якшення:

Патерн фасаду: Замініть iframe статичним мініатюрним зображенням і завантажуйте реальний плеєр лише після кліку користувача. Підхід Lite YouTube Embed можна адаптувати для Facebook за допомогою власного фасаду.
Атрибут loading="lazy": Додайте loading="lazy" до тегу iframe, щоб відкласти завантаження до моменту, коли елемент потрапить у область перегляду.
Альтернатива з власним хостингом відео: Якщо відео є вашим власним контентом, розгляньте можливість завантаження його безпосередньо до медіатеки WordPress або розміщення на VPS з конфігурацією потокового відео. Це повністю усуває залежність від сторонніх скриптів.

Для WordPress-сайтів з високим трафіком, де швидкість сторінки безпосередньо впливає на конверсію, запуск власної серверної інфраструктури на Виділеному сервері дає вам повний контроль над заголовками кешування, інтеграцією CDN та порядком завантаження скриптів — нічого з цього недоступно у спільних середовищах.

Конфіденційність, GDPR та згода на використання файлів cookie

Коли відвідувач завантажує сторінку з вбудованим відео Facebook, скрипти Facebook встановлюють сторонні файли cookie і можуть збирати поведінкові дані — навіть якщо відвідувач не має облікового запису Facebook. Відповідно до GDPR (ЄС), LGPD (Бразилія) та CCPA (Каліфорнія), це є обробкою даних третіми сторонами, що вимагає явної згоди користувача перед завантаженням iframe.

Реалізуйте шлюз згоди за допомогою плагіна, як-от Complianz або Cookiebot, який замінює iframe заповнювачем до того, як користувач прийме відповідну категорію файлів cookie. Це не є необов’язковим для сайтів з трафіком з ЄС — це є законодавчою вимогою.

Усунення поширених помилок вбудовування

Відео показує заповнювач або зламане вбудовування в редакторі, але працює на фронтенді: Це відома проблема рендерингу Gutenberg. Попередній перегляд редактора використовує сесію адміністратора, яка може не мати правильного кешу oEmbed. Очистіть кеш oEmbed, видаливши записи метаданих публікації _oembed_* для відповідної публікації, або використайте команду WP-CLI:

wp post meta delete <post_id> --match-prefix=_oembed_

«Вибачте, цей контент не вдалося вбудувати» на фронтенді: Майже завжди спричинено відсутнім App ID. Дотримуйтесь кроків налаштування App ID, описаних вище.

Відео вбудовується коректно, але зникає після оновлення WordPress: WordPress періодично оновлює свій список oEmbed-провайдерів. Зміна ендпоінту API Facebook може порушити існуючі вбудовування. Перевірте список провайдерів wp-includes/class-oembed.php і порівняйте з поточним задокументованим ендпоінтом Facebook.

Вбудовування працює на стейджингу, але не на продакшні: API oEmbed Facebook перевіряє домен запиту відносно списку дозволених доменів додатку. Додайте ваш продакшн-домен до поля App Domains вашого Facebook App у розділі Settings > Basic.

Приватні відео або відео з груп не можна вбудувати: API oEmbed Facebook обслуговує лише публічно доступні відео. Не існує підтримуваного обхідного шляху для приватного контенту — єдиний варіант — завантажити відео та розмістити його самостійно, наприклад на VPS з cPanel з налаштованим медіа-каталогом для прямого потокового передавання.

Міркування щодо хостингу для WordPress-сайтів з вбудованими медіа

Сторінки з вбудованими відео-iframe значно важчі за стандартні сторінки з контентом. Кожне вбудовування Facebook ініціює DNS-запити, TCP-з’єднання та завантаження скриптів з CDN Facebook при кожному незакешованому завантаженні сторінки.

Якщо ваш WordPress-сайт працює на Спільному веб-хостингу, час обробки на стороні сервера не є вузьким місцем — ним є клієнтські запити до сторонніх ресурсів. Однак якщо ви також самостійно розміщуєте відеофайли або керуєте сайтом з великою кількістю медіа, обмеження пропускної здатності та I/O спільного хостингу стають актуальними обмеженнями.

Для сайтів, що поєднують вбудоване соціальне відео з оригінальним медіаконтентом, середовище VPS Хостингу з об’єктним кешуванням (Redis або Memcached), кешем повних сторінок (Nginx FastCGI cache або Varnish) та правильно налаштованим CDN забезпечить помітно кращі показники Core Web Vitals, ніж будь-яке спільне середовище.

Захист адміністративної панелі WordPress та ендпоінтів вбудовування за допомогою дійсного SSL-сертифіката також є обов’язковим — API Facebook відмовиться обслуговувати oEmbed-відповіді для джерел без HTTPS. Якщо ваш сайт ще не перейшов на HTTPS, почніть з SSL-сертифіката перед усуненням будь-яких проблем з вбудовуванням.

Ключові технічні висновки

oEmbed-ендпоінт Facebook вимагає App ID з жовтня 2020 року. Будь-який посібник, що не згадує про це, є застарілим.
Блок Embed у Gutenberg та метод URL у Classic Editor обидва залежать від того самого класу WP_oEmbed та тієї самої вимоги App ID.
Метод нативного iframe Facebook є найнадійнішим запасним варіантом для публічних відео і не потребує облікових даних API.
iframe з фіксованими розмірами необхідно обгортати в адаптивний CSS-контейнер для коректного відображення на мобільних пристроях.
Вбудовування Facebook завантажує сторонні скрипти, що впливають на Core Web Vitals. Реалізуйте відкладене завантаження або патерн фасаду на сторінках, чутливих до продуктивності.
Відповідність GDPR вимагає шлюзу згоди перед завантаженням iframe — а не лише банера про файли cookie.
Приватні відео Facebook не можна вбудувати на зовнішніх сайтах жодним підтримуваним методом.
Завжди перевіряйте, що ваш продакшн-домен вказано у списку дозволених доменів Facebook App, щоб запобігти збоям при переході зі стейджингу на продакшн.

Часті запитання

Чому моє вбудоване відео Facebook показує зламаний заповнювач замість відео?

Найімовірніша причина — відсутній або неправильно налаштований Facebook App ID. З жовтня 2020 року API oEmbed Facebook вимагає зареєстрованого App ID з вашим доменом, вказаним у дозволених доменах. Налаштуйте App ID у WordPress за допомогою фільтра oembed_fetch_url або встановіть плагін, який обробляє це автоматично.

Чи можна вбудувати приватне відео Facebook у WordPress?

Ні. API oEmbed Facebook розпізнає лише публічно доступні URL відео. Відео, обмежені для друзів, груп або певної аудиторії, не можна вбудувати на зовнішніх веб-сайтах жодним підтримуваним методом. Єдина альтернатива — завантажити відео та розмістити його на власному сервері.

Чи сповільнює вбудовування відео Facebook мій WordPress-сайт?

Так, помітно. Кожне вбудовування Facebook завантажує скрипти з connect.facebook.net, що додає затримку блокування рендерингу. Пом’якшіть це, додавши loading="lazy" до iframe, реалізувавши фасад із завантаженням за кліком або використовуючи плагін Embed Optimizer для відкладення виконання скриптів.

Чи потрібен плагін для вбудовування відео Facebook у WordPress?

Не обов’язково. WordPress підтримує oEmbed Facebook нативно, але для його роботи після 2020 року необхідно мати налаштований дійсний App ID. Якщо ви використовуєте нативний код iframe вбудовування безпосередньо від Facebook, жодний плагін не потрібен.

Чи законно вбудовувати відео Facebook на моєму веб-сайті?

Вбудовування публічно поширених відео Facebook за допомогою офіційного механізму вбудовування Facebook загалом дозволено відповідно до Умов надання послуг Facebook, за умови, що оригінальне відео не порушує авторські права. Однак вбудовування активує скрипти відстеження Facebook, що створює зобов’язання GDPR для сайтів з відвідувачами з ЄС. Завжди реалізовуйте шлюз згоди на файли cookie перед завантаженням iframe.

Збережіть 15% на всі хостинг-послуги