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

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

معاينة

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

شرح تركيب أزرار المشاركة في مواقع التواصل الاجتماعي. 

في البداية يجب تضمين خط الإيقونات خط font-awesome, وأيضاً تضمين الجي كويري jquery  تأكد من وجودهم في مدونتك, أد كان غير موجودين أضفهم, تابع الخطوات التالية.

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

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

1- نبحث عن  class='post-footer ستجدها مكرره أختار الثانية تم أضف الكود التالي فوقها.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
  -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #3cf;
}
.social-btns .btn.twitter .fa {
  color: #3cf;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.link:before {
  background-color: #0073b2;
}
.social-btns .btn.link .fa {
  color: #0073b2;
}
.social-btns .btn.whats:before {
  background-color: #53d54d;
}
.social-btns .btn.whats .fa {
  color: #53d54d;
}
.social-btns .btn.skype:before {
  background-color: #00aff0;
}
.social-btns .btn.skype .fa {
  color: #00aff0;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
    background: #c5c5c5;
    height: 50px;
    padding: 24px 0px;
    margin: 20px auto;
    font-size: 0;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.social-btns .btn {
    display: inline-block;
    background-color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 28%;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
    opacity: 0.99;
}
.social-btns .btn:before {
  content: &#39;&#39;;
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 38px;
  vertical-align: middle;
}

</style>
<script>
//<![CDATA[
$(".social-btns .wa_btn").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 class='social-btns'><a class='btn facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target='_blank'><i class='fa fa-facebook'/></a>
<a class='btn twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-twitter'/></a>
<a class='btn google' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target='_blank'><i class='fa fa-google'/></a>
<a class='btn link' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:blog.url' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='wa_btn wa_btn_m btn whats'  expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url'><i class='fa fa-whatsapp'/></a>
</div>

</b:if>

ألان قم بحفظ القالب وجرب الإضافة, في حالة لم تشتغل الإضافة, يجب عليك تضمين خط الإيقونات وسكربت الجي كويري تابع الخطوات التالية:
نبحث عن </head> ونضع الروابط التالية فوقها.

<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
 <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet prefetch'/>

قم بحفظ القالب, ومبروك عليك أزرار المشاركة في مواقع التواصل الاجتماعي, لو صادفتك مشكله ضعها في التعليقات وسنقوم بحل المشكلة في اقرب وقت ممكن. لا تنسى متابعتنا من هنا.