Уиджетът Page Reacts показва персонализируем набор от икони за реакции на уиджета за коментари.

Потребителите могат да кликнат върху изображенията, за да реагират, и уиджетът запомня реакциите, които са избрали за всяка страница. Ако са влезли в fastcomments.com, това се свързва с техния акаунт.

Ако кликнете Run на примера по-долу, можете да го видите в действие.

За реакциите на страницата трябва да решим две неща:

• Кои изображения за реакциите да използваме.
• Кратък id, за да именуваме всяка реакция.

По избор:

• Можете също да зададете по избор отделни изображения за избрани/неизбрани реакции.
• Можете да решите дали да показвате списъка с потребители, които са реагирали, когато преместите мишката върху една от реакциите.

Примерен код за реакции на страницата

Copy Run

1

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

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

4<script>

5 window.FastCommentsUI(document.getElementById('page-reacts-example'), {

6 tenantId: 'demo',

7 pageReactConfig: {

8 showUsers: true,

9 reacts: [

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

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

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

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

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

15 ]

16 }

17 });

18</script>

19

Конфигурацията за фронтенд библиотеките като 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 - Променете това, за да зададете идентификатор на страница/статия. По подразбиране това е 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

Можем също да предаваме 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 // предайте sso обект

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