دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014

بعد ان تحدثت عن تركيب تعليقات الفيس على على مدونات بلوجر على نظام الفيس بوك 2014 فى الموضوع السابق فاليوم أقدم لكم شرح بسيط جدا لدمج تعليقات الفيس بوك مع تعليقات بلوجر فى تبويبين متجاورين بشكل جديد وجميل وهذه الخاصية قمت بتطبيقها فى مدونتى منذ حوالى أسبوع فوجدت كمًا هائلًا من التعليقات من متتبعينا الكرام يطلبون شرحًا لها فقررت فى البداية عمل شرح مفصل عن تركيب تعليقات الفيس بوك على نظام الفيس بوك 2014 

تعليقات الفيس بوك لمدونات بلوجر على نظام 2014

وفى هذا الموضوع شرح لطريقة دمج التعليقات 

شرح التركيــب 

اذهب للوحة التحكم >> القالب >> تحرير HTML

الخطـــــوة الأولى 

ابحث عن 

<div class='comments' id='comments'>

ربما تجد هذا الجزء مكرر أكثر من مرة فى مدونتك 

فأسفل كل جزء ضع هذا الكـــــــود 

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='أضف تعليقك عن طريق الفيسبوك'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> تعليقات</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='أضف تعليقك عن طريق بلوجر'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> تعليقات</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
</b:if>
</div>

كلمة تعليقات الزرقاء استبدلها باسم تعليقات الفيس بوك اذا أحببت
كلـــــــــــــمة تعليقات الصفراء استبدلها بتعليقات بلوجر اذا أحببت
استبدل القيمة 600 بعرض صندوق تعليقات الفيس بوك الذى تريده
هذا الجزء num_posts='10' خاص بتعليقات الفيس بوك التى ستظهر

الخطــوة الثانيــة

ابحث عن وسم  </head>

ضع قبله هذا الكود 

<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='معرف الحساب' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>  

مع استبدال معرف الحساب بمعرف حسابك على الفيس بوك 

وقمت بشرح طريقة استخراجه فى الموضوع السابق لهذا الموضوع

◄ باتمام الخطوات السابقة نكون قد نجحنا فى دمج التعليقات ►

وستظهر بهذا الشكل 

لذلك فنحن نحتاج لبعض أكواد الــ CSS لتنسيقها فقم بالتالى 

الخطـــــــــوة الثالثــــة

ابحث عن وسم 

]]></b:skin>
ضع قبله مباشرة هذا الكود

/* fd and blogger Comments */
.comments-page {
background-color:white;
border: 2px solid rgb(0, 122, 255);
border-radius: 8px;
}
#blogger-comments-page {
display: none;
padding: 0px 0px;
}
.comment-form {
margin: 10px;
}
.comments-tab {
color: #ffffff;
float: right;
padding: 5px;
margin-right: 7px;
cursor: pointer;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
.comments-tab img { height: 14px; width: auto; margin: 0px 3px;}
#blogger-comments,
#blogger-comments.inactive-select-tab:hover {
background-color: #dd7700;
background-image: linear-gradient(#E80, #C60);
background-image: -moz-linear-gradient(#E80, #C60);
background-image: -webkit-linear-gradient(#E80, #C60);
}
#blogger-comments.inactive-select-tab {
background-color: #cc6600;
background-image: linear-gradient(#cc6600, #aa4400);
background-image: -moz-linear-gradient(#cc6600, #aa4400);
background-image: -webkit-linear-gradient(#cc6600, #aa4400);
}
#fb-comments,
#fb-comments.inactive-select-tab:hover {
background-color: #3B5998;
background-image: linear-gradient(#6B89D8, #3B5998);
background-image: -moz-linear-gradient(#6B89D8, #3B5998);
background-image: -webkit-linear-gradient(#6B89D8, #3B5998);
}
#fb-comments.inactive-select-tab {
background-color: #1B3968;
background-image: linear-gradient(#3B5998, #1B3968);
background-image: -moz-linear-gradient(#3B5998, #1B3968);
background-image: -webkit-linear-gradient(#3B5998, #1B3968);
}
.inactive-select-tab {
background-color: #e2e2e2;
background-image: linear-gradient(#F4F4F4,#DDD);
background-image: -moz-linear-gradient(#F4F4F4,#DDD);
background-image: -webkit-linear-gradient(#F4F4F4,#DDD);
}

وستكون النتيجة النهائية للشرح هكذا

ثم قم بحفظ القالب
ومبروك عليك 
اتركك لتعاين تعليقاتك بنفسك

كلمة تعلق فى ذهنى 

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

◄ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق ►

من فضلك اضغظ لايك لمشاهدة لينك التحميل