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 üstteki Insert'e gidin:

Insert'e Tıklayın

Sonra sol taraftaki kenar çubuğunu aşağı kaydırın ve Utility'nin üzerine fareyi getirin.

Sonraki adımda Utility bloğunu blogunuzun sonuna tıklayıp sürükleyin.

Önemli olan bunu gösterildiği gibi tıklayıp sürüklemeniz ve sadece tıklamamanızdır. Yalnızca tıklarsanız Framer bunu blogunuzun dışına ekler ve daha sonra sürüklemek zorunda kalırsınız.

Embed Widget'ini Bulun

Embed Widget'ini Sürükleyip Bırakın

Şimdi boş bir Embed widget'ına sahip olacaksınız ve onu seçtiğinizde sağda bir kenar çubuğu açılacak. Kenar çubuğunu genişletebilirsiniz ve şöyle bir şey göreceksiniz:

Embed Ayarlarını Açın

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

HTML Widget Olarak Ayarla

Şimdi bir sonraki adımda FastComments Framer kod parçacığına 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.