Как наложить социальные кнопки на видео YouTube в WordPress

Видеоролики являются одним из лучших способов чтобы увеличить взаимодействие с пользователем. Один из читателей недавно интересовался, возможно ли наложить кнопки «Поделиться в социальных сетях» на видео, как это сделано на сайте UpWorthy. В этой статье мы покажем вам как наложить оверлеем социальные кнопки на видео YouTube в WordPress.

Пример того, как это будет выглядеть в итоге:

Как наложить социальные кнопки на видео YouTube в WordPress

Накладываем социальные кнопки на видео YouTube в WordPress

Существует несколько способов реализации задуманного. Большинство из них предполагают вставку небольшого HTML кода каждый раз, когда вы добавляете новое видео. Вместо этого мы решили создать шорткод, который автоматизирует наложение оверлея.

Просто скопируйте и вставьте следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

Вышеприведенный код создает шорткод, который автоматически добавляет кнопки twitter и facebook к вашим видео. Эти кнопки видны только тогда, когда пользователь наводит курсор мыши на видео. Вы можете самостоятельно добавлять другие социальные сети по такому же принципу.

Для того, чтобы использовать этот шорткод, вам нужно всего лишь добавить ID видео с YouTube в шорткод вот таким образом:

Получить сам ID видео с YouTube можно из ссылки. Вот так:

Как наложить социальные кнопки на видео YouTube в WordPress

Теперь, когда вы добавили видео, вы увидите на ролике простой текст со ссылками для того, чтобы поделиться видео в Facebook или Twitter. Вы наверняка заметили, что эти ссылки никак не стилизированы.

Давайте это исправим, создав симпатичные кнопки, чтобы выглядело всё это чуточку приятнее. Также мы сделаем так, чтобы эти кнопки скрывались по-умолчанию, и выводились только при наведении курсора мыши на видео контейнер. Для этого добавьте следующий код CSS в таблицу стилей вашей текущей темы (обычно это файл style.css в корне папки с темой):

Вот и все. Теперь у вас есть кнопки социальных сетей, наложенные на видео с YouTube в вашем WordPress.

Не стесняйтесь править код CSS или сниппет шорткода для более точного соответствия вашим задачам и внешнему виду сайта.

Надеемся, что эта статья помогла вам наложить кнопки «Поделиться в социальных сетях» на видео YouTube в WordPress. Какие еще социальные сети вы добавите себе на видео? Пишите в комментариях ниже.

Источник

Written by: