سنحاول أن نريكم كيف يتم استخدام خيار المشاركة المخصصة، عبر تخصيص أزرار مشاركة التدوينة في معظم الخدمات الأخرى مواقع التواصل الإجتماعي مع توفير شفرة كل
في هذه التدوينة سنحاول أن نريكم كيف يتم استخدام خيار المشاركة المخصصة، عبر تخصيص أزرار مشاركة التدوينة في معظم الخدمات الأخرى مواقع التواصل الإجتماعي مع توفير شفرة كل موقع متداول بكثرة سواء في المحتوى العربي أو الأجنبي...فكما نعلم أن إضافة أداة أزرار المشاركة تختلف في اللون والشكل وما يهمنا هو الموقع المضمن في الأداة ...فتحتاج أحيانا أن تحذف موقع وتستبدله بآخر أو تضيف عليه وهكذا...فهذه التدوينة ستساعدك على ضبط الأمور ولتكن هذه التدوينة عبارة عن مرجع تحتاج له متى أردت إجراء تعديلات من هذا النوع.
إنشاء زر مشاركة مخصص
التطبيق العملي
-
نقوم بوضع الكود الرئيسي والذي يحتوى على شفرة الموقع الإلكتروني
وليكن مثلا زر الفايسبوك وهو كالتالي...
<a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'> </a>
-
نقوم الآن بوضع إسم مع الوسم وليكن مثلا إسم
الموقع (facebook) أو كلمة (شارك) المحددة باللون
ليصبح كالتالي...
<a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>
</a>
-
نضع الآن أيقونة (facebook) لتكن صورة أو رمز من رموز
مكتبة Font Awesome المحددة باللون ليصبح الكود
كالتالي...
<a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'></i>
شارك
</a>
-
إذا أردنا عند الضغط على الزر يفتح معك في نافذة منبثقة أضف السمة
المحددة باللون ليصبح الكود
النهائي كالتالي...
<a expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
<i class='fa fa-facebook'></i>
شارك
</a>
لتخصيص الشكل الخارجي للزر هنا نحتاج إدراج إسم فئة class المحددة باللون كالتالي...
<a class='share-item' expr:href='"//www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' rel='nofollow' target='_blank' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>
<i class='fa fa-facebook'></i>
شارك
</a>
.share-item {
padding: 10px;
margin: 0 auto;
max-width: 150px;
font-size: 14px;
font-weight: 700;
text-align: center;
background-color: #38559c;
color: white;
text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
شرح نمط الكود
.share-item:hover {
background-color: #2f2f2f;
color: #777;
}
نماذج أولية لأزرار المشاركة
ستجد في الأسفل مجموعة من المواقع الأكثر إستعمالا على الصعيدين العربي
والأجنبي..داخل كل حاوية ستجد توليفة من الشفرات هي نفس الأكواد التي طبقناها
في المثال الذي سبق وهي مرتبة على الشكل الآتي
1- معاينة للزر الذي صممناه منعكس على كود كل موقع
3- كود اللون الرئيسي المستعمل في الموقع.
2- كود زر المشاركة.
ابحث عن الموقع المرغوب للمشاركة واستبدل العنوان والأيقونة واللون في
أداتك.
فقط قم بنسخ كود صورةsvgوضعه داخل الكود الرئيسي بنفس الطريقة التي أضفنا بها كود رمز أيقونات مكتبة font-awesome
COMMENTS