مولّد أزرار المشاركة
أيقونات التواصل الاجتماعي والكود
اصنع أزرار مشاركة بأيقونات التواصل الاجتماعي لموقعك في أقل من دقيقة. أولًا اختر الشبكات والشكل وألوانك، ثم اضبط التخطيط. بعد ذلك انسخ HTML + CSS نظيفًا، أو HTML خالصًا بأنماط مضمّنة. لا يوجد سكربت من طرف ثالث ولا ملفات تعريف ارتباط ولا تسجيل.
- مجانيالسعر
- 32 SVGالأيقونات
- HTML + CSS أو HTML خالصالكود
- لا يوجدالتتبع
مولّد أزرار المشاركة
اختر الشبكات والشكل والألوان، ثم انسخ الـ HTML
تظهر الأزرار بالترتيب الذي تحدده.
ليس لدى Instagram وYouTube وTikTok والبقية الرمادية رابط مشاركة. انتقل إلى «تربط بحساباتي» لاستخدامها.
ألصق العنوان الكامل لكل حساب. والزر الذي بلا عنوان يشير إلى # حتى تضيف عنوانًا.
- الأزرار
- 0
- حجم الكود
- 0
- السكربتات
- 0
المعاينة والكود يتغيران مع كل إعداد. انسخ الكود عندما يعجبك.
ماذا تصنع أداة أيقونات التواصل الاجتماعي هذه
أزرار المشاركة هي الأيقونات الصغيرة التي تتيح للقرّاء تمرير صفحتك إلى غيرهم. نقرة واحدة تفتح Facebook أو X أو WhatsApp أو البريد، ورابطك مكتوب مسبقًا. وبهذا يمكن لكل قارئ أن يصبح أول رابط إلى موقعك لشخص جديد.
هذه الأداة تبني تلك الأزرار لك. أولًا، حدّد الشبكات التي تريدها من 32 أيقونة SVG. ثم اختر شكلًا، من المربع إلى الدائرة، ومدى نعومة الزوايا. بعد ذلك اختر ألوان العلامة التجارية، أو خلفيتك ولون أيقونتك.
بعدها تضبط التخطيط. يمكن أن تكون الأزرار جنبًا إلى جنب، أو فوق بعضها، أو في شبكة، أو عائمة على حافة الشاشة. أخيرًا تنسخ الكود. نسخة HTML + CSS تحفظ النمط في كتلة صغيرة، بينما يضع HTML الخالص كل نمط على الوسم نفسه.
الأزرار روابط بسيطة إلى صفحة المشاركة لكل شبكة. لذلك لا يوجد عنصر جاهز، ولا سكربت تتبع، ولا شيء يبطئ الصفحة. كما يحصل كل رابط على aria-label واضح، فيسمع مستخدمو قارئ الشاشة «شارك على Facebook» بدل لا شيء.
ما الذي يحتويه زر المشاركة
كل زر رابط من ثلاثة أجزاء. أولًا، العنوان هو صفحة المشاركة في الشبكة مع رابطك وعنوانك. ثم الأيقونة، وهي SVG مضمّن، لذلك تبقى حادة بأي حجم ولا تحتاج إلى ملف إضافي.
الجزء الثالث هو التسمية. وهي إما نص ظاهر مثل «Facebook»، أو aria-label مخفي. وبفضلها يبقى الزر مفهومًا لمن لا يرى الأيقونة.
أيقونات التواصل الاجتماعي بصيغة SVG، جاهزة لتنسيقك
ترسم الأداة كل أيقونات التواصل الاجتماعي الـ 32 بصيغة SVG. بمعنى آخر، كل أيقونة مسار واحد، يُملأ باللون الذي تختاره. لذلك تبدو الأيقونة البيضاء على لون العلامة التجارية والداكنة على لون خفيف حادتين.
كل تغيير يظهر فورًا في المعاينة الحية. كما يمكنك عرض المعاينة على خلفية بيضاء أو رمادية فاتحة أو داكنة. بهذه الطريقة تعرف كيف ستبدو الأزرار على صفحتك الحقيقية.
HTML لأيقونات التواصل الاجتماعي: نوعان من الكود
اختر HTML + CSS لموقع أو قالب. عندها تحصل على كتلة نمط واحدة وأسماء فئات قصيرة، كما تعمل تأثيرات مرور المؤشر.
لكن اختر HTML الخالص لمنشئي الصفحات أو Markdown أو بريد HTML. هناك يوضع كل نمط على الوسم، فلا تحتاج إلى شيء آخر.
شاهد مولّد أزرار المشاركة أثناء العمل
يشرح فيديو قصير كل خطوة. ثم اختر لغتك أدناه، وشغّل الترجمة النصية إن أردت.
كيف تصنع أزرار المشاركة
ست خطوات قصيرة. كما أن كل شيء يحدث في هذه الصفحة.
اختر المشاركة أو المتابعة
استخدم «أزرار» في الأعلى. «تشارك صفحة» تصنع روابط مشاركة، و«تربط بحساباتي» تشير إلى حساباتك.
حدّد الشبكات
حدّد كل شبكة تريدها. تظهر الأزرار بالترتيب الذي تحدده، لذلك حدّد الأهم أولًا.
أضف الصفحة أو حساباتك
اكتب عنوان الصفحة والنص الذي سيُشارك. أما لأزرار المتابعة فألصق رابط كل حساب.
اختر الشكل والألوان
اختر شكلًا، وحرّك شريط النعومة، واختر نمطًا. ثم أبقِ ألوان العلامة التجارية، أو ضع خلفيتك ولون أيقونتك.
اضبط التخطيط
ضع الأزرار جنبًا إلى جنب، أو فوق بعضها، أو في شبكة، أو في شريط جانبي عائم. كما تضبط الحجم والمسافة بينها والنص.
انسخ الكود
اختر HTML + CSS أو HTML خالصًا، ثم انسخ الكود أو نزّله كملف HTML. بعد ذلك ألصقه مرة واحدة حيث يجب أن تظهر الأزرار.
لماذا تستخدم هذه الأزرار مع أيقونات التواصل الاجتماعي
ثلاثة أسباب لصنع أزرارك بدل إضافة عنصر جاهز.
بلا عنصر جاهز وبلا تتبع
عناصر المشاركة الجاهزة غالبًا ما تحمّل سكربت، وتضع ملفات تعريف ارتباط، وتتتبع قرّاءك. أما هذه الأزرار فروابط بسيطة. وبذلك تبقى صفحتك سريعة، ولا تحتاج إلى ذكر شيء إضافي في سياسة الخصوصية.
كل النمط في مكان واحد
الشكل والنعومة والألوان والحجم والتخطيط وتأثير المرور كلها في شاشة واحدة. كما تمنحك الأشكال السريعة الستة بداية جيدة بنقرة، ويمكنك بعدها تغيير كل إعداد.
كود يناسب أي مكان
نسخة HTML + CSS تناسب موقعًا أو قالبًا. في الوقت نفسه، يعمل HTML الخالص حيث لا يمكنك إضافة CSS، مثلًا في كتلة منشئ صفحات أو في رسالة بريد.
كيف تُبنى أزرار المشاركة
ثلاث قواعد تشكّل الكود الذي تنسخه. ومعرفتها تساعدك على استخدامه جيدًا.
- لكل شبكة عنوان مشاركة خاص بها لدى Facebook وX وLinkedIn وغيرها صفحة تفتح منشورًا جاهزًا. تضيف الأداة رابطك المرمّز وعنوانك إلى ذلك العنوان. لكن بعض التطبيقات مثل Viber وMessenger تستخدم رابط تطبيق، لذلك تعمل أفضل على الهواتف.
- روابط المشاركة تبقى nofollow رابط المشاركة ليس صفحة تضمنها. لذلك تضع الأداة على روابط المشاركة rel="nofollow noopener noreferrer". أما روابط الحسابات فتحصل على rel="me"، وهو يخبر بعض الشبكات أن الحساب لك.
- التباين يحدد ما يراه الناس تحتاج الأيقونة إلى تباين لا يقل عن 3 إلى 1 مع خلفيتها كي تُرى بسهولة. هذه هي القاعدة في دليل WCAG لتباين العناصر غير النصية. لذلك تنبّهك الأداة عندما تقل ألوانك عنها.
أخطاء شائعة في أزرار المشاركة
كل واحد منها يكلّفك مشاركات، حتى مع أزرار جيدة.
شبكات كثيرة جدًا
عشرون زرًا تبدو كالضجيج. لذلك احتفظ بثلاث إلى ست شبكات يستخدمها قرّاؤك فعلًا.
أيقونات بلا تسمية
قارئ الشاشة لا يستطيع قراءة أيقونة. لهذا يضيف الكود aria-label إلى كل زر.
أيقونة باهتة على لون باهت
الأبيض على الأصفر الفاتح يصعب رؤيته. لذلك راقب تنبيه التباين وأصلح اللون.
عنوان الصفحة الخاطئ
عندها تشارك كل صفحة صفحتك الرئيسية. بدلًا من ذلك، فعّل العنوان التلقائي في القوالب.
أزرار صغيرة جدًا على الهاتف
الزر الصغير جدًا يصعب لمسه. لذلك اجعلها 40 بكسل أو أكثر للإبهام.
شريط عائم فوق المحتوى
قد يغطي الشريط الجانبي النص على الشاشة الصغيرة. لذلك جرّبه على هاتف قبل النشر.
أسئلة شائعة عن أيقونات التواصل الاجتماعي وأزرار المشاركة
هل مولّد أزرار المشاركة هذا مجاني؟
نعم. لا سعر ولا تسجيل ولا علامة مائية في الكود. في الواقع، متصفحك يقوم بكل العمل.
هل تتتبع الأزرار قرّائي؟
لا. إنها روابط بسيطة، بلا أي سكربت منا أو من الشبكات. لذلك لا ترى الشبكة الزيارة إلا عندما ينقر القارئ.
كم شبكة يمكنني استخدامها؟
هناك 32 أيقونة. منها 22 تشارك صفحة، أما البقية مثل Instagram وYouTube فتربط بحساب.
لماذا لا أستطيع تحديد Instagram في وضع المشاركة؟
ليس لدى Instagram وYouTube وTikTok عنوان ويب يشارك رابطًا. لذلك انتقل إلى «تربط بحساباتي» لاستخدامها.
ما الفرق بين أزرار المشاركة وأزرار المتابعة؟
زر المشاركة ينشر صفحتك في حساب القارئ. لكن زر المتابعة يأخذ القارئ إلى حسابك.
أي نوع من الكود أختار؟
اختر HTML + CSS لموقع أو قالب. ثم اختر HTML الخالص لمنشئي الصفحات أو Markdown أو البريد.
لماذا تغيب تأثيرات مرور المؤشر في HTML الخالص؟
تأثير مرور المؤشر يحتاج إلى قاعدة CSS، والأنماط المضمّنة لا تستطيع حملها. لذلك استخدم HTML + CSS إذا أردت التأثير.
ماذا تفعل النعومة؟
تضبط استدارة الزوايا، كنسبة من ارتفاع الزر. وبذلك يعطي الصفر زوايا حادة، ويعطي 50 انحناءً كاملًا.
ما الأشكال التي يمكنني اختيارها؟
مربع ومستدير ودائرة وكبسولة وورقة وسداسي. كما أن الكبسولة أفضل عندما تُظهر الأزرار أسماء الشبكات.
هل يمكنني استخدام ألواني؟
نعم. ألغِ تحديد «استخدام لون العلامة التجارية لكل شبكة»، ثم اختر لون الخلفية ولون الأيقونة.
ماذا تعني الأنماط؟
الكامل يملأ الزر، والتدرج يجعله متدرجًا. الإطار يرسم حدًا فقط، واللون الخفيف يستخدم تعبئة باهتة، والأيقونة وحدها تزيل الخلفية.
كيف أضع الأزرار جنبًا إلى جنب؟
اختر «جنبًا إلى جنب» في التخطيط. عندها تصطف في صف، وتنتقل إلى سطر جديد على الشاشات الصغيرة.
ما الشريط الجانبي العائم؟
يثبّت الأزرار على الحافة اليسرى للنافذة، في منتصف الارتفاع. لذلك تبقى ظاهرة بينما يمرّر القارئ الصفحة.
هل يمكن للأزرار مشاركة الصفحة التي توضع فيها؟
نعم. فعّل خيار العنوان التلقائي في HTML + CSS. ثم يملأ سكربت صغير عنوان الصفحة واسمها.
كيف يعمل زر نسخ الرابط؟
ينسخ عنوان الصفحة إلى الحافظة. ولأن ذلك يحتاج إلى سكربت، يضيف الكود بضعة أسطر له.
أين ألصق الكود؟
ألصقه مرة واحدة حيث يجب أن تظهر الأزرار، مثلًا بعد مقال. وفي WordPress استخدم كتلة HTML مخصصة.
هل يمكنني تغيير اسم الفئة؟
نعم. اكتب اسمًا جديدًا في «اسم فئة CSS»، حتى لا تتعارض الأزرار أبدًا مع أنماطك.
هل الأيقونات بصيغة SVG؟
نعم. كل أيقونة مسار SVG مضمّن واحد، لذلك تبقى حادة بأي حجم ولا تحتاج إلى ملف صورة.
هل يمكنني استخدام أيقونات SVG في مكان آخر؟
نعم، انسخ الـ SVG من الكود. ومع ذلك، اتبع قواعد العلامة التجارية لكل شبكة عند عرض شعارها.
ما الحجم المناسب لأزرار المشاركة؟
من 40 إلى 48 بكسل يناسب الهواتف والحواسيب. أما الأزرار الأصغر فيصعب لمسها.
هل تساعد أزرار المشاركة في SEO؟
ليس مباشرة، لأن المشاركات ليست عامل ترتيب. لكن المزيد من المشاركات يجلب زوارًا أكثر، وقد يضع بعضهم رابطًا إليك.
لماذا تكون روابط المشاركة nofollow؟
رابط المشاركة يقود إلى أداة، لا إلى محتوى توصي به. لذلك فإن nofollow هو الخيار الصادق.
هل تعمل الأزرار على الهاتف؟
نعم. على الهاتف تفتح WhatsApp وViber وMessenger والرسائل النصية التطبيق فورًا.
هل يمكنني استخدامها في رسالة بريد HTML؟
نعم، بكود HTML الخالص. لكن بعض تطبيقات البريد تخفي SVG، لذلك جرّب في التطبيقات التي يستخدمها قرّاؤك.
هل تحفظ الأداة إعداداتي؟
لا. لا يُحفظ شيء بعد إغلاق الصفحة. لذلك انسخ الكود أو نزّله قبل أن تغادر.
هل يمكنني صنع أزرار متابعة لحساباتي؟
نعم. اختر «تربط بحساباتي»، وحدّد شبكاتك، ثم ألصق عنوان كل حساب. والزر الذي بلا عنوان يشير إلى # حتى تضيف عنوانًا.
أدوات أخرى للمشاركة وHTML
بعض الصفحات التي تناسب أزرار المشاركة.
- مولّد Open Graph
اكتب الوسوم التي تصنع البطاقة التي يعرضها الرابط.
- محرر HTML أونلاين
ألصق كود الأزرار وجرّبه مباشرة.
- مصغّر HTML
صغّر الكود قبل لصقه.
- مولّد أنظمة الألوان
اعثر على ألوان أزرار تناسب علامتك.
- فاحص SEO
افحص صفحتك، بما فيها أزرار المشاركة.
اصنع أزرار المشاركة الآن
حدّد شبكاتك، واختر شكلًا، ثم انسخ الكود. كما أن الأداة مجانية، ولا يغادر أي شيء تكتبه هذه الصفحة.