Реакції сторінки

Віджет Page Reacts відображає настроюваний набір іконок реакцій у віджеті коментарів.

Користувачі можуть натискати на зображення, щоб відреагувати, і він запам'ятовує реакції, які вони вибрали для кожної сторінки. Якщо вони увійшли в fastcomments.com, це пов'язано з їхнім обліковим записом.

Якщо ви натиснете Run на прикладі нижче, ви зможете побачити це в дії.

Для Page Reacts нам потрібно вирішити дві речі:

• Які зображення реакцій використовувати.
• Короткий id для іменування кожної реакції.

Опційно:

• Ви також можете визначити окремі необов'язкові зображення для вибраних/невибраних реакцій.
• Ви можете вирішити, чи показувати список користувачів, які відреагували, при наведенні курсора миші на одну з реакцій.

Приклад коду Page Reacts

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="page-reacts-example"></div>

4<script>

5 window.fcConfigs = [{

6 target: '#page-reacts-example',

7 tenantId: 'demo',

8 pageReactConfig: {

9 showUsers: true,

10 reacts: [

11 {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},

12 {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},

13 {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},

14 {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },

15 {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },

16 ]

17 }

18 }];

19</script>

20

Налаштування для фронтенд-бібліотек React, Angular та ін. однакове.

Плаваючий віджет лайків відображає плаваюче вікно в правому нижньому куті екрану з кількістю лайків та коментарів. Ви можете побачити його в дії на цій сторінці!

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

Воно також автоматично визначає налаштування темного режиму браузера користувача і, за бажанням, змінює свій вигляд на темну версію.

Встановлення дуже просте:

Приклад коду плаваючих лайків

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo'

7 });

8</script>

9

Сигнатура типу конструктора:

Конфігурація

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Change this to set page/article id. By default, it is the page URL.

8 * @property {() => void} [onOpenComments]

9 * @property {object} [sso]

10 * @constructor

11 */

12

Він підтримує SSO, щоб прив'язати реакції до облікового запису користувача для автентифікації.

Наразі підтримується лише VanillaJS. Якщо ви хочете, щоб цей віджет було додано до однієї з наших клієнтських бібліотек, повідомте нам!

Асинхронна версія

Приклад асинхронного коду плаваючих лайків

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js?v=2" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

9 tenantId: 'demo'

10 });

11 } else {

12 setTimeout(tryLoad, 50);

13 }

14 }

15

16 tryLoad();

17 })();

18</script>

19

З SSO

Ми також можемо передавати payload-и Secure SSO або Simple SSO:

Приклад коду плаваючих лайків з Secure SSO

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 sso // pass sso object

8 });

9</script>

10

Приклад коду плаваючих лайків з Simple SSO

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 simpleSSO: {

8 id: 'some-user-id',

9 username: 'some username',

10 email: 'some@email.com',

11 }

12 });

13</script>

14

Для WordPress цю функцію можна увімкнути, встановивши плагін, наприклад WPCode, і додавши до футера блогу наступний HTML-фрагмент:

Код плаваючих лайків для WordPress

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 const articles = document.getElementsByTagName('article');

9 if (!articles.length) {

10 return console.warn('Article not found to show fastcomments likes.');

11 }

12 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

13 tenantId: '-VuPDR12d-v_',

14 urlId: articles[0].id.replace('post-', '')

15 });

16 } else {

17 setTimeout(tryLoad, 50);

18 }

19 }

20

21 tryLoad();

22 })();

23</script>

24