पेज रिएक्ट्स

Page Reacts विजेट कमेंट विजेट पर अनुकूलन योग्य रिएक्शन आइकन का एक सेट प्रदर्शित करता है।

उपयोगकर्ता प्रतिक्रिया देने के लिए चित्रों पर क्लिक कर सकते हैं, और यह प्रति-पेज उनकी चुनी हुई प्रतिक्रियाओं को याद रखता है। यदि वे fastcomments.com में लॉग इन हैं, तो यह उनके खाते से जुड़ा होता है।

यदि आप नीचे दिए गए उदाहरण पर Run पर क्लिक करते हैं, तो आप इसे क्रिया में देख सकते हैं।

पेज रिएक्ट्स (Page Reacts) के लिए हमें दो चीज़ों पर निर्णय लेना होता है:

• कौन सी रिएक्शन इमेज का उपयोग करना है।
• प्रत्येक रिएक्शन को नाम देने के लिए एक छोटा id।

वैकल्पिक रूप से:

• आप चयनित/अचयनित रिएक्ट्स के लिए अलग वैकल्पिक इमेज भी परिभाषित कर सकते हैं।
• आप तय कर सकते हैं कि किसी रिएक्शन पर माउस घुमाने पर उसे रिएक्ट करने वाले उपयोगकर्ताओं की सूची दिखानी है या नहीं।

पेज रिएक्ट्स कोड उदाहरण

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 में लॉग इन हैं, तो यह उनके खाते से जुड़ जाता है ताकि लोग किसी पेज को कई बार लाइक न कर सकें।

यह उपयोगकर्ता के ब्राउज़र की डार्क मोड प्राथमिकताओं का स्वतः पता लगाता है और आवश्यकता होने पर अपनी स्किन को डार्क संस्करण में बदल देता है।

इंस्टॉलेशन सरल है:

Floating Likes कोड उदाहरण

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 सपोर्टेड है। यदि आप चाहते हैं कि यह विजेट हमारी किसी क्लाइंट लाइब्रेरी में जोड़ा जाए, तो हमें बताएं!

Async वर्शन

Floating Likes कोड Async उदाहरण

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 पेलोड भी पास कर सकते हैं:

Floating Likes 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

Floating Likes 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