Add Live Commenting to Framer Sites

Öncelikle, siteniz için editörü açın.

Örneğimizde FastComments'i Blog sayfalarımıza ekleyeceğiz, ancak herhangi bir sayfa türünde de çalışmalıdır.

Editörü Aç

Şimdi, bir Embed bloğu ekleyelim.

Sol üstten Inserte gidin:

Insert'e Tıklayın

Sonra sol taraftaki kenar çubuğunu aşağı kaydırın ve Utility üzerine gelin.

Sonra blogunuzun sonuna Embed bloğunu tıklayıp sürükleyin.

Önemli olan, gösterildiği gibi tıklayıp sürüklemeniz ve sadece tıklamamanızdır. Eğer sadece tıklarsanız Framer onu blogunuzun dışına ekler ve daha sonra yerini değiştirmeniz gerekir.

Embed Bileşenini Bulun

Embed Bileşenini Sürükleyip Bırakın

Şimdi boş bir Embed bileşeniniz olacak ve onu seçtiğinizde sağ tarafta bir kenar çubuğu görünecek. Kenar çubuğunu genişletebilirsiniz ve şöyle bir şey göreceksiniz:

Embed Ayarlarını Açın

Şimdi Embed bileşen türünü HTML olarak değiştirelim:

HTML Widget olarak ayarlayın

Şimdi bir sonraki adımda FastComments Framer kod parçacığı için hazırsınız.

Aşağıda Framer için FastComments Canlı Yorumlar kod parçacığı bulunmaktadır.

FastComments Framer Özel Yorum Parçacığı

Copy

1

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

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // bazı sağlayıcılar kod parçasını async yapıyor

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Veya alternatif olarak Streaming Chat widget'ını kullanabilirsiniz. Framer Streaming Chat için FastComments kod parçacığı şudur:

FastComments Framer Özel Canlı Sohbet Parçacığı

Copy

1

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

3<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // bazı sağlayıcılar kod parçasını async yapıyor

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

FastComments, Framer editörünü destekler; bu yüzden kodu yapıştırdıktan sonra şöyle bir şey görmelisiniz (muhtemelen Publish'e tıklamanız gerekir):

Yorum Widget Önizlemesi

Artık sitenizi görüntülediğinizde yorum alanını görmelisiniz! İsterseniz Framer'ın kenar çubuğunda widget'ı tam genişlik olarak ayarlayabilirsiniz.

Framer'ın widget'ların yüksekliğini sınırladığını ve otomatik yeniden boyutlandırmayı desteklemediğini unutmayın; bu yüzden burada sabit yüksekliğe sahip olduğundan Live Chat widget'ını seçtik.

Widget'in yerleşimini iki şekilde iyileştirebiliriz.

Öncelikle, sol panelde, widget'in yüksekliğini fill ve 1fr olarak ayarlayın:

Yorum Widget'ı Yüksekliği

Sonra varsayılan Framer sayfa yapılandırmasını düzeltmemiz gerekiyor. Varsayılan olarak sayfa yüksekliğini sabit bir boyuta ayarlar, bu da yorum dizilerini kesebilir. Bu yüzden bunu fill olarak ayarlayalım.

Sayfa Yüksekliğini Ayarla

İstediğiniz gibi olması için sayfa yüksekliğiyle oynamanız gerekebilir.

FastComments, sitenize uyacak şekilde özelleştirilebilir.

Özel stil eklemek veya yapılandırmayı değiştirmek isterseniz, nasıl yapacağınızı öğrenmek için Özelleştirme Belgelerimize göz atın.