9 أزرار مخصصة للمشاركة الاجتماعية وجافا سكريبت و CSS

يجب أن يتضمن كل موقع بعض الأزرار الاجتماعية لزيادة المشاركة على الويب. لكن أزرار المشاركة الافتراضية ليست بهذه الروعة وقد تم تصميم كل منها بشكل مختلف بناءً على العلامة التجارية للشبكات.

لهذا السبب قمنا برعاية هذه المجموعة الصغيرة من أزرار المشاركة المخصصة التي يمكنك تنسيقها وإعادة استخدامها على موقعك الخاص. إذا كنت تبحث عن أزرار مشاركة جميلة ، فإن هذه القوالب تقدم نقطة انطلاق رائعة.

1. تقاسم الجانب

الأول هو أحد الأساليب المفضلة لديّ التي أنشأها المطور مايكل شوفيلد. تعد واجهة المستخدم للشارة الاجتماعية ذات المشاركة الجانبية الثابتة شائعة حقًا في المدونات الكبيرة ومواقع المجلات.

يمكن أن تظل هذه الشارات الاجتماعية إما في الجزء العلوي بالقرب من العنوان أو يمكنها التمرير لأسفل مع المستخدم. لم أجد أي دراسات حالة تقارن الاختلافات ، لكني أتخيل أن الأزرار الثابتة ترى أعدادًا أكبر من الأسهم. وفي كلتا الحالتين ، تكون مصممة جيدًا بحيث لا تبدو غير مرغوب فيها أو متداخلة في التخطيط.

ربما يكون هذا هو أفضل قالب يمكنك البدء به إذا كنت تدير مدونة وتريد بعض شارات المشاركة المخصصة.

2. أزرار الصورة

أسلوب المشاركة الشائع الآخر هو إعادة نشر الصور الموجودة على موقع الويب. هذا شائع مع Pinterest ولكن يمكن أن يعمل بشكل جيد مع Facebook و Twitter وحتى Google+ أيضًا.

أزرار الصور هذه عبارة عن تصميمات مخصصة باستخدام CSS3 خالص وبعض شعارات الخلفية لكل منها. لا يتصلون بأي شبكات اجتماعية حتى الآن ، ولكن يمكن بسهولة برمجة روابط الارتساء للمشاركة الاجتماعية.

التصميم هو حقًا تركيزي هنا لأنها تبدو رائعة مرتبطة بأي صورة. بالإضافة إلى أن الموقع يعطي حقًا فكرة أنك تحاول تشجيع مشاركة الصورة نفسها ، وليس المنشور فقط.

3. تبديل الأسهم

لقد رأينا جميعًا أدوات مشاركة WordPress هذه باستخدام أيقونة المشاركة الصغيرة والقائمة المنبثقة. بعد فترة يمكن أن تتقادم ، لذلك من المفيد خلطها قليلاً.

باستخدام هذا المقتطف ، يمكنك إعادة تصميم مشاركتك الاجتماعية برسم متحرك مخصص وقائمة مخفية. إنه مثالي لأي شخص لديه موقع يريد تشجيع الكثير من المشاركة عبر شبكات متعددة.

تم تصميم كل رمز في CSS خالص ويتم التحكم في الرسوم المتحركة عبر jQuery. يجب أن تكون قادرًا فقط على نسخ / لصق هذا في أي تخطيط وتشغيله. سيكون مناسبًا تمامًا لعنوان المقالة ، أو حتى في الجزء السفلي بعد انتهاء الأشخاص من القراءة. في كلتا الحالتين ، من المؤكد أن تزيد المشاركات الاجتماعية عبر اللوحة.

4. دائرة الرسوم المتحركة

للحصول على القليل من الرسوم المتحركة الممتعة ، تحقق من هذه الأزرار الدائرية التي أنشأها ستيفان ليفر.

كل زر له تأثير التمرير للتحريك الخاص به ويمكن أن يندمجوا جميعًا بشكل مثالي في أي تخطيط. يمكنك أيضًا تغيير ألوان الخلفية والأيقونة بحيث تبرز على خلفية بيضاء عادية.

كل شيء يعمل على CSS خالص ويتم سحب الرموز من Font Awesome عبر Bootstrap.

لاحظ أن هذه الأزرار أيضًا لا تتصل مباشرة بروابط المشاركة الاجتماعية ولكن يمكن إصلاح ذلك بسهولة باستخدام الكود الصحيح.

5. أزرار مشاركة بسيطة

الوصف المختصر واللطيف والدقيق هو أفضل وصف لأزرار المشاركة هذه.

يستخدمون أيقونات SVG بسيطة من مجموعة أيقونات Ionicons. لكنك لست بحاجة إلى أيوني أو أي جافا سكريبت لتشغيلها.

بدلاً من ذلك ، يستخدمون قيمة href مع خيارات علامة التبويب الجديدة لفتح روابط المشاركة مباشرة في المتصفح. لا يلزم جافا سكريبت ، ولا توجد ملفات SVG عالية الأداء.

إذا قمت بالبحث في مجموعة الرموز الأيونية ، يمكنك حتى العثور على رموز اجتماعية أخرى قد ترغب في إضافتها. بالإضافة إلى أنك تتمتع بالتحكم الكامل في الأنماط في CSS حتى تتمكن من تغيير الحجم والحشو ولون الخط وكل شيء آخر تقريبًا.

6. الاجتماعية المخفية

أنشأ المطور Chris Sevilleja هذه الأزرار الاجتماعية المخفية كلها باستخدام CSS خالص.

تستخدم بعض مواقع الويب هذه التقنية لتضمين شارات المشاركة الافتراضية داخل أيقونات أصغر. لكن من المسلم به أن هذه الرسوم المتحركة فريدة من نوعها ، لذا فهي ليست اتجاهًا شائعًا للغاية.

الكود سهل الإعداد حقًا ويتم تشغيله بالكامل من خلال CSS بحيث يكون لديك تحكم كامل. حتى أن كريس طور قلمًا مشابهًا لشارات Google+ الاجتماعية.

كل من مقتطفات التعليمات البرمجية متعصبان لأي موقع ويب إلى حد كبير ويتم تشغيل الرسوم المتحركة في جميع المتصفحات المتوافقة مع CSS3.

7. تحوم ألوان الخلفية

الآن إليك إعداد فريد للمشاركة الاجتماعية حيث يتغير لون الخلفية بناءً على الزر الذي تحوم عليه.

يحتوي كل زر على رمز مخصص خاص به يتم سحبه من Font Awesome حتى يمكنك توسيع هذه المجموعة لتشمل الرموز الأخرى ذات الصلة. أنا أيضًا أحب هذا الأسلوب حقًا لأنه يحتوي على احتياطي JavaScript لتغييرات التمرير.

لكن مطور الويب كريستوفر جرابنسكي ابتكر بديل CSS خالصًا يعمل تمامًا (في المتصفحات المدعومة).

لا أعتقد أن هذه التقنية ستبدو رائعة على مدونة أكبر ، على الرغم من أنها قد تعمل على مواقع أصغر أو منشورات مدونة قصيرة.

8. مشاركة flyout

صمم المطور Kyle Lavery زر مشاركة منبثقة مذهلاً يذكرنا بنهج Google في التعامل مع المواد المنبثقة.

هذا لا يستخدم سوى القليل من JavaScript ولكنه فقط 5 أسطر وليس معقدًا جدًا. سحر الرسوم المتحركة موجود في CSS والذي يمكنك تخصيصه ليناسب احتياجاتك.

الأمر المثير للاهتمام أيضًا هو أن HTML الخام بسيط للغاية. يحتوي على حاوية مشاركة رئيسية واحدة ثم يستخدم عناصر div للأزرار. تمنحك 5 أسطر من HTML و 5 أسطر من JavaScript ، ممزوجة بمجموعة كاملة من CSS ، هذا التأثير الجميل.

بالتأكيد واحدة من أروع ميزات المشاركة الاجتماعية التي رأيتها وأسلوب تصميم المواد يجعلها أكثر برودة.

9. أزرار المشاركة ثلاثية الأبعاد

آخر ما في مجموعتي هو هذا التصميم ثلاثي الأبعاد باستخدام تحولات CSS ثلاثية الأبعاد جنبًا إلى جنب مع الأزرار الاجتماعية.

قام المطور Fabrizio Bianchi بإنشاء هذه الأزرار باستخدام CSS خالص من الرموز إلى الرسوم المتحركة للتحويل. الرموز الرئيسية مأخوذة من Font Awesome ورمز JS الوحيد مخصص لتضمين الأزرار بالداخل.

ولكن بشكل عام ، هذا حل CSS خالص يجب أن يعمل بشكل جيد على أي موقع. لا يحب الجميع التأثير ثلاثي الأبعاد ، ولكن إذا كان يناسب تصميمك ، فاذهب إليه.