הוספת תגובות חיות לאתרי Framer

קודם כל, פתח את העורך של האתר שלך.

בדוגמה שלנו נוסיף את FastComments לעמודי הבלוג שלנו, אך כל סוג של עמוד אמור להתאים.

פתח את העורך

עכשיו, נוסיף בלוק Embed.

גש ל-Insert בפינה השמאלית העליונה:

לחץ על Insert

לאחר מכן גלול את סרגל הצד השמאלי כלפי מטה והעבר את העכבר מעל Utility.

לאחר מכן תרצה ללחוץ ולגרור את בלוק ה-Embed לסוף הבלוג שלך.

חשוב ללחוץ ולגרור כפי שמוצג, ולא סתם ללחוץ עליו. אם תקליק רק עליו, Framer יכניס אותו מחוץ לבלוג שלך ותצטרך לגרור אותו מאוחר יותר.

Locate Embed Widget

Drag and Drop Embed Widget

עכשיו יהיה לך ווידג'ט Embed ריק, וכאשר תבחר אותו תקבל סרגל צד בצד ימין. ניתן להרחיב את סרגל הצד, ותראה משהו כזה:

Open Embed Settings

עכשיו נשנה את סוג הווידג'ט ה-Embed ל-HTML:

Set as HTML Widget

עכשיו אתה מוכן לקטע הקוד של FastComments עבור Framer בשלב הבא.

סקיפט FastComments לתגובות בזמן אמת של Framer נמצא להלן.

קטע FastComments ייעודי ל‑Framer — תגובות

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 // חלק מהספקים משנים את קטע הקוד כדי שיהיה אסינכרוני

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

או, לחלופין, ניתן להשתמש בוידג'ט שיחת סטרימינג. סקיפט FastComments לשיחת סטרימינג של Framer הוא:

קטע FastComments ייעודי ל‑Framer — שיחת סטרימינג

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 // חלק מהספקים משנים את קטע הקוד כדי שיהיה אסינכרוני

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, כך שעליך לראות משהו כזה לאחר הדבקת הקוד (ייתכן שתצטרך ללחוץ על Publish):

תצוגה מקדימה של וידג'ט תגובות

כעת כשאתה צופה באתר שלך עליך לראות את אזור התגובות! בסרגל הצדדי של Framer ניתן להגדיר את הוידג'ט לרוחב מלא גם כן, אם רצוי.

שימו לב ש‑Framer מגביל את גובה הווידג'טים ואינו תומך בהתאמה אוטומטית של גובה, לכן בחרנו כאן בוידג'ט ה‑Live Chat מכיוון שהוא בעל גובה קבוע.

נוכל לשפר את מיקום הווידג'ט על ידי ביצוע שתי פעולות.

ראשית, בחלונית השמאלית, הגדר את הגובה של הווידג'ט ל-fill ול-1fr:

גובה ווידג'ט ההערות

לאחר מכן עלינו לתקן את תצורת דף ברירת המחדל של Framer. כברירת מחדל היא קובעת את גובה הדף לגודל קבוע, מה שעלול לחתוך שרשורי תגובות. לכן נגדיר גם זאת ל-fill.

הגדר את גובה הדף

ייתכן שתצטרכו לכוונן את גובה הדף עד שיתאים למה שאתם רוצים.

FastComments נועד להיות מותאם אישית כך שיתאים לאתר שלך.

אם ברצונך להוסיף עיצוב מותאם אישית, או לכוונן תצורה, עיין בתיעוד ההתאמה האישית שלנו כדי ללמוד כיצד.