الإعجابات هي أحد العناصر الأكثر شيوعا للتفاعل الاجتماعي على مواقع الويب الحديثة. إنها تسمح للمستخدمين بالتعبير عن رغبتهم في محتوى المستخدمين الآخرين أو منشوراتهم. إذا كنت ترغب في إضافة يحب إلى موقع الويب الخاص بك ، وذلك باستخدام أتش تي أم أل فمن السهل القيام به حتى للمبتدئين.
أحد خيارات إضافة الإعجابات إلى الموقع هو استخدام الزر. للقيام بذلك ، سوف تحتاج إلى علامة ورمز جافا سكريبت صغير للتعامل مع زر النقر. على سبيل المثال ، يمكنك إنشاء زر بالنص "أعجبني" وتغيير عداد الإعجابات عند النقر فوقه.
هناك خيار آخر لإضافة الإعجابات إلى موقع ما وهو استخدام رمز أو رمز يمثل إعجابا. للقيام بذلك ، يمكنك استخدام العلامة أو رمز ❤ (رمز القلب). عندما ينقر المستخدم على رمز أو رمز ، يزداد عداد الإعجابات.
لا تنس أن إضافة الإعجابات إلى موقع ويب هي مجرد طريقة واحدة لخلق التفاعل وجذب انتباه المستخدمين. من المهم أن تضع في اعتبارك أن الإعجابات يجب أن تكون بديهية وسهلة الاستخدام لزوار موقعك.
- دور الإعجابات على الموقع
- كيفية إضافة زر مثل باستخدام هتمل
- باستخدام كس لنمط زر مثل
- إنشاء عداد مثل باستخدام جافا سكريبت
- حفظ وعرض عدد الإعجابات على الموقع
- إرسال مثل البيانات إلى الخادم
- الحماية ضد التصويت المتعدد والبريد المزعج
- سؤال وجواب
- كيف يمكنني إضافة زر "أعجبني" إلى موقعي?
- ما هي علامات هتمل التي أحتاج إلى استخدامها لإنشاء زر مثل?
- ما هي سمات معرف البيانات وإجراءات البيانات, وكيف يمكنني استخدامها لزر الإعجاب?
- هل من الممكن إضافة وظيفة بحيث يعرض زر الإعجاب عدد الإعجابات?
- كيف يمكنني إضافة مثل دون تحديث الصفحة?
دور الإعجابات على الموقع
تعد الإعجابات مكونا مهما للعديد من مواقع الويب وتلعب دورا مهما في تفاعل المستخدم مع المحتوى. إنها تسمح للمستخدمين بالتعبير عن دعمهم أو رضاهم أو موافقتهم على مادة أو رسالة معينة.
تتمثل إحدى المزايا الرئيسية للإعجابات على الموقع في قدرة المستخدمين على التعبير عن آرائهم دون الحاجة إلى ترك تعليق أو كتابة رسالة مفصلة. يمكن استخدام الإعجاب كطريقة سريعة وسهلة لتأكيد الموافقة أو المحتوى الذي أعجبك.
تسمح الإعجابات أيضا لمسؤولي الموقع ومنشئي المحتوى بتلقي تعليقات من الجمهور. يمكن أن يكون عدد الإعجابات بمثابة مؤشر على شعبية مادة أو رسالة. يمكن لعدد كبير من الإعجابات جذب المزيد من الاهتمام للمحتوى وزيادة تصنيفه.
يمكن أن تساعد الإعجابات أيضا في زيادة تفاعل المستخدم. عندما يرى المستخدم أن المادة قد تلقت بالفعل الكثير من الإعجابات ، فقد يبدو أكثر إثارة للاهتمام وجاذبية بالنسبة لهم للقراءة أو العرض.
علاوة على ذلك ، يمكن استخدام الإعجابات على الموقع لإجراء الاستطلاعات والتصويت. يمكن للمستخدمين التعبير عن رأيهم أو الاختيار من خلال الإعجاب بالخيار المحدد. يمكن أن يكون أداة مفيدة لجمع البيانات وآراء الجمهور.
بشكل عام ، تعد الإعجابات على الموقع طريقة ملائمة وفعالة للمستخدمين للتعبير عن آرائهم وتسهيل التفاعل وزيادة شعبية المحتوى.
كيفية إضافة زر مثل باستخدام هتمل
إضافة زر مثل إلى موقع على شبكة الانترنت باستخدام هتمل هو عملية بسيطة إلى حد ما. وفيما يلي بعض الخطوات لمساعدتك على تحقيق ذلك:
إنشاء زر: أولا ، تحتاج إلى إنشاء عنصر ستستخدمه كزر "أعجبني". للقيام بذلك ، يمكنك استخدام العنصر أو. على سبيل المثال:
- باستخدام العنصر :
- باستخدام العنصر :
إضافة معالج أحداث: الآن تحتاج إلى إضافة وظيفة جافا سكريبت التي ستتعامل مع النقر على زر "أعجبني". مثال على وظيفة بسيطة أن مخرجات "مثل!"رسالة إلى وحدة التحكم عند النقر على زر:
وحدة التحكم.سجل ("مثل!"); - }
- باستخدام
عنصر مثل
باستخدام العنصر:
الآن لديك زر" أعجبني " يمكن إضافته إلى موقعك باستخدام هتمل. عند النقر فوقه ، سيتم استدعاء الوظيفة التي قمت بتعريفها وسيتم تنفيذ رمز أو إجراء معين.
أو
لإنشاء زر. هنا مثال باستخدام العلامة
عن طريق تحديد عنصر هتمل الصحيح ، يمكننا استخدام الفئة
مثل زر
لنمط الزر باستخدام المغلق. هنا مثال على رمز كس لإنشاء تصميم بسيط لزر مثل لدينا:
.مثل زر {
الحشو: 10 بكسل 20 بكسل;
لون الخلفية: # 007;
اللون: أبيض;
الحدود: لا شيء;
نصف قطر الحدود: 5 بكسل;
المؤشر: المؤشر;
}
.مثل زر: تحوم {
يضيف زوايا مدورة ، و
أضفنا أيضا فئة زائفة
: تحوم
، والذي يطبق الأنماط عند التمرير فوق الزر. في الكود أعلاه ، قمنا بتغيير لون خلفية الزر عند تحريك مؤشر الماوس فوقه.
يمكنك تخصيص هذه الأنماط كما يحلو لك لتتناسب بشكل أفضل مع تصميم موقعك. باستخدام كس ، يمكنك إنشاء زر يشبه المظهر الاحترافي وتحسين مظهر موقعك.
إنشاء عداد مثل باستخدام جافا سكريبت
أصبحت الإعجابات جزءا لا يتجزأ من مواقع الويب الحديثة وتسمح للمستخدمين بالتعبير عن إعجابهم أو دعمهم. سيوضح لك هذا القسم من الدليل كيفية إنشاء عداد مثل بسيط باستخدام جافا سكريبت.أولا ، دعونا إنشاء عناصر هتمل التي سوف تحتوي على زر " مثل " وعداد مثل:
مثل
عدد الإعجابات: 0
في الكود أعلاه ، نقوم بإنشاء زر " أعجبني "مع المعرف" زر الإعجاب "وفقرة تحتوي على المعرف" عدد الإعجابات " ، والتي ستعرض العدد الحالي للإعجابات.
الآن دعنا نضيف شفرة جافا سكريبت التي ستكون مسؤولة عن زيادة عداد الإعجابات عند النقر فوق الزر:
في الكود أعلاه ، نستخدم طريقة جيتليمنتبيد () للحصول على رابط إلى الزر وعناصر العداد. ثم نقوم بإنشاء متغير" العد " ، والذي سيكون مسؤولا عن تخزين العدد الحالي من الإعجابات. ثم نضيف مستمع حدث "نقرة" للزر ، والذي يزيد العداد بمقدار واحد في كل مرة يتم النقر عليه ويقوم بتحديث قيمة العداد على الصفحة.
الآن بعد أن أصبح الكود جاهزا ، في كل مرة تنقر فيها على زر "أعجبني" ، سيزداد العداد ، وسيتم عرض القيمة الجديدة على الصفحة.
حفظ وعرض عدد الإعجابات على الموقع
عندما ينقر المستخدم على زر" أعجبني " على موقعك ، يمكنك حفظ عدد الإعجابات وعرضه على الصفحة. يمكن أن يكون هذا مفيدا لتتبع شعبية المحتوى وتعليقات المستخدمين. فيما يلي بعض الطرق التي يمكنك من خلالها القيام بذلك:
1. استخدم متغيرا لتخزين عدد الإعجابات:
قم بإنشاء متغير يخزن عدد الإعجابات. عندما ينقر المستخدم على زر" أعجبني " ، يمكنك زيادة قيمة هذا المتغير بمقدار واحد.
2. استخدم قاعدة البيانات لحفظ عدد الإعجابات:
يمكنك إنشاء قاعدة بيانات أو استخدام قاعدة بيانات موجودة لحفظ عدد الإعجابات. بالنقر فوق الزر" أعجبني " ، يمكنك إضافة إدخال إلى قاعدة البيانات وزيادة القيمة في الحقل المقابل.
`, и вставить в него значение переменной или данные из базы данных.3. عرض عدد الإعجابات على الصفحة:
لعرض عدد الإعجابات على الصفحة ، يمكنك استخدام عنصر هتمل مثل " أو `
| 4. استخدم الجدول لعرض عدد الإعجابات: | إذا كنت ترغب في عرض عدد الإعجابات مع معلومات أخرى ، يمكنك استخدام جدول. إنشاء جدول مع عمودين: واحد للمحتوى ، والآخر لعدد من يحب. اطبع البيانات في خلايا الجدول. |
|---|---|
| المحتوى | عدد الإعجابات |
| عنوان المقال | 10 |
صور
5
هذه بعض الطرق التي يمكنك من خلالها حفظ وعرض عدد الإعجابات على موقعك. يمكنك اختيار الخيار المناسب لمشروعك اعتمادا على تعقيده ومتطلباته.
إرسال مثل البيانات إلى الخادم
عندما ينقر المستخدم على زر" أعجبني " ، من الضروري إرسال البيانات حول الإعجاب إلى الخادم. يمكنك استخدام تقنية أجاكس للقيام بذلك.
للبدء ، لف الزر "أعجبني" في علامة النموذج:
مثل
في هذا المثال ، سيرسل النموذج البيانات إلى الخادم على العنوان "/أعجبني" باستخدام طريقة النشر.
- الخطوة التالية هي إضافة شفرة جافا سكريبت التي سيتم تنفيذها عند إرسال النموذج. يوجد أدناه مثال على الكود:
- في هذا المثال ، نضيف معالج للحدث" إرسال "إلى نموذج مع معرف" ليكيفورم". عند تقديم النموذج ، يحدث ما يلي:
- 'الحدث.طريقة بريفنتدفولت ()` يسمى ، الذي يتجاوز السلوك القياسي للنموذج.
- يتم إنشاء كائن زملتبركست باستخدام ' جديد زملتبركست ()'.
- يتم فتح اتصال بالخادم باستخدام ' شر.فتح () ' طريقة.
- معالج الحدث ' شر.يتم تعيين أونريديستاتشانج` ، والتي سيتم استدعاؤها في كل مرة تتغير حالة زملتبركست.
يتم إنشاء كائن فورمداتا مع بيانات النموذج باستخدام ' فورمداتا جديدة (الحدث.الهدف)'.
يتم إرسال البيانات إلى الخادم باستخدام ' شر.إرسال () ' طريقة.
بعد إرسال البيانات ، يجب أن يقبل جزء الخادم من تطبيق الويب الخاص بك البيانات وتنفيذ الإجراءات اللازمة ، على سبيل المثال ، زيادة عداد الإعجابات للعنصر المقابل.
الحماية ضد التصويت المتعدد والبريد المزعج
يمكن أن تؤدي إضافة وظيفة الإعجابات إلى الموقع إلى فتح الباب أمام المشكلات المحتملة المتعلقة بالتصويت المتعدد أو البريد العشوائي. لمكافحة هذه المشاكل ، ينبغي اتخاذ بعض الاحتياطات.
1. طلب تأكيد
للحد من التصويت المتعدد ، يمكنك إضافة نموذج طلب تأكيد. سيطلب من المستخدمين إدخال معلومات إضافية ، على سبيل المثال ، على كلمة التحقق أو من خلال كلمة السر.
2. تحديد وقت التصويت
يمكن أن يساعد تحديد وقت التصويت في منع التصويت المتعدد أو البريد العشوائي. على سبيل المثال ، يمكنك قصر التصويت على حساب واحد لفترة زمنية معينة أو تحديد الوقت الذي يسمح فيه بالتصويت.
3. الحد من عدد الأصوات
هناك طريقة أخرى لمكافحة التصويت المتعدد والبريد العشوائي وهي الحد من عدد الأصوات التي يمكن تركها في فترة زمنية معينة. على سبيل المثال ، يمكنك تعيين حد صوت واحد في الساعة.
4. تتبع نشاط المستخدم
يمكنك مراقبة نشاط المستخدم على موقع الويب لتحديد السلوك المشبوه الذي قد يشير إلى تصويت متعدد أو بريد عشوائي. على سبيل المثال ، إذا تركت عدة أصوات من نفس عنوان إب أو من نفس الجهاز في فترة قصيرة من الزمن ، وهذا قد يكون علامة على النشاط غير المرغوب فيه.
5. الاعتدال في الأصوات
يتيح لك تنفيذ الإشراف الصوتي التحقق من كل تصويت فردي قبل أخذه في الاعتبار. قد تكون هذه عملية تستغرق وقتا طويلا ، ولكنها ستساعد في منع التصويت المتعدد والبريد العشوائي.
6. باستخدام كلمة التحقق
تعد إضافة كلمة التحقق طريقة أخرى لمكافحة التصويت المتعدد والبريد العشوائي. تتطلب كلمة التحقق من المستخدمين إجراء اختبار أو حل مشكلة لتأكيد طبيعتهم البشرية قبل أن يتمكنوا من ترك صوت.
يمكن أن تساعدك هذه الاحتياطات في توفير حماية أفضل ضد التصويت المتعدد والبريد العشوائي على موقع الويب الخاص بك مع الإعجابات. يمكن أن يكون استخدامها معا طريقة فعالة لإنشاء نظام تصويت صادق وموثوق على موقعك.
سؤال وجواب
كيف يمكنني إضافة زر "أعجبني" إلى موقعي?
هناك عدة طرق لإضافة زر أعجبني إلى موقعك. واحدة من أسهل الطرق هي استخدام هتمل و كس لإنشاء زر مثل ، ثم إضافة جافا سكريبت لإضافة وظائف لحساب عدد من يحب وعرضها.
العلامات التي أتش تي أم أل يجب أن تستخدم لإنشاء زر مثل?
لإنشاء زر مثل في هتمل ، وعادة ما تستخدم علامة. يتيح لك ذلك إنشاء زر قابل للنقر يمكن للمستخدم النقر فوقه.
ما هي سمات معرف البيانات وإجراءات البيانات, وكيف يمكنني استخدامها لزر الإعجاب?
سمات معرف البيانات وبيانات العمل هي سمات هتمل الخاصة التي يمكن استخدامها لتحديد معرف عنصر وتنفيذ إجراء معين عند النقر على زر "مثل". على سبيل المثال ، يمكنك استخدام معرف البيانات لتحديد عنصر معين ، وإجراء البيانات لتحديد الإجراء الذي سيتم تنفيذه عند النقر فوق الزر.
هل من الممكن إضافة وظيفة بحيث يعرض الزر" أعجبني " عدد الإعجابات?
نعم ، يمكنك إضافة وظائف بحيث يعرض الزر" أعجبني " عدد الإعجابات. للقيام بذلك ، تحتاج إلى استخدام جافا سكريبت ، والتي ستحسب عدد الإعجابات وتعرضها على الزر أو بجانبه.