في هذه التدوينة شأشرح لكم متابعينا كيفية زيادة صندوق التعليقات الخاص بالفيسبوك إلى مدونتك تتبع المراحل التالية
فالطريقة جد بسيطة:
التطبيق :
1- قم بتسجيل الدخول إلى لوحة التحكم الخاصة بك بلوجر.
2- بعدها قم بالتوجه إلى قالب ثم اختر توسيع القالب.
3- ابحث على الكود التالي بالضغط على ctrl+f.
<div class='comments' id='comments'>
سوف تجد الكود مكررة مرتين تحت كل واحدة ضع الكود التالي
<div class='comakauttafb-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKZBnYt1QlcOcdg6NFQ2dyC7OGVsh8rk_ABPxsW-JVjs2O_2vAzW2cAv4G0SrjfVwCbe9dXDiac8d0hlkyaNCR9SOb7M74hDfq2rL6smYTfMDo7i5cNQK2tkSl0v4sqxv2Wn3WVo9xf8/s1600/FACEBOOK.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRV3QxXiymZnSTRr7wJ9yu6tlOuOiHSFY4a7s82fd-znCjJPElIbki3d4Ig9eJupeUFNQbuVBv53VlDAKqVyApJ-SBkf2g1XYTexRR4Tax-TPHHRzgN8GGSRz2oLhZ-iBc22-u2IU0VMU/s1600/BLOGGER.png'/>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/>
</b:if>
</div>
<div class='comments comakauttafb-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='497272210334076' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comakauttafb-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comakauttafb-page").hide();
$(selectTab + "-page").show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab
{-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page
{background:transparent;);margin-top:8px;}#blogger-comments-page
{padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px
1px
#fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5s
ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s
ease-out}.comakauttafb-tab-icon
{height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover
{background:rgba(219,219,219,.8);}.inactive-select-tab
{background:rgba(255,255,255,.4);}.inactive-select-tab,
.comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKZBnYt1QlcOcdg6NFQ2dyC7OGVsh8rk_ABPxsW-JVjs2O_2vAzW2cAv4G0SrjfVwCbe9dXDiac8d0hlkyaNCR9SOb7M74hDfq2rL6smYTfMDo7i5cNQK2tkSl0v4sqxv2Wn3WVo9xf8/s1600/FACEBOOK.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRV3QxXiymZnSTRr7wJ9yu6tlOuOiHSFY4a7s82fd-znCjJPElIbki3d4Ig9eJupeUFNQbuVBv53VlDAKqVyApJ-SBkf2g1XYTexRR4Tax-TPHHRzgN8GGSRz2oLhZ-iBc22-u2IU0VMU/s1600/BLOGGER.png'/>
<data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comakauttafb-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/>
</b:if>
</div>
<div class='comments comakauttafb-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='497272210334076' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comakauttafb-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comakauttafb-page").hide();
$(selectTab + "-page").show();
}
</script>
<style type='text/css'>.comakauttafb-page, .comakauttafb-tab
{-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-left:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page
{background:transparent;);margin-top:8px;}#blogger-comments-page
{padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px
1px
#fff;color:#000;float:left;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5s
ease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s
ease-out}.comakauttafb-tab-icon
{height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover
{background:rgba(219,219,219,.8);}.inactive-select-tab
{background:rgba(255,255,255,.4);}.inactive-select-tab,
.comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px
#fff,1px 1px 5px #000}</style>
أخيرا قم بتغيير ما بداخل اللون الأخضر ليتناسب مع عرض مدونتك.
0