Page Reacts widget'ı, yorum widget'ında özelleştirilebilir bir dizi tepki simgesi gösterir.

Kullanıcılar tepkide bulunmak için resimlere tıklayabilir ve sayfa başına seçtikleri tepkileri hatırlar. Eğer fastcomments.com'a giriş yapmışlarsa, bu onların hesabına bağlanır.

Aşağıdaki örnekte Run'a tıklarsanız, bunu çalışırken görebilirsiniz.

Sayfa Reaksiyonları için iki şeye karar vermeliyiz:

• Hangi reaksiyon görsellerinin kullanılacağı.
• Her reaksiyonu adlandırmak için kısa bir id.

İsteğe bağlı olarak:

• Seçili/seçili olmayan reaksiyonlar için isteğe bağlı ayrı görseller tanımlayabilirsiniz.
• Bir reaksiyonun üzerine fareyle gelindiğinde, reaksiyon yapan kullanıcıların listesini gösterip göstermemeye karar verebilirsiniz.

Sayfa Reaksiyonları Kod Örneği

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 ve benzeri ön yüz (frontend) kütüphaneleri için yapılandırma aynıdır.

Kayan beğeni bileşeni, ekranın sağ alt köşesinde beğeni ve yorum sayılarını gösteren bir kutu görüntüler. Bu sayfada çalışırken görebilirsiniz!

Kullanıcılar sayfayı beğenmek için kalbe tıklayabilir ve hangi sayfaları beğendiklerini hatırlar. Eğer fastcomments.com'da oturum açmışlarsa, bu onların hesabına bağlıdır ve insanların bir sayfayı birden fazla kez beğenmesini engellemeye yardımcı olur.

Ayrıca kullanıcının tarayıcı karanlık mod tercihlerini otomatik olarak algılar ve istenirse görünümünü koyu bir sürüme değiştirir.

Kurulum basittir:

Yüzen Beğeniler Kod Örneği

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

Yapıcının (constructor) tür imzası:

Yapılandırma

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Sayfa/makale kimliğini ayarlamak için bunu değiştirin. Varsayılan olarak sayfa URL'sidir.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Tepkileri kullanıcının hesabına kimlik doğrulama için bağlamak üzere sso'yu destekler.

Şu anda yalnızca VanillaJS desteklenmektedir. Bu widget'ın istemci kütüphanelerimizden birine eklenmesini isterseniz, bize bildirin!

Asenkron Sürüm

Yüzen Beğeniler Asenkron Kod Örneği

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 ile

Ayrıca Secure SSO veya Simple SSO yükleri de iletebiliriz:

Yüzen Beğeniler Güvenli SSO Kod Örneği

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 nesnesini gönderin

8 });

9</script>

10

Yüzen Beğeniler Basit SSO Kod Örneği

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 için bu özellik, WPCode gibi bir eklenti yükleyip aşağıdaki HTML kod parçasını blog altbilgisine ekleyerek etkinleştirilebilir:

WordPress için Yüzen Beğeniler Kodu

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