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

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

* في هذا الدرس سوف نتعرف على  إضافة مهمة لأي مدونة ، وهي تعليقات الفيسبوك.

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

************************************************************************

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

*************************************************************************

مهم جدا :  سوف تجده مكرر مرتين ، لهذا ضع أسفل كل واحد منهما هذا الكود

*************************************************************************

  <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWvsb3d-pVeIKsBhyphenhyphenLfsYVmdpMRATMiAKGoSlzyGCn_ePoj82tFz-aJ-Bd4_kAfc6GnC7bnJmK3VdJ1T8ub9IdRgtTIlpFzOmoEmFEr9S73ySF-uWL_lP8MTJtEMnyo8k1mugZbxf7Zs/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(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgwqjllmQ5qfO-zEhXnOSfbezdUmQZZPQeDCU_ZIyhPSABwX5UJCPTWMkgSOMQGIDoEbrPT9Cuhcev_w6k0ekVhQ0JqGmyVUn8dZGzEnLKq-0ukT0NJHK_zUQ1NtcelIWu5kOhr9JeVE/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 == &quot;item&quot;'>
<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/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='potter182' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comakauttafb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).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>

*****************************************************************************************

قم بحفظ التغييرات , وبهذا يكون قد إنتهى الشرح أتمنى أنت يكون نال إعجابكم