مدونة امين

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

مرسلة بواسطة Unknown يوم 25 يناير 2014 0 التعليقات
السلام عليكم ورحمة الله


أقدم لكم شرح اضافة تعليقات الفايس بوك الى المدونة، حيث توفر للزوار خيارات متعددة للتعليق من خلال تعليقات المدونة او صندوق تعليقات الفيسبوك. يرجى اتباع الخطوات البسيطة التالية : 

 -  إنشاء تطبيق على الفايس بوك

  1. إذهب الى صفحة فايس بوك المطورون
  2. قم بادخال اسم المدونة والرابط


  3. اضغط على Creat app
  4. بعدها ستظهر لنا هذه الصفحة نقوم بنسخ الكود بجانب  App ID



  5. الآن في الصفحة نفسها انقر على الرابط في الزاوية العلوية "Developer Dashboard"
  6. في النافذة التي ستظهر انقر على  Edit Settings


  7. في Site Domain اكتب blogspot.com


  8. انقر على Save Changes ثم انتقل للمرحلة الثانية من الشرح

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

  1. اذهب إلى المدونة > تصميم > تحرير HTML
  2. ابحث عن <html ومباشرة بعدها أضف مساحة وأضف الكود التالي

xmlns:fb='http://www.facebook.com/2008/fbml'

  3. الآن قم بالبحث على <body>
      ملاحظة: في بعض القوالب الجديدة قد تجد الكود على الشكل التالي
      <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
    أضف تحته مباشرة هذا الكود

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>

 * استبدل YOUR_APP_ID مع App ID الذي قمت بحفظه في المرحلة الأولى من الشرح.
  5. قم بالبحث عن </head> وفوقه مباشرة أضف الكود التالي

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='AmineBlog' property='og:site_name'/>
<meta content='Image-Link' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/' property='fb:admins'/>
<meta content='article' property='og:type'/>

 * قم بعمل التغييرات التالية:
     - استبدل AmineBlog باسم مدونتك
     - استبدل Image-Link برابط صورة مدونتك
     - استبدل YOUR-ADD-ID بالكود الذي قمنا بحفظه سابقا
     - استبدل http://www.facebook.com برابط بروفايلك على الفايس بوك
  6. قم بالبحث عن <b:includable id='comment-form' var='post'>
     تحتها مباشرة قم باضافة الكود التالي

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='AmineBlog' href='http://www.amineblog.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='AmineBlog'>Amineblog.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>

 * يمكنك تعديل أبعاد صندوق التعليقات بالتغيير في قيمة width بما يناسب مدونتك
  7. قم بحفظ التغييرات ومبروك عليك صندوق تعليقات الفايس بوك
  
التسميات:

0 التعليقات:

إرسال تعليق