دليل المدون

2017-06-28

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

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

facebook-comment-box to blogger

  تتعدد أنظمة التعليقات التى تستخدم لمدونات بلوجر ، فهناك من يفضل إستخدام نظام التعليقات الإفتراضى لقوالب بلوجر ، والبعض الآخر يفضل تركيب تعليقات Google plus و آخرين يفضلون الإعتماد على نظام Disqus للتعليقات.
بالرغم من تعدد الإختيارات ، إلا أنه مازال معظم المدونين يعتمدون على صندوق تعليقات الفيس بوك لما له العديد من المميزات من أهمها:
  • أن معظم المستخدمين يمتلكون حسابات على الفيس بوك لذلك عند وجود صندوق تعليقات الفيس بوك أسفل تدويناتك يشجع الزائرين على ترك تعليق
  • أصبح صندوق تعليقات الفيس بوك يدعم إرفاق الصور داخل التعليق بعكس نظام بلوجر الإفتراضى.
  • يمكن لمحرك البحث جوجل الزحف لتعليقات الفيس بوك ، لذلك يمكن أن يكون من إحدى الأدوات التى تؤدى إلى فهرسة موقعك وظهورها بمحركات البحث.
  • كما أنه يساعد على نشر مواضيع المدونة على صفحة المعلق وذلك عند تفعيل النشر على صفحته على الفيس بوك. 
facebook-comment-box to blogger
ولكن ما يعيبه أنه يكون أثقل من نظام تعليقات بلوجر فى تحميل صفحات موقعك.

 خطوات تركيب تعليقات الفيس بوك:

 تندرج خطوات التركيب إلى :
  1. شق خاص بإنشاء تطبيق على الفيس بوك .
  2. شق خاص بتركيب الأكواد بقالب مدونتك على بلوجر
  3. كيفية إدارة تعليقات الفيس بوك وتفعيل الإشعارات
  4. إخفاء صندوق تعليقات بلوجر 
والآن مع بعض التركيز أثناء متابعة شرح الخطوات:

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

1- تحتاح فى البداية فتح حساب الفيس بوك للمطورين من هنا Facebook Developer
facebook-comment-box to blogger 
ثم الموافقة على الشروط
facebook-comment-box to blogger 
 2- قم بإنشاء تطبيق جديد بالضغط على Add a new app
facebook-comment-box to blogger
 ثم قم بإختيار إسم مناسب للتطبيق ثم إضغط Create App ID

facebook-comment-box to blogger
3-توجه إلى تبويب الإعدادات أو Basic Settings من الصفحة التالية ثم قم بملئ البيانات الخاصة بالتطبيق :
App Domains” : أكتب إسم النطاق مثلا condaianllkhir.com أو blogspot.com لمدونات بلوجر 
بعد ذلك إضغط على  “+Add Platform” ثم اختر “Website” ثم أكتب رابط موقعك كلمثال:
 http://www.condaianllkhir.com/
facebook-comment-box to blogger
إذا كان هناك بيانات إضافية يمكن إضافتها : مثل سياسة الخصوصية أو إتفاقية الإستخدام أو إختيار فئة و رفع صورة تعبر عن التطبيق.
قم بنسخ رقم معرف التطبيق :App ID الذى سنحتاجه فيما بعد.
4- توجه بعد ذلك إلى تبويب "App Review" وقم بتفعيل الخيار “Yes” لجعل التطبيق عام ويظهر لجميع المستخدمين.

facebook-comment-box to blogger
بذلك نكون قد انتهينا من إنشاء التطبيق الخاص بالتعليقات - نتوجه فى الخطوة التالية إلى الشق الخاص بتركيبه على قالب بلوجر.

ثانيًا: تركيب صندوق التعليقات إلى قالب بلوجر

1- توجه إلى لوحة تحكم بلوجر للمدونة ثم من تبويب "المظهر" قم بالإحتفاظ بنسخة إحتياطية من القالب.
2- إستخدم Ctrl+F فى الكيبورد للبحث عن الأكواد
ثم ابحث عن <html ثم بعده مباشرة أضف الكود الآتي :
xmlns:fb=’http://www.facebook.com/2008/fbml’
3- تأكد من إضافة مسافات قبل وبعد الكود ليصبح  الكود بهذا الشكل :
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

4- الآن ابحث عن <body> و بعده مباشرة ألصق الكود الآتي بعد استبدال معرف التطبيق بالأرقام التي نسختها في السابق
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: معرف التطبيق });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/ar_AR/all.js'
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
5- بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='عنوان المدونة' property='og:site_name'/>
<meta   content='رابط صورة شعار للموقع'   property='og:image'/>
<meta content='معرف التطبيق ID'   property='fb:app_id'/>
<meta content='معرف حسابك على فيسبوك ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

طبعًا أضف إلى الكود عنوان مدونتك ورابط صورة تعبر عن شعار موقعك.
إستبدل  'معرف التطبيق ID' : بــ App ID الذى قمت بنسخه من قبل فى الخطوات السابقة
إستبدل 'معرف حسابك على فيسبوك ID'  : بالرقم التعريفى الخاص بحسابك على الفيس بوك حتى تسطيع إدارة هذه التعليقات وتكون  Admin (إضغط هنا لمعرفة معرف التطبيق الخاص بحسابك )

6- ثم ابحث عن <data:post.body/> و بعده مباشرة ألصق الكود التالى: 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='600' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>
وهذا هو الكود المسئول عن مكان ظهور صندوق التعليقات بالموقع ، يمكنك إضافته فى المكان المناسب لك.
يمكنك تغيير عرض الصندوق بتغيير القيمة 600 بما يتناسب مع تصميم القالب الخاص بمدونتك.
يمكنك التعديل على لون القالب إلى اللون الغامق وذلك بإضافة colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

ثالثًا: كيفية إدارة تعليقات الفيس بوك على مدونتك:

1- فى البداية توجه إلى هذا الرابط
ثم قم بالتعديل على الإعدادات بالضغط على Setting

facebook-comment-box to blogger 
2- يمكن من خلال الإعدادات التحكم بترتيب التعليقات من الأقدم للأحدث أو العكس ، كما يمكن تفعيل تلقى الإشعارات وإمكانية إرفاق الصور
facebook-comment-box to blogger
3- يمكن أيضًا من تبويب Moderation Rules التحكم بعدد الأحرف التى يحتويها التعليق مع إمكانية تفعيل الغلق الأتوماتيكى للتعليقات بعد فترة محددة .
يمكن تفعيل خاصية الإشراف على التعليقات قبل ظهورها وذلك بالتأشير على " Yes" فى الخيار" Review comments"
facebook-comment-box to blogger
4- من تبويب Moderator يمكنك إضافة مشرفين آخرين على التعليقات:
facebook-comment-box to blogger

رابعًا: إخفاء صندوق تعليقات بلوجر الإفتراضى

إذا أردت الإكتفاء بنظام تعليقات الفيس بوك حتى لا تواجه ثقل تحميل الصفحة بسبب وجود أكثر من نظام للتعليقات، يمكنك إخفاء نظام تعليقات بلوجر الإفتراضى وذلك من خلال لوحة تحكم بلوجر ثم إتجه إلى تبويب إعدادات>> المشاركات والتعليقات والمشاركة
ثم قم بتفعيل وضع الإخفاء للتعليقات كما هو موضح بالصورة.

facebook-comment-box to blogger
**إذا واجهتك أى مشكلة لا تتردد بعرضها فى تعليق**
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 13 تعليقًا

  1. اختي عملت الشرح صح ولكن لم تظهر لي التعليقات
    https://waqy3.blogspot.com
    مدونه واقع التقنيه

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

      حذف
  2. اختي ظهر معي خطاء في اخدي السطور واعتقد انه السبب برجاء تعديل لي هنا ؟
    xmlns:fb=’http://www.facebook.com/2008/fbml’

    ردحذف
  3. ليه مش بيظهر اداة المشرف في الاضافة في المدونة -- ارجو الرد في اسرع وقت

    ردحذف
    الردود
    1. لابد وأن تكون مسجل الدخول على حسابك على الفيس بوك من خلال المتصفح المستخدم لعرض المدونة

      حذف
  4. شكراً جزيلاً على الشرح كانَ مفقيداً جدّاً
    وفقكم الله على ماقدمتموه

    ردحذف
  5. هناك مشكلة أن التعليقات تختفي عند عمل ريفرش للصفحة !!

    ردحذف
  6. السلام عليكم يعطيك العافية اولا على المجهود وارجو الرد على سؤالي بعد اتمام كل الخطوات بكل دقة واثناء معاينة المظهر تظهر الرسالة التالية حدث خطأ أثناء تحليل XML، في السطر 3، العمود 16: Open quote is expected for attribute "xmlns:fb" associated with an element type "html"
    مما يدل ان هناك مشكلة في الكود الاول فارجو التوضيح

    ردحذف
  7. شكرا لمتابعتكم

    @Omar Ashraf
    لم أواجه مثل هذه المشكلة من قبل سأطرح التعليق لعلى أجد الحل عند أحد متابعى الموقع

    @ALI YOUNES Official
    تأكد من نسخ الكود فى مكانه الصحيح مع مراعاة غلق الأقواس

    ردحذف
  8. نعم شكر كبير لك على المقال الجميل جداً
    صديقكم الدائم وسام

    ردحذف
  9. جزاكم الله خير يا دكتورة
    ماشاء الله شرح وافى ويحتاج لدقه وخبرة فى التنفيذ وتم عمله بحمد لله
    كل الشكر والتقدير لحضرتك ... وهذه مدونتى للمتابعه
    https://engnigm.blogspot.com/

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون