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

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

MesterPerfect

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
28 يناير 2019
2,201
60
1,524
113
25
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
والسَلام عليكم ورحمة الله وبركاته
 
XenArabia قال:
ما شاء الله عليك أخي أحمد شرح و مجهود كبير
سلمت اناملك و امدك الله بالصحة و العافية و البركة في العمر و الرزق
و دائما منتظرين جديدك الجميل
أنقر للتوسيع...
سلمك الله أخي الحبيب محمد
بإذن الله سنحاول تقديم كل جديد لأعضائنا الكرام
 
MesterPerfect قال:
بسم الله الرحمن الرحيم
أهلا بكم في شرح جديد وإن شاء الله يكون مفيد
شرحنا اليوم يتمثل في كيفية إضافة المزيد من أيقونات المشاركة على مواقع التواصل الإجتماعي
المعلومات
اسم الشرح: كيفية إضافة المزيد من أيقونات المشاركة على مواقع التواصل الإجتماعي
توافق الشرح: 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
والسَلام عليكم ورحمة الله وبركاته
أنقر للتوسيع...
لك فائق الاحترام ع الشرح المفصل
 

المواضيع المُشابهة

K
  • سؤال سؤال
[ تم الحل ] معلومات العضو في الشريط الجانبي
الردود
11
المشاهدات
934
kamel dz
K
MesterPerfect
    • أعجبني
    • أحببته
[ XF 2.2 ] طريقة إضافة زر نسخ رابط الموضوع
الردود
5
المشاهدات
2K
muhamed saber
muhamed saber
MesterPerfect
    • أعجبني
    • أحببته
طريقة نقل منتقي الستايلات إلى شريط التنقل
الردود
3
المشاهدات
1K
Lamine
Lamine
Eng.Salah
  • سؤال سؤال
[ طلب ] التعديل على كود روابط الفوتر
الردود
2
المشاهدات
2K
Eng.Salah
Eng.Salah
shqawe
    • أعجبني
    • أحببته
[ XF 2.2 ] اضافة ضبابية على المشاركات والردود ومنع الزوار من الاطلاع عليها للنسخ 2.2
2
الردود
35
المشاهدات
5K
هدى
ه

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

المواضيع
1,564
المشاركات
17,674
الأعضاء
1,119
آخر عضو مسجل
Mohamed Loly

مشاركة هذه الصفحة

أعلى