Как добавить видео ВКонтакте на Вордпресс: плагином и вручную
ВКонтакте является самой популярной социальной сетью в России. Она включает в себя и видеохостинг VK Видео, который позволяет всем желающим загружать свои ролики. Просматривать их можно не только в самой соцсети, но и на внешних сайтах.
В этой статье я рассмотрел, как на ВордПресс вывести ВК Видео оптимальным образом, чтобы это было удобно для пользователей и не создавало проблем с точки зрения ранжирования ресурса в поисковых системах.
- Почему стоит использовать VK Video на сайтах WordPress
- Как добавить видео ВКонтакте в Водпресс без плагина
- В классическом редакторе и Gutenberg
- PHP-код для работы ссылок через встраивание
- Лучшие плагины для встраивания видеороликов ВКонтакте в WordPress
- OmniVideo
- ARVE (Advanced Responsive Video Embedder)
- VKontakte Online Cinema
- Подведем итог
Почему стоит использовать VK Video на сайтах WordPress
Платформа ВК Видео стремительно набирает популярность на фоне замедления YouTube в России. На то есть несколько причин:
Ролики воспроизводятся без тормозов в хорошем качестве при стабильном интернет-соединении, в отличие от Ютуб.
Удобный интерфейс в веб-версии, плюс имеется отдельное приложение для мобильных устройств.
Простая модерация на платформе, что выгодно ее отличает от других российских аналогов, таких как RuTube.
ВК Видео является частью ВКонтакте, что приводит к социальным взаимодействиям пользователей на платформе. Они оставляют комментарии, лайкают контент, делятся с друзьями.
Имеется система монетизации.
Вебмастерам, которые работают на русскоязычную аудиторию и хотят удерживать ее на сайте максимально долго, удобно сейчас встраивать на сайт ВК Video, когда Ютуб у многих тормозит. Видеохостинг знаком практически всем посетителям, учитывая распространенность ВКонтакте. Он удобен для вывода роликов на самых разных сайтах, если это блог, портфолио, магазин по продаже товаров или любой другой ресурс.
Как добавить видео ВКонтакте в Водпресс без плагина
Без установки дополнительных расширений VK Video в WordPress можно встраивать при помощи iframe. Рассмотрю способы, как это делать.
В классическом редакторе и Gutenberg
Сама площадка ВК Видео дает для вставки на сайты код iframe. Его можно получить у любого ролика. Для этого нажмите кнопку «Поделиться».
Далее переключитесь на вкладку «Экспортировать». Здесь находится embed код. Добавьте его к себе на сайт, чтобы получить встроенный видеоролик.
Платформа предлагает стандартный iframe для встраивания, который считается оптимальным. Но некоторые атрибуты в нем можно добавить или изменить:
- width и height — ширина и высота самого iframe в пикселях;
- frameborder — определяет наличие границы вокруг iframe: значение «0» убирает рамку, а «1» — делает ее видимой.
Данный атрибут считается устаревшим, поэтому рекомендуется использовать CSS для управления границами.
- allow — применяется для управления определенными функциями фрейма. Среди самых распространенных: «autoplay» для автоматического запуска и «fullscreen» для добавления кнопки открытия в полноэкранном режиме.
Также поддерживается атрибут allowfullscreen, который можно использовать отдельно от allow для добавления кнопки раскрытия видео на весь экран.
- title — рекомендуется добавлять, чтобы повысить доступность. Текст непосредственно на странице не выводится, но технологии чтения с экрана его считывают.
- style — позволяет применить заданные CSS-стили непосредственно к iframe.
Полученный iframe остается добавить удобным способом.
В классическом редакторе WordPress (Classic Editor).
Переключитесь в самом редакторе на вкладку «Текст» и разместите фрейм в нужном месте контента.
В блочном редакторе Gutenberg.
Выберите среди доступных блоков «Произвольный HTML-код» и вставьте в него iframe.
PHP-код для работы ссылок через встраивание
Постоянно переходить в экспортирование каждого ролика не очень удобно. Небольшой программной доработкой шаблона можно встроить функцию, которая будет превращать ссылку на видео из ВК в iframe с заранее заданными параметрами.
Перед внесением изменений в functions.php, не забудьте сделать резервную копию файла.
Я написал и протестировал код, который обрабатывает ссылки на ВК Video и отображает их в iframe. Чтобы его использовать:
- Зайдите в functions.php используемой темы и добавьте следующий код:
function vk_wpcourses_shortcode($atts) {
$url = $atts['url'] ?? '';
if (preg_match('/vk\.com\/(video|club|videos)/', $url)) {
if (preg_match('/video-?(\d+)_?(\d+)/', $url, $matches)) {
$oid = (int)$matches[1];
$id = (int)$matches[2];
} elseif (preg_match('/club(\d+)\?z=video-?(\d+)_?(\d+)/', $url, $matches)) {
$oid = - (int)$matches[1];
$id = (int)$matches[3];
} else {
return '<p>Ошибка в ссылке.</p>';
}
$iframe_url = sprintf('https://vk.com/video_ext.php?oid=%d&id=%d&hd=2', $oid, $id);
return '<iframe src="' . esc_url($iframe_url) . '" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe>';
}
return '<p>Ошибка в ссылке.</p>';
}
add_shortcode('vk_video', 'vk_wpcourses_shortcode');
- При вставке видео в запись или на страницу, используйте следующий шорткод:
[vk_video url="ссылка"]
В обработчике действует проверка, что добавлена ссылка на ролик из ВК. Далее функция извлекает oid и id из линка, чтобы сформировать iframe.
Работать этот код будет, как с вариантом ссылки, которая ведет напрямую на видео, так и с форматом, когда видео открыто через паблик, адрес которого добавляется в ссылку.
Лучшие плагины для встраивания видеороликов ВКонтакте в WordPress
Чтобы не возиться с кодом, можно воспользоваться одним из готовых WordPress плагинов для встраивания роликов из ВК.
OmniVideo
Плагин OmniVideo является универсальным решением для вставки роликов из разных видеосервисов на сайт WP. При его использовании вебмастер формирует группу ссылок на разные видеохостинги в единый блок. В зависимости от предпочитаемого варианта посетитель выбирает платформу для просмотра.
Работает OmniVideo с ВК, YouTube, Vimeo, Дзен, RuTube, Одноклассники, Mail Видео, Kinescope и загруженными на сайт роликами в mp4. Рекомендую выполнять кросспостинг роликов на максимальное количество платформ.
Для взаимодействия с плагином имеется настраиваемый шорткод и блок Gutenberg. Выбирайте самый удобный вариант в зависимости от используемого редактора на своем конкретном проекте.
Покажу, как происходит вставка ролика из ВК на страницы WP при помощи “ОмниВидео”.
Через шорткод.
Для встраивания предлагается шорткод следующего формата:
[omnivideo vk="ссылка"]
Чтобы кастомизировать блок или добавить в него другие источники, используются атрибуты. Основные из них:
- youtube, mail, dzen и другие – варианты платформ для встраивания роликов;
- title — название для блока;
- title_tag — тег заголовка;
- poster — картинка для блока с роликом;
- style — кастомизирует плеер.
Полный список атрибутов содержится в документации к OmniVideo. Она на русском языке и доступна всем обладателям лицензии.
В результате стандартный сформированный шорткод со ссылками на несколько видеоплатформ может выглядеть следующим образом:
[omnivideo title_tag="h2" style="pills" title="Заголовок" youtube="ссылка" vk="ссылка" poster="auto"]
Через Gutenberg.
В блочном редакторе WordPress после установки ОмниВидео найдите одноименный виджет.
Работать с ним крайне просто — добавьте необходимые ссылки и задайте параметры.
После активации, расширение добавляет в админ панель WordPress пункт «Настройки» — «OmniVideo». Там выставляются все параметры по умолчанию.
Видео: как работать с блоком Gutenberg в Omnivideo
Использовать ОмниВидео не только удобно с точки зрения встраивания роликов из ВК. Плагин еще и проработан для дополнительной оптимизации роликов.
OmniVideo позволяет добавить видео с YouTube, ВК и других площадок на WordPress максимально грамотно с точки зрения производительности сайта и удобства, что позитивно сказывается на пользовательском опыте и SEO.
OmniVideo со скидкой
ARVE (Advanced Responsive Video Embedder)
ARVE Plugin для вставки видео работает с большим количеством зарубежных сервисов, а также с ВКонтакте и Одноклассниками. Он позволяет добавлять ролики через настраиваемый шорткод.
В бесплатном варианте плагина пользователь получает возможность просто добавлять ролики и получать их адаптивный вывод на страницах. В Pro-версии есть множество других опций:
- Технология Lazy Load.
- Настройка миниатюры и плеера.
- Воспроизведение в лайтбоксе.
- SEO-параметры.
- Автоматическая пауза.
- Удаление ссылки для перехода на видеохостинг и многое другое.
Пользователи отмечают, что ARVE перегружен опциями, из-за чего взаимодействовать с ним достаточно сложно. Помимо атрибутов шорткода, плагин имеет несколько вкладок параметров в админке. Он подойдет для сайтов, которые сконцентрированы на видеоконтенте и хотят максимально детально настроить вывод роликов.
Расширение не имеет пожизненной лицензии для Pro-версии. Ее стоимость составляет 40 евро в год для 1 домена.
VKontakte Online Cinema
VKontakte Online Cinema позволяет произвести импорт на сайт WordPress всех видеозаписей из отдельной группы или со стены пользователя. После подключения источника каждый ролик формируется в формате отдельного поста на сайте.
VKontakte Online Cinema давно не обновлялся и не работает с современными версиями WordPress. Также больше нет возможности приобрести Pro-версию плагина, которая автоматизировала процесс импорта роликов.
Подведем итог
Встраивание роликов из ВК напрямую через iframe замедляет сайт, поэтому лучше использовать расширение OmniVideo. У него нет конкурентов, учитывая его стоимость, функциональность и акцент на российских пользователях.
Промокод на OmniVideo
Пожалуйста, оцените материал: