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

[ XF 2.2 ] إضافة المزيد من أيقونات المشاركة على مواقع التواصل الإجتماعي

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
28 يناير 2019
2,095
59
1,466
113
24
sohag, Egypt
mx-blind.org
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية إضافة المزيد من أيقونات المشاركة على مواقع التواصل الإجتماعي
المعلومات
اسم الشرح: كيفية إضافة المزيد من أيقونات المشاركة على مواقع التواصل الإجتماعي
توافق الشرح: xf2.0/xf2.1/xf2.2
مقدم الشرح: أحمد بكر @MesterPerfect
تمت التجربة: نعم

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

وهم على النحو التالي
  • Telegram
  • Viber
  • Skype
  • Linked In
  • Blogger
  • Gmail
  • Yahoo Mail
  • Diaspora
  • Evernote
  • Xing
  • Weibo
ويمكنكم إضافة كل تلك المواقع أو إضافة أحدها فقط دون البقية

شرح المرحلة الأولى - أكواد css

ندخل إلى لوحة التحكم ==> المظهر ==> القوالب
ونختار الستايل الذي نريد إضافة المواقع إليه

نبحث عن قالب: share_controls.less

ثم نضيف إليه كود الcss هذا لتخصيص شكل الأيقونات

CSS:
.shareButtons-button {
    .xf-xenarabiaSharingButtons();
   
    &.shareButtons-button--telegram
    {
        &:hover { background-color: #259bd8; }
        > i:before { .m-faContent(@fa-var-telegram); }
    }

    &.shareButtons-button--vk
    {
        &:hover { background-color: #4d75a3; }
        > i:before { .m-faContent(@fa-var-vk); }
    }

    &.shareButtons-button--ok
    {
        &:hover { background-color: #e67e17; }
        > i:before { .m-faContent(@fa-var-odnoklassniki); }
    }

    &.shareButtons-button--blogger
    {
        &:hover { background-color: #f79138; }
        > i:before { .m-faContent(@fa-var-blogger); }
    }

    &.shareButtons-button--linkedin
    {
        &:hover { background-color: #283e4a; }
        > i:before { .m-faContent(@fa-var-linkedin); }
    }

    &.shareButtons-button--diaspora
    {
        &:hover { background-color: #750000; }
        > i:before { .m-faContent(@fa-var-diaspora); }
    }

    &.shareButtons-button--viber
    {
        &:hover { background-color: #665cac; }
        > i:before { .m-faContent(@fa-var-viber); }
    }

    &.shareButtons-button--skype
    {
        &:hover { background-color: #0078d7; }
        > i:before { .m-faContent(@fa-var-skype); }
    }

    &.shareButtons-button--gmail
    {
        &:hover { background-color: #b23121; }
        > i:before { .m-faContent(@fa-var-google); }
    }

    &.shareButtons-button--yahoomail
    {
        &:hover { background-color: #430297; }
        > i:before { .m-faContent(@fa-var-yahoo); }
    }

    &.shareButtons-button--evernote
    {
        &:hover { background-color: #FF5E8F; }
        > i:before { .m-faContent(@fa-var-evernote); }
    }

    &.shareButtons-button--xing
    {
        &:hover { background-color: #026466; }
        > i:before { .m-faContent(@fa-var-xing); }
    }

    &.shareButtons-button--weibo
    {
        &:hover { background-color: #DF2029; }
        > i:before { .m-faContent(@fa-var-weibo); }
    }
}
طبعا لنفصل الكود لكي يتضح لكم
CSS:
.shareButtons-button {
    .xf-xenarabiaSharingButtons();
    }
هذه كلاس رئيسية للتعديل على كل الأيقونات التي سنضيفها
أي أن لو تم إضافة أي تخصيصات إلى هذا الكلاس الرئيسي فإنهُ سيتم تطبيقه على كل الأيقونات التي قمنا بإضافتها

بعد ذلك تجدون عدة كلاسات تندرج تحته وتم تسميتها حسب كل موقع قمنا بإضافته
مثال
كلاس تيليجرام
CSS:
    &.shareButtons-button--telegram
    {
        &:hover { background-color: #259bd8; }
        > i:before { .m-faContent(@fa-var-telegram); }
    }
}
إذا قمنا بتعديل هذا الكلاس أو إضافة أي تخصيصات عليه من حجم أو غيره فإن أيقونة تيليجرام فقط هي التي سيتم تعديلها
وهكذا مع باقي الكلاسات لباقي الأيقونات
الآن إنتهينا من تعديلات css ننتقل إلى المرحلة الثانية


شرح المرحلة الثانية - الأكواد الرئيسية

ندخل إلى لوحة التحكم ==> المظهر ==> القوالب
ونختار نفس الستايل الذي اخترناه المرة السابقة

نبحث عن قالب: share_page_macros

ثم نضيف إليه كود الhtml هذا لإضافة الأيقونات

مكان الإضافة يكون أسفل أي أيقونة وليكن مثلا أسفل أيقونة Facebook
نبحث عن هذا الكود وهو كود أيقونة الفيسسبوك

HTML:
<xf:if is="$xf.options.facebookLike">
<a class="shareButtons-button shareButtons-button--brand shareButtons-button--facebook" data-href="https://www.facebook.com/sharer.php?u={url}">
<i aria-hidden="true"></i>
<span>{{ phrase('facebook') }}</span>
</a>
</xf:if>

ونقوم بإضافة كودنا الرئيسي أسفله

HTML:
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--vk" data-href="https://vk.com/share.php?url={url}&title={title}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('vk') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--ok" data-href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('ok') }}</span>
        </a>  

        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--blogger" data-href="https://www.blogger.com/blog-this.g?u={url}&n={title}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('blogger') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--linkedin" data-href="https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('linkedin') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--diaspora" data-href="https://share.diasporafoundation.org/?title={title}&url={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('diaspora') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--weibo" data-href="http://service.weibo.com/share/share.php?url={url}&appkey=&title={title}&pic=&ralateUid=">
            <i aria-hidden="true"></i>
            <span>{{ phrase('weibo') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--telegram" data-href="https://t.me/share/url?url={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('telegram') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--viber" id="viber_share">
            <i aria-hidden="true"></i>
            <span>{{ phrase('viber') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--skype" data-href="https://web.skype.com/share?url={url}&text={title}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('skype') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--gmail" data-href="https://mail.google.com/mail/?view=cm&su={title}&body={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('google') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--yahoomail" data-href="http://compose.mail.yahoo.com/?to={url}&subject={title}&body={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('con_acc.yahoo') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--evernote" data-href="http://www.evernote.com/clip.action?url={url}&title={title}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('evernote') }}</span>
        </a>
   
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--xing" data-href="https://www.xing.com/spi/shares/new?url={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('xing') }}</span>
        </a>

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

HTML:
        <a class="shareButtons-button shareButtons-button--brand shareButtons-button--telegram" data-href="https://t.me/share/url?url={url}">
            <i aria-hidden="true"></i>
            <span>{{ phrase('telegram') }}</span>
        </a>

ونفس الشيء مع باقي أكواد المواقع من تعديل أو حذف أو غيره

النتيجة
صورة الأيقونات أسفل المواضيع قبل التعديل

cBrRbgQ.jpg


صورة الأيقونات أسفل المواضيع بعد التعديل

C1V9JfW.jpg



وبهذا ينتهي شرحنا لهذا اليوم
ونلقاكم قريبا إن شاء الله
وفي حال كان لديكم أي استفسارات حول الأكواد أو تريدون توضيح حول أي جزئية من النقاط فأنا في الخدمة
وأعتذر على الإطالة في الشرح, ولكن انا أحببت أن أمشي معكم بمبدأ لا تعطيني سمكة :D
والسَلام عليكم ورحمة الله وبركاته
 
ما شاء الله عليك أخي أحمد شرح و مجهود كبير
سلمت اناملك و امدك الله بالصحة و العافية و البركة في العمر و الرزق
و دائما منتظرين جديدك الجميل
سلمك الله أخي الحبيب محمد
بإذن الله سنحاول تقديم كل جديد لأعضائنا الكرام
 

إحصائيات المنتدى

المواضيع
1,446
المشاركات
16,603
الأعضاء
1,022
آخر عضو مسجل
naseh
أعلى