اضافة تعليقات فيسبوك 2015 في بلوجر

من خلال تركيب تعليقات الفيسبوك على بلوجر فأنت تسمح للآخرين أو زوار المدونة بالتعليق على المواضيع باستخدام حساب الفيسبوك الخاص بهم. و هنا تستفيد من مشاركت التعليقات مع الاصدقاء عن طريق تغذية الفيسوك. و بسبب التحديثات الكثيرة التي جرت مؤخرا في فيس بوك, فاصبح صندوق تعليقات فيسبوك القديم بدون اي فائدة على مدونات بلوجر لذلك يجب عليك تحديث الاكواد و تركيب النظام الجديد الذي سوف نطرحه في هذا الدرس على مدون محترف. لأن فيسبوك أعلنت إن دعم النسخ القديمة سوف ينتهي في 23 يونيو 2015. و من لا يملك تعليقات فيس بوك في مدونته على بلوجر فيمكنه إتباع الدرس التالي و تركيب صندوق التعليقات الجديد, و هو متجاوب مع جميع الشاشات لذلك ركز جيدا في الشرح.

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

ابحث عن الوسم </body> و اضف الكود التالي تحته, وإذا كان موجود الكود القديم امسحه و اضف هذا

 <div id="fb-root"></div>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

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

يجب عليك إضاقة كود CSS من أجل إخفاء تعليقات بلوجر و إظهار تعليقات فيسبوك ابحث عن الوسم ]]></b:skin>

و اضف الكود التالي فوقه

 .fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0 15px!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#comments{display:none!important}

 إعدادات الكود السابق

قم بتغيير رقم 15px و هو الخاص بالبعد بين التعليقات داخل المواضيع

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

قم بنسخ الكود التالي اولا

<b:includable id='fb-comments' var='post'>
<div class="fb-comments" id="fb-comment" expr:data-href='data:post.url' data-numposts="5"></div>
</b:includable>

بعد نسخ الكود السابق ابحث عن الكود التالي

<b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>

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

            <b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>
            <b:includable id='fb-comments' var='post'>
            <div class="fb-comments" id="fb-comment" expr:data-href='data:post.url' data-numposts="5"></div>
            </b:includable>

الخطوة الرابعة

قم بنسخ الكود التالي <b:include data='post' name='fb-comments'/> ثم ابحث عن الكواد التالي و قم بلصقه كما في الكود التالي

              <b:includable id='main' var='top'>
............
............
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='fb-comments'/>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='fb-comments'/>
          <b:include data='post' name='comments'/>
        </b:if>
............
............
</b:includable>

او على النحو التالي في قوالب بلوجر الافتراضية

         <b:includable id='main' var='top'>
............
............
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='fb-comments'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
............
............
</b:includable>

لعرض عدد التعليقات استخدم الكود التالي

 <a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> comments</a>

و أخيرا قم بحفظ القالب و ادخل على احد مواضيع مدونتك و انظر إذا التعليقات هل تم إستبدال تعليقات بلوجر بصندوق تعليقات فيس بوك او لا. اي سؤال او استفسار لا تترد بوضعه في تعليق.