Как добавить видео из Одноклассников на WordPress-сайт
Как и любая социальная сеть, Одноклассники дает возможность размещать видео. У нее нет лимита по объему загружаемых данных, что позволяет вебмастерам хранить ролики в ОК и выводить их на своем сайте. Но добавить видео из Одноклассников в WordPress — это половина дела, нужно проделать все действия правильно, чтобы не навредить ресурсу. В статье расскажу, какие имеются способы публикации роликов из этой социальной сети.
- Одноклассники Видео – русская альтернатива YouTube
- Как скачать видео с ОК к себе на сайт
- Как добавить видео с Одноклассников на сайт без плагина
- Ссылкой
- HTML-кодом iframe
- Через виджет контента
- Через медиатеку
- Как вставить видео с Одноклассников в WordPress с помощью плагина
- OmniVideo
- Embed Odnoklassniki Video
- Итоги
Одноклассники Видео – русская альтернатива YouTube
Видеоплатформа соцсети Одноклассники рассматривается (вместе с RuTube и ВК) в качестве одной из главных альтернатив YouTube. Она предоставляет инструменты, чтобы пользователи могли загружать и просматривать ролики, анализировать статистику и даже зарабатывать на них.
Используя Одноклассники в качестве платформы для публикации, вебмастер может не только обеспечить удобный к ним доступ для посетителей сайта, но и заработать на этом.
Как скачать видео с ОК к себе на сайт
Иногда требуется вставить на сайт чужой ролик, размещенный в социальной сети в одной из групп или на личной странице. Если не хочется напрямую интегрировать контент на свой ресурс и тем самым рекламировать его источник, можно предварительно загрузить видеоролик на компьютер, а после залить на свой хостинг.
Имеются разнообразные сервисы, которые позволяют скачать данные с видеоплатформ. Рассмотрю действия на примере Social Media Load:
- В Одноклассниках под видео нажмите на кнопку «Еще» и выберите пункт «Скопировать ссылку».
- Зайдите в сервис Social Media Load и вставьте в строку ссылку на ролик из буфера обмена. Нажмите «Загрузить».
- Платформа обработает задачу и предложит несколько вариантов выгрузки видео в разном качестве. Нажмите на оптимальный для себя вариант. Сразу начнется загрузка ролика на компьютер.
Теперь остается добавить видео в «Медиафайлы» на личном ресурсе.
Чем выше качество ролика и больше продолжительность, тем весомее его размер. Это необходимо учитывать, если объем памяти для хранения данных на хостинге ограничен.
Как добавить видео с Одноклассников на сайт без плагина
Рассмотрю 4 способа встраивания роликов в посты и на страницы ВордПресс без установки дополнительного софта.
Ссылкой
Вебмастеры привыкли, что WordPress автоматически обрабатывает ссылки YouTube. Достаточно просто вставить линк на ролик, чтобы он преобразовался в iframe блок и вывелся в публикации. Расскажу, как сделать аналогичную обработку ссылок из Одноклассников.
В functions.php используемой темы добавьте следующий код, чтобы ссылки из ОК автоматически обрабатывались:
function embed_ok_video(\$content) {
\$pattern = '/https?:\/\/ok\.ru\/video\/(\d+)/i';
\$replacement = '<iframe width="640" height="360" src="//ok.ru/videoembed/\$1?nochat=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>';
return preg_replace(\$pattern, \$replacement, \$content);
}
add_filter('the_content', 'embed_ok_video'); Вы можете задать оптимальные для вашего проекта показатели Width (ширина) и Height (высота) для блока с роликом.
Перед внесением изменения в functions.рhp сделайте резервную копию файла. А лучше используйте бесплатный плагин ProFunctions и добавляйте код через него. Так вы обезопасите себя от возможных ошибок.
Теперь при создании контента достаточно просто вставлять ссылку на видео из ОК, чтобы выводился блок с роликом. Как это делать:
- Под видео в соцсети нажмите «Еще» — «Скопировать ссылку».
- В классическом редакторе WP добавьте линк в том месте, где надо вывести ролик. Если используете Gutenberg, то вставляйте ссылку через блок «Произвольный HTML» или «Классический».
- Движок автоматически обработает URL и выведет его в формате iframe блока.
HTML-кодом iframe
Сама социальная сеть Одноклассники дает возможность получить готовый iframe-код, который остается вставить в нужное место на сайте, чтобы вывести ролик.
- Для формирования кода нажмите в правом верхнем углу видеоролика на пункт «Ссылка».
- Появится попап окно. Здесь задается размер блока, плюс можно активировать опцию автоматического воспроизведения. Задав требуемые параметры, нажмите «Скопировать код».
- Теперь остается добавить фрейм из буфера обмена через «Текст» в классическом редакторе WordPress или при помощи блока «Произвольный HTML» в Gutenberg.
Через виджет контента
Рассмотренные способы предусматривали встраивание непосредственно роликов. Но есть другой вариант — добавление на сайт виджета с постом.
При встраивании поста выводится блок, который стилем отсылает к Одноклассникам. В нем имеются привычные кнопки: «Поделиться», «Комментировать», «Класс», а также возможность быстро вступить в группу. Пример такого блока можно видеть ниже.
Чтобы создать подобный элемент для своего ресурса, необходимо выполнить действия:
- Перейдите в Одноклассники в раздел создания виджета контента.
- Вставьте ссылку на пост в соответствующее поле и установите другие опции.
- Сразу отобразится вид блока. Если все устраивает, то скопируйте представленный код встраивания и добавьте в редакторе WordPress в нужное место.
Виджет с постом может включать в себя не только видеоролик. Таким же образом легко встраивать просто текстовый пост, гифки, картинки и прочее.
Через медиатеку
Выше я показывал способ скачать видео из Одноклассников к себе на сайт. После его загрузки в «Медиатеку», достаточно просто встроить видеоплеер в нужное место.
В классическом редакторе.
- Нажмите «Добавить медиафайл».
- Выберите загруженный ролик и установите для него «Настройку отображения файла» в варианте «Вставить медиаплеер». Нажмите «Вставить в запись».
- Видеоролик добавится в стандартном плеере WordPress.
В Gutenberg.
- Есть несколько вариантов блоков, которые можно использовать. Рассмотрю на примере компонента «Видео». Найдите его в общей библиотеке через поиск.
- Если ролик уже загружен в медиафайлы, то нажмите «Библиотека файлов», далее отметьте его и нажмите «Вставить». В ином случае, нажмите «Загрузить» и сперва добавьте файл на сайт.
- В сайдбаре доступны настройки для плеера, которые можно установить.
Как вставить видео с Одноклассников в WordPress с помощью плагина
Плагины WordPress предназначены для оптимизации выполнения задач, которые можно решить и другими способами. Рассмотрим, как встроить с их помощью видео из Одноклассников.
OmniVideo
Плагин OmniVideo был разработан российской студией специально для упрощения и улучшения встраивания видео с различных площадок на сайт. Он позволяет вывести в рамках одного блока видео с нескольких платформ в отдельных вкладках.
Сейчас в России замедлен YouTube, из-за чего многие посетители не могут смотреть его. Некоторые из пользователей не готовы использовать RuTube в качестве платформы для просмотра, а другим не нравится ВК или Дзен. Объединив в рамках единого блока контент с разных видеохостингов, можно существенно улучшить опыт взаимодействия посетителей ресурса с видео, что скажется положительно в общем на поведенческих факторах сайта.
Полный список поддерживаемых OmniVideo платформ:
Также через него можно вывести загруженные на хостинг сайта ролики в mp4.
Подробнее расскажу, как добавить видео с Одноклассников двумя способами.
Шорткод.
Сам блок для вывода ролика из ОК формируется простым шорткодом:
[omnivideo ok="ссылка"]Ссылка в данном случае берется просто из адресной строки браузера с открытым видео.
Его можно дополнить атрибутами, основные из них:
- Другие платформы: youtube, vk, dzen, mp4, rutube, mailru, vimeo, kinescope.
- Платформа по умолчанию: default.
- Название: title.
- Тег названия: title_tag.
- Общее изображение для блока: poster.
- Стиль: style.
Подробно каждый атрибут и передаваемые ему параметры рассмотрены в документации OmniVideo.
Блок Gutenberg.
После установки расширения в конструкторе ВордПресс появляется новый блок «OmniVideo». Добавив его в нужное место страницы, остается в сайдбаре задать параметры: путем добавления ссылок и выбора из доступных опций.
Как работать с блоком Gutenberg в Omnivideo
Рекомендую: подробный обзор расширения OmniVideo
Расширение OmniVideo постоянно развивается и дополняется новыми функциями, которые запрашивают пользователи. Все обновления для обладателей лицензии являются бесплатными навсегда.
OmniVideo со скидкой
Embed Odnoklassniki Video
В репозитории WordPress сложно найти плагины, которые работают с российской социальной сетью Одноклассники. У меня получилось обнаружить только расширение Embed Odnoklassniki Video, но я бы не рекомендовал его использовать.
Плагин является бесплатным. Он вышел более 10 лет назад, после чего практически перестал поддерживаться разработчиками. Сейчас модуль совместим только со старыми версиями WordPress.
Изначально Embed Odnoklassniki Video создавался для встраивания роликов, когда в Одноклассниках не было возможности получить iframe-код. По сути, это расширение делает тоже самое, что и представленный мною выше код для автоматического распознавания URL на ОК и замены их на iframe.
Стоит понимать, что никаких преимуществ от встраивания роликов через данный плагин, в сравнении с внедрением их напрямую кодом iframe, получить не удастся.
Итоги
В настоящее время есть всего один плагин WordPress, который позволяет встроить видео из Одноклассников на сайт действительно грамотно — это OmniVideo. Сам модуль является премиальным, но он имеет достаточно низкую цену. В нем нет никаких скрытых подписок или ограничений. Достаточно единожды его купить, чтобы навсегда забыть о сложностях с размещением роликов на сайте.
Скидка на OmniVideo
Пожалуйста, оцените материал:
