دمج تعليقات الفيس بوك مع تعليقات بلوجر 2014
بعد ان تحدثت عن تركيب تعليقات الفيس على على مدونات بلوجر على نظام الفيس
بوك 2014 فى الموضوع السابق فاليوم أقدم لكم شرح بسيط جدا لدمج تعليقات
الفيس بوك مع تعليقات بلوجر فى تبويبين متجاورين بشكل جديد وجميل وهذه
الخاصية قمت بتطبيقها فى مدونتى منذ حوالى أسبوع فوجدت كمًا هائلًا من
التعليقات من متتبعينا الكرام يطلبون شرحًا لها فقررت فى البداية عمل شرح
مفصل عن تركيب تعليقات الفيس بوك على نظام الفيس بوك 2014
وفى هذا الموضوع شرح لطريقة دمج التعليقات
اذهب للوحة التحكم >> القالب >> تحرير HTML
الخطـــــوة الأولى
ابحث عن
<div class='comments' id='comments'>
ربما تجد هذا الجزء مكرر أكثر من مرة فى مدونتك
فأسفل كل جزء ضع هذا الكـــــــود
<div class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
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("#blogger-comments");'
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 == "item"'>
<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);
}
وستكون النتيجة النهائية للشرح هكذا
ثم قم بحفظ القالب
ومبروك عليك
اتركك لتعاين تعليقاتك بنفسك
كلمة تعلق فى ذهنى
سوف تجد أكثر من طريقة لدمج تعليقات الفيس بوك بتعليقات بلوجر ولكن تحدث
أخطاء فى التنفيذ ولكن بهذه الخطوات وهذاالشرح التحليلى لكل خطوة على حدة
فلن تواجه أدنى صعوبة فى التركيب لذلك كان التميز فى مدونة ابداعاتى
◄ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق ►
إرسال تعليق