Как задать любой фон, шрифт или полностью свой дизайн в голосованиях «лайками» в Facebook


facebook

Автор статьи Алексей Слабухин: специалист в области СММ, маркетинга и пиара в компании HellRaisers CS:GO (Австрия).

Инструкция по кастомизации VideoReact

Смотрите видеоурок по кастомизации:

Хотел бы с вами поделиться, как полностью кастомизировать трансляцию (то есть настроить дизайн) в Facebook с помощью сервиса VideoReact.com

Для этого будет использоваться такая опция настроек как CSS в программе OBS Studio, а так же эффект «Хромакей» (в народе — «Зеленый Фон» или же «Зеленка», который используется для съемки видео).

Этот способ кастомизации актуален для шаблонов «2 картинки» и «4 картинки».

Если используется голосование на 2 «лайка»:

1. Загружаем в сервис videoreact.com наши 2 картинки в формате .PNG, то есть с прозрачным фоном (пример такой картинки показан ниже):

cs16

Получается следующее:

okno-1

2. Далее, чтобы кастомизировать нашу трансляцию с использовать эффекта «хромакей», нам нужно выставить его цвет. В поле «Задайте фон при желании» пишем «#48ff00». В итоге получаем следующее:

okno-2

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

okno-3

Далее нажимаем «Сохранить».

Если используется голосование на «4 лайка»:

1. Все 4 картинки должны быть квадратными, поэтому для их редактирования используйте сервис canva.com (или любой графический редактор). Заходим на сайт canva.com, выбираем размер 384х384

canva-1

Через левое меню «Upload» загружаем 1-ую картинку (тоже в формате .PNG с прозрачным фоном)

canva-2

и выбираем меню «Background», задаем значение фона «хромакея»: #48ff00

canva-3

Следите, чтобы каждая из 4 картинок имела схожие пропорции, иначе будет некрасиво. После изменяем его размеры чтобы пропорции сохранялись приблизительно как на примере ниже.

Скачивайте картинку с фоном, нажав кнопку «Download» вверху.

Повторите эти действия для каждой из оставшихся картинок.

В сервисе videorect.com загружаем все 4 картинки, добавляем текст поста и нажимаем «Сохранить».

okno-4

Заходим с программу OBS Studio, вставляем «Ключ потока» в Настройках и «Ссылку на просмотр» в свойствах BrowserSource. Вы сможете увидеть, правильно ли сделали пропорции каждой из 4 картинок. Если они не правильны – вы всегда можете изменить пропорции на Сanva.com и повторно загрузить картинки на videoreact.com.

Подготовка CSS-кода.

1. Там же в свойствах BrowserSource в поле «CSS» добавляем код представленный ниже (он сделан для обоих вариантов трансляции, поэтому очень большой):


body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
color: #fff;
font-family: ‘Open Sans’,sans-serif;

}
.vibor {
height: 255px;
background-color: #48ff00;
margin-top: 20px;
}
.meta.likes {
background-color: #48ff00;
text-indent:3em;
text-align: justify;
}
.meta.shock {
background-color: #48ff00;
text-indent:3em;
text-align: justify;
}
.meta.happy {
background-color: #48ff00;
text-indent:3em;
text-align: justify;
}
.meta.fml {
background-color: #48ff00;
text-indent:3em;
text-align: justify;
}
.zagolov {
font-size: 0px;
margin-top: 600px;
}
.text-c {
margin-top: 0px;
}
/***ОТСТУП СВЕРХУ ЛЕВОЙ КАРТИНКИ***/
.img_left {
margin-top: 70px;
}
/***ОТСТУП СВЕРХУ ПРАВОЙ КАРТИНКИ***/
.img_right {
margin-top: 70px;
}
.pictureBlockTwo {
margin-top: -300px;
}
.text-l {
font-size: 0px;
}
.text-r {
font-size: 0px;
}
.number {
font-size: 52px;
}

Разберем далее значения CSS-кода, которые можно менять, чтобы кастомизировать расположение, размеры шрифта и прочее:

Если используется голосование на 2 лайка:

margin-top: 0px; — отступ картинки сверху
font-size: 52px; — размер шрифта

Пример:

primer1

Если используется голосование на 4 лайка:

text-indent:3em; — смещение счетчика голосований влево или вправо
text-align: justify; выравнивание счетчика по всей ширине, по левому краю (text-align: left;), по центру (text-align: center;) или правому краю (text-align: right;).

Пример:

primer2

Сохраните, нажав «ОК».

2. Далее нам нужно в BrowserSource добавить фильтр «Хромакей». В «Источники» правой кнопкой мыши кликаем на BrowserSource и выбираем «Фильтры»

obs-2-kopiya

3. После появится новое окно. В нем внизу слева нажимаем «+» и выбираем «Хромакей»

obs-chromakey

4. Получаем следующее:

obs-chromakey-2

5. Далее нам нужно добавить текст и фон в трансляцию. Чтобы добавить фон, в «источники» выбираем «изображение»:

obs-4

Чтобы переместить фон на второй план, нажмите иконку «стрелка вниз»

obs-5

Чтобы добавить текст, сделайте аналогичные действия.

6. В итоге получаем следующее:

obs-final

Всё готово! Осталось нажать кнопку «Запустить трансляцию».

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

БОНУС

Также мы для своих клиентов используем голосования для розыгрыша призов (или скидок) в прямом эфире, дабы пользователи дольше оставались смотреть трансляцию и не уходили. Это в свою очередь повысит вовлеченность и охват.

Пример:

primer3

Примеры трансляции компании, где я являюсь PR&SMM менеджером:

https://www.facebook.com/hrcsgo/videos/1000071106787336/
https://www.facebook.com/hrcsgo/videos/1006932842767829/

Спасибо Андрею за возможность опубликовать статью на его блоге.

Готов ответить на все ваши вопросы https://www.facebook.com/oleksii.slabukhin

Автор статьи Алексей Слабухин: специалист в области СММ, маркетинга и пиара в компании HellRaisers CS:GO (Австрия).

Поделитесь с друзьями

Комментарии Facebook: