إضافة تعليقات بلوجر والفيسبوك جنبا إلى جنب



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






شرح التركيب :

قم بأخذ نسخة احتياطية وقم بحذف أي كود متعلق بتعليقات الفيسبوك إذا كنت تستخدمها


من تحرير HTML قم بتوسيع قوالب عناصر واجهة المستخدم وابحث عن :

كود PHP:
<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='2' width='580'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
الآن ابحث عن 
</head> وأضف قبلها الكود التالي مع تغيير معرف الحساب :


كود PHP:
<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>  
الآن ابحث عن ]]></b:skin> وأضف قبلها :

كود PHP:
.comments-page background-color#f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab floatrightpadding5pxmargin-left3pxcursorpointerbackground-color#f2f2f2;}.comments-tab-icon height14pxwidthautomargin-left3px;}
.
comments-tab:hover background-color#eeeeee;}.inactive-select-tab background-color#d1d1d1;}  
ابحث عن <html أضف بعده مباشرة الكود التالي :
كود PHP:
xmlns:fb='http://www.facebook.com/2008/fbml'  


ليصبح الكود هكذا :
كود PHP:
<html xmlns:fb='http://www.facebook.com/2008/fbml'  


الآن ابحث عن وأضف <body> بعده مباشرة الكود التالي مع تغيير معرف التطبيق :
كود PHP:
<div id='fb-root'/>
<
script>window.fbAsyncInit = function() {
    
FB.init({xfbmltrueappIdمعرف التطبيق });
  };
  (function() {
    var 
document.createElement('script'); e.async true;e.src document.location.protocol +
      
'//connect.facebook.net/ar_AR/all.js'
    
document.getElementById('fb-root').appendChild(e);
  }());
</script>  
 المصدر 

تعليقات

المشاركات الشائعة من هذه المدونة

كود المساحات الاعلانيه الرائع

طرق جلب الزوار الجزء الثاني

أكواد HTML مهمة لكل مدون بلوجر