Add Comments to Wix Sites

בדוגמה זו, נוסיף את FastComments Live Commenting לעמודי פוסטים בבלוג.

לשם כך, נפתח את האתר שלנו בעורך של Wix.

לאחר מכן, נוודא שאנו עורכים את הדף הנכון.

ברצוננו לוודא שנציג שרשור תגובות ייחודי עבור כל פוסט בבלוג, לכן נערוך את Blog Pages -> Post.

שלב ראשון: עריכת דף הפוסט הדינמי

לאחר מכן, נעבור אל Add -> Embed Code -> Embed HTML.

שלב שני: הוספת בלוק Embed HTML

This will give us a sad looking box to start with:

הבלוק ההתחלתי

דוגמה זו משתמשת בקוד מותאם כדי להיות תואמת ל-Wix. לא תוכלו להשתמש בקטעי הקוד של FastComments מההדרכות האחרות.

Open the form to add our custom HTML dialog by clicking Enter Code and selecting HTML:

שלב 3: פתח חלונית HTML

Copy the following HTML snippet and paste it into the dialog, and click Update:

קטע קוד לתגובות Wix

Copy

1

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

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

שלב 3: הדבק ושמור

You should now see a very tiny version of the comment widget:

שלב 3: התוצאה

Next we will position and size this to fit our page.

עכשיו, לאחר שהוספנו את ווידג'ט ההערות, בואו נסדר אותו בעמוד שלנו.

שלב 4: שינוי גודל

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

Next, let's set things up so that the comment thread changes based on the current page, allowing users to discuss the currently displayed content.

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

Without the following steps, you will only have one global comment thread for your entire site - which is not very useful.

ללא השלבים הבאים, יהיה לכם שרשור הערות גלובלי אחד לכל האתר — וזה לא מאוד שימושי.

מצב פיתוח

To add this functionality, we'll have to go into what Wix calls Dev Mode.

כדי להוסיף פונקציונליות זו, נצטרך להיכנס למה ש-Wix קוראת Dev Mode.

Click the Dev Mode option at the top of the screen.

לחצו על האפשרות Dev Mode בחלק העליון של המסך.

הפעלת מצב פיתוח

הגדר את מזהה האלמנט

We're going to add custom code to accomplish this, but first we need to give the new embed element an ID to refer to it by.

נוסיף קוד מותאם כדי לבצע זאת, אבל קודם עלינו לתת לרכיב ההטמעה החדש מזהה שנוכל להתייחס אליו.

Let's call it fastcomments.

נקרא לו fastcomments.

Click the new embed element we added, and in dev mode in the bottom right you should see an ID field with a value like html1:

לחצו על רכיב ההטמעה החדש שהוספנו, ובמצב הפיתוח בפינה הימנית התחתונה אמור להופיע שדה ID עם ערך כמו html1:

שדה ה-ID

Change this to fastcomments and hit enter:

שנו זאת ל-fastcomments ולחצו Enter:

הגדר את ה-ID

Now we can add our custom code that tells the comment area what page we are viewing.

כעת נוכל להוסיף את הקוד המותאם שלנו שמודיע לאזור ההערות איזה דף מוצג כעת.

At the bottom of the screen you should see a code editor like this:

בתחתית המסך אמור להופיע עורך קוד כזה:

פתח את העורך

Copy the following code and paste it in there:

העתיקו את הקוד הבא והדביקו אותו שם:

קטע ניווט לתגובות של Wix

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

הוסף את קוד הניווט

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

אם יש לכם בעיות, הודיעו לנו בתיבת התגובות למטה.

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

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