Видео — один из лучших способов повысить вовлеченность пользователей. Недавно один из наших пользователей спросил нас о способе создания кнопок обмена на видео по аналогии с популярным сайтом UpWorthy. В этой статье мы покажем вам, как добавить кнопки поделиться как наложение на видео YouTube в WordPress.
Пример того, как это будет выглядеть:
Добавление кнопок Share в качестве наложения на видео YouTube
Это можно сделать несколькими способами. Большинство способов потребуют от вас вставить кусочки HTML-кода каждый раз, когда вы добавляете видео. Вместо этого мы решили создать шорткод, который будет автоматизировать этот эффект наложения.
Просто скопируйте и вставьте следующий код в плагин для конкретного сайта или в функции вашей темы.php-файл:
Этот код создает шорткод, который автоматически добавляет ссылки для публикации в twitter и Facebook (признана экстремистской организацией на территории РФ) к вашим видео. Эти кнопки видны только тогда, когда пользователь наводит курсор мыши на видео. С его помощью вы можете добавить любой другой канал социальных сетей.
Как вставить видео с YouTube в WordPress – WordPress для чайников
Чтобы использовать этот шорткод, все, что вам нужно сделать, это добавить идентификатор видео YouTube в шорткод следующим образом:
Вы можете получить идентификатор видео YouTube из строки URL. Например:
Теперь, когда вы добавляете видео, вы сможете увидеть видео с YouTube и обычные текстовые ссылки, чтобы поделиться видео на Facebook (признана экстремистской организацией на территории РФ) или Twitter. Вы заметите, что эти ссылки вообще не стилизованы.
Итак, давайте стилизуем эти ссылки для создания кнопок, чтобы они выглядели немного красивее. Мы также скроем эти кнопки и сделаем так, чтобы они появлялись только тогда, когда пользователь наведет курсор мыши на контейнер с видео. Для этого добавьте следующий CSS в таблицу стилей вашей дочерней темы.
#share-video-overlay < position: relative; right: 40px; top: -190px; list-style-type: none; display: block; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s, top .25s; -moz-transition: opacity .4s, top .25s; -o-transition: opacity .4s, top .25s; transition: opacity .4s, top .25s; z-index: 500; >#share-video-overlay:hover < opacity:1; filter:alpha(opacity=100); >.share-video-overlay li < margin: 5px 0px 5px 0px; >#Facebook (признана экстремистской организацией на территории РФ) < color: #ffffff; background-color: #3e5ea1; width: 70px; padding: 5px; >.Facebook (признана экстремистской организацией на территории РФ) a:link, .Facebook (признана экстремистской организацией на территории РФ) a:active, .Facebook (признана экстремистской организацией на территории РФ) a:visited < color:#fff; text-decoration:none; >#twitter < background-color:#00a6d4; width: 70px; padding: 5px; >.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover
Вот и все. Теперь у вас должны быть кнопки совместного доступа, наложенные на ваши видео YouTube в WordPress.
Добавление кнопок Share в качестве накладки для видеоплейлистов YouTube в WordPress
После публикации этой статьи многие наши читатели спрашивали, как можно изменить этот код, чтобы он работал как для плейлистов YouTube, так и для видео. Если вы вставляете видео с YouTube, а также плейлисты на свой сайт WordPress, то вам следует использовать этот код.
Используя приведенный выше код, вы также можете добавить плейлист с наложенными кнопками поделиться. Для отображения плейлиста вам необходимо указать id видео и id плейлиста в шорткоде следующим образом:
[wpb-yt video=»exP9N3rIfV0″ playlist=»UUhA624rCabHAmd6lpkLOw7A»]
Вы можете получить ID видео и плейлиста, посетив плейлист на YouTube и скопировав ID списка из URL, как показано ниже:
Добавление ссылки на пост WordPress в наложение кнопок Share на видео YouTube
После публикации этой статьи некоторые из наших пользователей спросили, хотели бы они, чтобы кнопки поделиться делились ссылкой на пост WordPress, а не ссылкой на видео YouTube. Для этого вам нужно заменить URL видео в кнопках share на пермалинку поста WordPress. Используйте этот код в своих функциях.php или плагин для конкретного сайта:
Не стесняйтесь изменять CSS или сниппеты шорткодов в соответствии с вашими потребностями. Для дальнейшей оптимизации видео вы можете сделать ваши видео на YouTube отзывчивыми с помощью плагина FitVids jQuery. Вы также можете отключить связанные видео, которые появляются в конце видео. или даже создать тематические изображения из миниатюр видео YouTube.
Мы надеемся, что эта статья помогла вам добавить пользовательские кнопки поделиться как наложение на видео YouTube в WordPress. Сообщите нам, какие каналы социальных сетей вы планируете добавить на свои видео, оставив комментарий ниже.
Источник: www.wpbeginner.com