إضافة أزرار المشاركة عبر مواقع التواصل مع زر واتساب - عالم المدون

الثلاثاء، 20 ديسمبر، 2016

إضافة أزرار المشاركة عبر مواقع التواصل مع زر واتساب


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




شرح التركيب



  1. أولا قم بالبحث عن هذه الوسم فى قالب مدونتك]]></b:skin>ثم قم بوضع الكود التالى فوقه


.post-share {
text-align: center;
padding: 10px 5px;
margin: 0 0 15px;
background: #fff;
border: 1px solid #C4CDD4;
margin-right: 1px;
}
.post-share a {
display: inline-block;
width: 16%;
text-align: center;
font-size: 15px;
color: #fff;
line-height: 35px;
}
.post-share a:hover {
background-color: #37474F;
}
.post-share a i {
float: left;
width: 35px;
line-height: 35px;
background-color: #37474F;
}
.share-facebook {
color: #fff;
background-color: #3b5998;
}
.share-twitter {
color: #fff;
background-color: #00aced;
}
.share-gplus {
color: #fff;
background-color: #dd4b39;
}
.share-linkedin {
color: #fff;
background-color: #007bb5;
}
.social__item {
display: inline-block;
width: 17%;
text-align: center;
font-size: 15px;
color: #fff;
line-height: 35px;
}
.wa_btn.wa_btn_m {
color: #fff;
background-color: #65bc54;
width: 100%;
}
.share-print {
color: #fff;
background-color: #1A7DB9;
}

  1. الأن الكود الثانى من اللإضافة وسوف تضع أسفل المقالات
  2. ولكن أذا كان لديك أزرار للمشاركة من قبل من الأفضل حذفها
  3. وسوف تبحث الأن على الوسم <data:post.body/> سوف تجد مه ثلاث
  4. أخر واحد هو المقصود تضع أسفله الكود التالى

<div class='post-share'>
                    <a class='share-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>
                      <i class='fa fa-facebook'/>
                      فيسبوك
                    </a>
                    <a class='share-twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
                      <i class='fa fa-twitter'/>
                      تويتر
                    </a>
                    <a class='share-gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
                      <i class='fa fa-google-plus'/>
                      جوجل +
                    </a>
                    <a class='share-linkedin' expr:href='&quot;http://linkedin.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
                      <i class='fa fa-linkedin'/>
                      لينكدين
                    </a>
                    <div class='social__item'>
                      <a class='wa_btn wa_btn_m' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' title='Share on Whatsapp'>
                        <i class='fa fa-linkedin'/>
                        واتساب
                      </a>
                      <script type='text/javascript'>
                        if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;http://yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}
                      </script>
                      <script>
                        //<![CDATA[
                        $( "a.wa_btn.wa_btn_m" ).click(function() {
                          var ua = navigator.userAgent.toLowerCase();
                          var isAndroid = ua.indexOf("android") > -1;
                          var Ismobile = ua.indexOf("mobile") > -1;
                          var isiPhone = ua.indexOf("iPhone") > -1;
                          if(isAndroid) {
                          }else if(Ismobile){
                          }
                            else if(isiPhone){
                            } else {
                              alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
                            }
                        });
                        //]]>
                      </script>
                    </div>
                    <a class='share-print' onclick='window.print()' target='_blank' title='طباعة المقال'>
                      <i class='fa fa-fa fa-print'/>
                      طباعة
                    </a>
                  </div>


  1. الأن يمكنك حفظ القالب ومبروك عليك 
  2. الأن شئ أخر لمن لديه أزار من قبل ولا يعرف حذفه ولا يريد حذفها
  3. يمكنك فقط إضافة أليها زر الواتساب منفرد
  4. فى الكود التانى  المحدد باللون الأخر هو الخاص بزر الواتساب يمكنك نقله هو فقط
  5. وفى الكود الثانى سوف تضع الكود الذى أخذته أسف أخر زر من المشاركات التى لديك
  6. ولكن يفضل إضافة أزرار المشاركة كامله حتى لا تحدث مشكلة فى التركيب
  7. لمن يوأجده مشكلة يمكنك كتابتها فى التعليقات

وهكذا ينتهى هذا الموضوع السريع والذى سوف يفيد الجميع 



شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

  • اضافة تعليق
  • 27 تعليق على موضوع : إضافة أزرار المشاركة عبر مواقع التواصل مع زر واتساب

    موضوع رائع رائع رائع
    ممكن تعمل موضوع تشرح فيه ازاي نربط linklist
    ب خاصيه select بحيث يظهر في الكمبيوتر عادي وعلي التليفون تظهر select

    أزال أحد مشرفي المدونة هذا التعليق.

    موضوع رائع ودائما تقدم المفيد والمميز والاداوت المدفوعة مجانا وهذا شي يجعلك مميز جدا
    تحياتي وتقديري لشخصك الكرم

    السلام عليكم و رحمة الله
    موقع رائع و احترافي بكل ما في الكلمة من معنى
    بارك الله فيك و بالتوفيق لك اخي
    لو تكرمت اخي على بزيارة لمدونتي المتواضعة لتعطيني رأيك فيها و تقدم الي بعض التوجيهات و النصائح و هذا رابط المدونة
    https://ouatech1.blogspot.com

    أزال أحد مشرفي المدونة هذا التعليق.

    اخي ممكن نشر مواضيع ذات صله الخاص بك على شكل سلايدر سيكون شكلة جميل جدا ^_^

    الأن يمكنك حذف القالب ومبروك عليك

    لقد اخطات حفظ و ليس حذف (:
    اتمنى ان تضع كود css للتعديل على القائمة الرئيسية لقالب نسيم و ان وضعته اتمنى ان تجعلها تقبل الايقونات و ان يكون التعديل من داخل القالب و ليس من التخطيط (:

    عليك أولا حذف التى فى قالب نسيم حتى تعمل هذه

    شكرا على التبيه
    التعديل فى القائمة من التخطيط أخى الكريم

    تم نشره منذ فترة على المدونة أخى

    مدونة جميله أخى ولكن عليك العمل عليه للحصول على أفضل النتائج

    شكرا لك أخى الكريم على الدعم

    مجهود رائع واتمني منك مساعدتي في حل بعض مشاكل المدونة عنوانها كاتب مستقل
    http://www.katebmustaqel.com
    مشكلة عدم ظهور الوصف تحت العنوان ومشكلة الصور ولماذا ترتيب المدونة منخفض في محركات البحث

    أجو منك أخى الكريم توضيح طلبك

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

    ضغ رابط مدونتك للمعاينة

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

    فى هذه الأمر أخى عليك أنشاء سيو لمدونتك

    لو تكرمت اخي على بزيارة لمدونتي المتواضعة لتعطيني رأيك فيها و تقدم الي بعض التوجيهات و النصائح و هذا رابط المدونة
    http://qissass2017.blogspot.com

    مع الاسف لا يعمل الكود
    جربته مع اكثر من قالب

    اذا قمت بتجربتها من مدونتى سوف تعمل
    وعليك المشاركة فقط من الهاتف بخصوص الواتساب

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

    جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر