Блог за уеб технологии, маркетинг и SEO, мотивация и продуктивност
Вграждане на Facebook видео във WordPress сайт или блог
Искаш да покажеш в своя блог процес в действие, упътване, илюстрационно видео, което си направил за Facebook или си го открил там и ти е направило впечатление. Тогава се задава проблемът с вграждане на Facebook видео в твоя блог на WordPress.
Вмъкването на медийни елементи като изображение или видео в пост на WordPress ще обогати блога ти и ще го направи по-интересен за читателите.
Добавянето на видео към WordPress публикация или страница може да бъде направено или чрез качване на видео файла в медийната библиотека на WordPress, или чрез вграждане на видео източник, хостван от платформа на трети страни като YouTube, Facebook, Vimeo и др.
Качване на видеофайл в медийната библиотека на WordPress не е за препоръчване. Излишно увеличава библиотеката и изразходва памет и време. Освен това, имаш право да качиш само твое видео.
Предимства на вграждането на Facebook видео във WordPress
За да вмъкнеш видео от Facebook в твоя WP сайт, видеоклипът трябва да е публичен, защото ако е бил настроен да бъде видим само за приятели, от момента, в който го вградиш в сайта, ще се появи съобщение, че е премахнат.
В допълнение към получаването на достъп до видеоклипове за автоматично пускане, можеш също да използваш този метод, за да вграждаш потоци на живо с помощта на новата функция на живо във Facebook. Всичко в тях функционира по същия начин.
Вграждането на собствени видеоклипове дава друг ефективен начин за популяризиране на твоята Facebook страница. Можеш да публикуваш оригинални видеоклипове във Facebook на страницата си и след това да ги вградиш в блога си, за да създадеш директна връзка.
Вградените видеоклипове във Facebook винаги показват страницата, на която са били публикувани, така че потребителят на блога лесно може да кликне върху ФБ страницата ти.
(adsbygoogle = window.adsbygoogle || []).push({});
6 основни начина за вграждане на Facebook видео във WordPress
1.Директно поставяне на видеоклипа
Един от най-лесните начини е да поставиш видео директно във визуалния редактор, докато създаваш публикация.
За тази цел просто копирай URL адреса на видеоклипа във Facebook, като кликнеш с десния бутон на мишката върху него и избереш опцията Показване на URL на видео (Show video URL). Постави този URL адрес във визуалния редактор, там където искаш да се показва в публикацията.
И трябва да поставиш оригиналната връзка, а не съкратена.
2.Директно вграждане с помощта на iframe
За да намериш кода за вграждане в рамката, първо трябва да отидеш на видеоклипа, който искаш да вградиш. След това кликни върху трите точки в горния десен ъгъл и избери Вграждане (Embed):
Или в друг случай на трите точки долу вдясно:
В новия панел трябва да видиш код за вградена рамка iframe:
Kопирай този код и го постави в текстовия редактор на WordPress. Трябва да можеш да използваш този код и в модули на конструктори на страници.
В този случай на вграждане може да имаш някои проблеми с ширината. Ако знаеш малко HTML и CSS, ще ти помогне да промениш стойностите на ширината (width=“…“) и височината (height=“…“) на видеото директно в кода на iframe и да намериш най-подходящите размери за твоя случай.
Съществува проблем и видеото не се вижда на сайта
Някои редактори на плъгини за конструктори на страници не съхраняват кода на видеото в същия му вид. В този случай се опитай да го затвориш между два тага <p></p> .
Да направим отзивчив видеоклипа на сайта
След като видеото е включено, може да възникне проблем с показването му на различните видове използвани устройства. Например: видео с перфектни размери на домашния компютър, но прекалено големи на смартфона. Или видеото може да се покаже твърде малко на домашния компютър и перфектно на смартфона.
Ето едно решение, с което можеш да направиш видеото, вградено на WordPress и на други системи responsive – означава, че елементите му на сайта са правилно видими, както на настолни компютри, така и на мобилни устройства (таблети и смартфони), независимо от размера на екрана и неговата резолюция.
Става дума за действие на ниво HTML и CSS, но е много просто .
Така че, добави тези елементи (винаги в текстов режим) към кода, който ще използваш:
<div class=”container-video”>…
кода <iframe> на видеото…
</div>
Ще трябва да създадеш и кореспонденция за class “ container-video “ в твоите CSS Style по този начин:
.container-video iframe,
.container-video embed {
width: 100%;height: 100%;
}
В нашия случай би било достатъчно да използваме само container-video клас за iframe, за да получим резултата. Аз поисках да добавя клас за вграждането embed, защото същата инструкция може да направи видеото отзивчиво, ако е вградено с помощта на следващия мощен шорткод:
3.Директно вграждане с помощта на Shortcode Embed
WordPress е гъвкав инструмент и ти позволява да получиш изключителни резултати с малко усилия. Един от начините, е чрез използването на кратки кодове. Този shortcode, от което имаме нужда сега, за да включим външен елемент в нашите страници, се нарича embed .
За да вмъкнеш Facebook видео с помощта на кратък код на WordPress, направи следното:
-
- Отново както в точка 1. копирай URL адреса на видеото;
- Отиди на страницата си във WordPress, където искаш да вмъкнеш видеоклипа;
- Въведи вграждане на URL адреса на видеото чрез кратък код embed, както е показано по-долу:
По този начин видеоклипът е включен в твоя WordPress сайт , но един от основните проблеми се отнася до размера му, тъй като той може да се показва правилно от мобилни устройства, но може да не се адаптира към екрана на компютъра.
4.Вграждане със специален код
Друго решение може да бъде използването на следния код. Замести настоящия идентификатор (този с удебелен шрифт, придвижвайки се надясно в кода), с този на видеоклипа, който искаш да вградиш:
<script>window.fbAsyncInit = function()
{
FB.init({ xfbml : true, version : 'v2.3' });
};
(function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;} js = d.createElement(s);
js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10154156496679887"
data-width="500" data-allowfullscreen="true"></div>
Вземи идентификационния номер на видеоклипа във Facebook – просто кликни върху видео връзката и изкопирай цифровата поредица.
Поставям този код в текстовия класически редактор и ето резултата:
window.fbAsyncInit = function()
{
FB.init({ xfbml : true, version : ‘v2.3’ });
};
(function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;} js = d.createElement(s);
js.id = id; js.src = „//connect.facebook.net/en_US/sdk.js“;
fjs.parentNode.insertBefore(js, fjs);
}
(document, ‘script’, ‘facebook-jssdk’));
5.Вграждане на видеоклипове от Facebook с пълен код
Отиди отново на прозореца, в който е скриптът за вграждане с iframe от точка 2. Кликни на Разширени настройки под кода:
Това те изпраща на страницата за Embedded Videos в developers.facebook.com за конкретното видео.
От там си изкопирай кода в черния прозорец. Настрой стойността на данните data–href с URL адреса на видеоклипа. Контролирай размера на плейъра, като използваш ширината на атрибута data-width:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
<a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
<p>How to share with just friends.</p>
Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
</blockquote>
</div>
</div>
</body>
</html>
Помести този код на страницата, където искаш да се показва видеото, като първата част от кода
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
се помества само веднъж на страницата, където ще бъде вградено видеото. Останалата част се помества навсякъде в публикацията, където ще поставяш видео, като съответно сменяш навсякъде data-href с URL на конкретното видео.
Още настройки
Конфигурацията по-горе не включва всички възможни настройки за вградения видеоплейър. Можеш да промениш още и следните настройки:
Позиция | Описание | По подразбиране |
---|---|---|
data-href | Абсолютният URL адрес на видеоклипа. | –– |
data-allowfullscreen | Позволи на видеоклипа да се възпроизвежда на цял екран. Може да бъде false или true. | false |
data-autoplay | Автоматично стартиране на видеоклипа при зареждане на страницата. Видеоклипът ще се възпроизвежда без звук (заглушен). Хората могат да включват звук чрез контролите за видео плейър. Тази настройка не се прилага за мобилни устройства. Може да бъде false или true. | false |
data-width | Ширината на видео контейнера. Мин. 220px. | auto |
data-show-text | Задай true, за да включиш текста от публикацията във Facebook, свързана с видеоклипа, ако има такъв. Предлага се само за сайтове на настолни компютри. | false |
data-show-captions | Задай true, за да показваш надписите (ако има такива) по подразбиране. Надписите са достъпни само на настолен компютър. | false |
6.Вграждане на Facebook видео с помощта на плъгини
Ако всичко това ти се струва сложно и не си препълнил блога си с плъгини, можеш да използваш специален плъгин, за да вмъкнеш Facebook видео в твоя уебсайт. Този метод е може би най-лесният и най-подходящ за начинаещи.
Плъгинът, който ще свърши тази работа е WP Embed Facebook, с който можеш да включиш не само видеоклипове, но и всякакъв вид съдържание, публикувано във Facebook, като публикации, коментари и др.
Заключение
Показах ти няколко различни начина за вграждане на Facebook видео във WordPress. При всеки от тези случаи трябва да внимаваш да направиш видеото отзивчиво, като се има предвид, че посещения на уеб сайтовете от мобилните устройства представляват все по-голям дял от трафика, особено по отношение на видеоклиповете.
Каква система ще използваш, за да вградиш в твоя сайт видеоклип от Facebook?
Източник на основното и първото изображение Pixabay.com.