فى هذه التدوينة سأتطرق لطريقة تركيب تعليقات الفيس بوك التى اضحت جميع الشروحات على المواقع و المنتديات العربية غير كاملة او معظم الطرق لا تكون مناسبة مع كل القوالب
لكن هنا فى مدونة كراكيب لأول مرة حصرياً شرح كامل لتركيب التعليقات + امكانية مساعدتك فى حالة فشلت فى تركيبها
و انا اعدك بأنك لن تضطر لرجوع لأحد
كل ما عليك تنفيذ هذه الخطوات بأنتباه شديد
و يجب قراءة كل تفاصيل التدوينة بشدة حتى لا تقع فى أية أخطاء
الخطوة الأولى
نبذة عن الخطوة يجب عليك إنشاء تطبيق على الفيس بوك
الطريقة
بعدها سيظهر لك محتوى املأه فى الخانة الأولى بأسم التطبيق الذى تريد
على سبيل المثال نحن فى هذه التدوينة أسم التطبيق تعليقات كراكيب
و بعد إكمال البيانات اضغط متابعة
و حينها سيظهر لك مثل هذه الصورة فى الأسفل
يجب عليك نسخ هذا الرقم المحدد باللون الأحمر لأننا سنحتاجة فيما بعد
الرقم الذى تحت
App ID/API Key
توجه بعدها لـ Edit Settings لتعديل بعض النقاط الهامة
إذا كنت تستعمل نطاق بلوجر المجانى يجب عليك وضع blogspot.com فى خانة App Domains
و كتابة رابط مدوتك كامل فى خانة Site URL
و أخيراً و ليس أخراً للأنتهاء من هذه الجزئية يجب عليك النزول لأخر الصفحة و الضغط على حفظ التغييرات
الخطوة الثانية
نبذة عن الخطوة يجب عليك الذهاب إلى قالب المدونة من لوحة التحكم و تعديل بعض الأكواد اللازمة و يجب ايضاً أتخاذ الحذر و من الأفضل أتخاذ نسخة أحتياطية لقالب المدونة فى حين قمت بالخطوات بشكل خاطئ ، فحينها تستطيع العودة للقالب قبل التعديل مرة أخرى
الطريقة
أذهب لقالب المدونة و قم بالبحث عن هذا الكود <html
وبعده مباشرتاً أضف هذا الكود
xmlns:fb='http://www.facebook.com/2008/fbml'
الآن ابحث عن <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>
بعد ذلك ابحث عن </head> ثم قبله مباشرتاً الصق الكود الآتى
ولا تنسي أستبدال معرف التطبيق و معرف حسابك على الفيس بوك و عنوان المدونة
<b:if cond='data:blog.pageType == "item"'>
<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'/>
الخطوة الثالثة
نبذة عن الخطوة هذه الخطوة تحديداً هى التى تجعل الكثيرون ييأسون من الشروحات الموجودة لأنها يوجد بها أكثر من طريقة و كل طريقة تعتمد على قالب مدونتك ، فيجب عليك تجربة أحدى هاتين الطريقتين حتى ترى ظهور صندوق التعليقات بنجاح دون وجود أى مشاكل
الطريقة
ابحث عن <data:post.body/> و بعده مباشرتاً الصق الكود الآتى مع تعديل الرقم 560 حسبما ترى مناسباً لعرض مدونتك
فمثلاً إذا كانت مدونتك قالبها صغير قم بتقليل الرقم 560
<b:if cond='data:blog.pageType == "item"'>
<div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/>
</div>
</b:if>
و أضغط حفظ
و مبروك عليك تركيب الصندوق بنجاح
إذا لم تعمل معك هذه الطريقة فلا تقلق ابداً قم بالرجوع عن هذه الخطوة ، و قم ببعض التعديلات كما سترى الآن
ابحث عن <b:includable id='comment-form' var='post'> و بعده مباشرتاً الصق الكود الآتى مع تعديل الرقم 560 حسبما ترى مناسباً لعرض مدونتك
فمثلاً إذا كانت مدونتك قالبها صغير قم بتقليل الرقم 560
<b:if cond='data:blog.pageType == "item"'> <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments width='560' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1'/> </div> </b:if>
و أضغط حفظ
و مبروك عليك تركيب الصندوق بنجاح
الخطوة الرابعة
نبذة عن الخطوة هذه الخطوة تعد مجرد طريقة لمعرفة إذ ما كان يوجد تعليقات جديدة بالمدونة ام لا
الطريقة
قم بالولوج لهذا الرابط مع تغيير كلمة UR_App
برقم التطبيق الخاص بك و ستجد كل التعليقات التى سبق و تم كتابتها بهذا التطبيق
http://developers.facebook.com/tools/comments/?id=
UR_App
و إلى هنا أكون قد أنتهيت أخيراً من الشرح
فى حالة وجود أى مشاكل فى الشرح او وجود مشاكل فى تركيب الصندوق لا تتردد بوضع تعليقك و سأرد عليك فوراً و فى حالة أعجبك الشرح و أستفدت منه لا تبخل بمشاركته لأصدقائك ولا تكتم العلم
ولا تبخل ايضاً بوضع تعليقك لأنه يعنى لى الكثير و يساعدنى على تقديم كل ما هو مفيد يساهم فى أثراء المحتوى العربى عبر الأنترنت