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

свій

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

Інструкція з кастомізації VideoReact

Хотів би з вами поділитися, як повністю кастомізувати трансляцію (тобто налаштувати дизайн) у Facebook за допомогою VideoReact.com

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

Якщо використовується голосування на 2 «лайки»:

1. Завантажуємо в сервіс videoreact.com наші 2 картинки у форматі .PNG, тобто з прозорим фоном (приклад такої картинки показано нижче):

будь-який

повністю

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

повністю

3. У полі, де задаються заголовки кожної картинки, ставимо будь-які значення, оскільки пізніше вони будуть приховані за допомогою CSS-коду, і ви зможете додати свій текст (про це далі в інструкції). Внизу додаємо опис посту. Отримуємо таке:

свій

Далі натискаємо "Зберегти".

Якщо використовується голосування на «4 лайки»:

шрифт

Через ліве меню "Upload" завантажуємо 1-у картинку (теж у форматі .PNG з прозорим фоном)

будь-який

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

свій

Слідкуйте, щоб кожна з чотирьох картинок мала схожі пропорції, інакше буде негарно. Після цього змінюємо його розміри, щоб пропорції зберігалися приблизно як на прикладі нижче.

Завантажуйте картинку з фоном, натиснувши кнопку "Download" вгорі.

Повторіть ці дії для кожної з картинок, що залишилися.

У сервісі videorect.com завантажуємовсі 4 картинки, додаємо текст посту та натискаємо «Зберегти».

будь-який

Підготовка 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; - розмір шрифту

свій

Якщо використовується голосування на 4 лайки:

text-indent:3em; - Зміщення лічильника голосувань вліво або вправо text-align: justify; вирівнювання лічильника поусієї ширини, по лівому краю (text-align: left;), по центру (text-align: center;) або правому краю (text-align: right;).

повністю

Збережіть, натиснувши "ОК".

2. Далі нам потрібно до BrowserSource додати фільтр «Хромакей». У «Джерела» правою кнопкою миші клацаємо на BrowserSource і вибираємо «Фільтри»

повністю

3. Після з'явиться нове вікно. У ньому внизу зліва натискаємо «+» і вибираємо «Хромакей»

будь-який

4. Отримуємо таке:

повністю

5. Далі нам потрібно додати текст та фон у трансляцію. Щоб додати фон, у «джерела» вибираємо «зображення»:

задати

Щоб перемістити фон на другий план, натисніть стрілку вниз

свій

Щоб додати текст, зробіть подібні дії.

6. У результаті отримуємо наступне:

будь-який

Все готове! Залишилося натиснути кнопку «Запустити трансляцію».

Також ми для своїх клієнтів використовуємо голосування для розіграшу призів (або знижок) у прямому ефірі, щоб користувачі довше залишалися дивитися трансляцію та не йшли. Це своє чергу підвищить залученість і охоплення.

свій

Приклади трансляції компанії, де я є PR & SMM менеджером:

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