السلام عليكم ورحمة الله وبركاته . اليوم مع تدوينه حصريه بمعنى الكلمه في المدونات العربيه . سوف نقوم في هذا الدرس البسيط والسهل بتطبيق اضافه انصح بها جميع من يستخدم تعليقات الفيس بوك في مدونته نظرا لما تمنحه تلك الاضافه من سرعه في تحميل الصفحه فهي اما ان تخفي تعليقات الفيس اثناء تحميل الصفحه او تخفي تعليقات بلوجر . وهذا الاختيار يرجع لك وستتعلم في السطور القادمه كيف تجعل تعليقات الفيس بوك هي التعليقات الافتراضيه في مدونتك حين دخول احد الزوار لموضوع ما مع اتاحة التنقل بكل سهوله الي وضع التعليق باستخدام الحسابات التي يوفرها صندوق تعليقات بلوجر . والعكس صحيح تستطيع جعل بلوجر الافتراضي والفيس الاختياري . بالنسبه للمدونات ذات التعليقات الكثيره بالطبع تعليقات الفيس حين تكون هي الافتراضيه سيجعل تحميل الصفحه سريع جدا
اضافة اليوم تغني في نفس الوقت عن الاضافه التي تقوم باخفاء واظهار التعليقات فحين التنقل بين تعليقات الفيس وبلوجر هذا بمثابة اخفاء واظهاء للتعليقات .
الان ناتي للشرح :
الخطوه الاولى . انشاء تطبيق علي موقع فيس بوك وهي الطريقه الشهيره المتبعه لاضافه صندوق تعليقات الفيس بوك
دمج تعليقات الفيس بوك مع تعليقات بلوجر
لكن لا تقم بتطبيق اي درس اخر غير الذي ساقوم بشرحه الان لان هناك اجزاء لن نحتاجها في الشروحات القديمه
اولا قم بالذهاب الى هذا الرابط developers.facebook.com/apps وقم بانشاء تطبيق جديد ضع اسما من اختيارك للتطبيق وضع ارقام التحقق التي يطلبها منك بعدها ستنتقل لمرحله اخرى كما في الصوره
كما وضح من خلال الصورة ستدخل رابط مدونتك و رابط اسم النطاق الذي عليه مدونتك، مثلا blogspot.com لمدونات بلوجر التي لا تستعمل اسم نطاق خاص. كذلك ستكون قد نسخت معرف التطبيق الموضح في الصورة لانك ستحتاجه فيما بعد.
قم بنسخ معرف التطبيق كما موضح في الصوره وانسخه في ملف نصي ثم توجه في مدونتك إلى : تصميم > تحرير html > توسيع القالب (لا تنس أخذ نسخة قبل ذلك) . وابحث عن <html ثم قم بوضع مسافه واحده فارغه بعده وضع الكود التالي
xmlns:fb=’http://www.facebook.com/2008/fbml’
وضع بعده مسافه هو ايضا . لا تتهاون في هذا الامر كى تنجح معك الاضافه.
ابحث مره اخرى عن هذا الوسم <body> في قالبك وبعده مباشرة او اسفل منه ضع الكود التالي
[toggle title="شاهد الكود"]<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘معرف التطبيق’,
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(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>[/toggle]
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘معرف التطبيق’,
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(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>[/toggle]
استبدل كلمة معرف التطبيق داخل الكود بارقام معرف التطبيق الخاص بك والتي نسختها في بداية الشرح كما هو موضح في الصوره .
ابحث مجددا عن </head> وضع قبله مباشر الكود التالي
[toggle title="شاهد الكود"]<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=’http://1.bp.blogspot.com/-GuWpzhoDYq…mytqarobb.png’ property=’og:image’/>
<meta content=’معرف التطبيق’ property=’fb:app_id’/>
<meta content=’معرف بروفايلك الشخصي’ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>[/toggle]
<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=’http://1.bp.blogspot.com/-GuWpzhoDYq…mytqarobb.png’ property=’og:image’/>
<meta content=’معرف التطبيق’ property=’fb:app_id’/>
<meta content=’معرف بروفايلك الشخصي’ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>[/toggle]
بعد لصق الكود كما وضحنا ستقوم بالتعديل عليه بتغيير مدون تقارب باسم مدونتك وتغيير معرف التطبيق بارقام معرف التطبيق التي تعلمناها في بداية الشرح . وتبديل معرف بروفايلك الشخصي بارقام المعرف الخاص بملفك الشخصي على الفيس بوك
تستطيع الحصول على المعرف الخاص ببروفايلك الشخصي عن طريق تلك الطريقه
انا على سبيل المثال رابط ملفي الشخصي على الفيس بوك كالتالي http://www.facebook.com/tqarob
مايهمنا في الرابط هو كلم tqarob اذن قم بالذهاب الي الرابط التالي من هنا واستبدل كلمة tqarob الموجوده في شريط التصفح باسمك الذي يظهر في رابط ملفك الشخصي سواء كان اسما مختصرا كما هو الحال عندي او ارقام طويله في حالة ان لم تكن قد اخترت وضع اسما مختصرا لملفك ع الفيس بوك . بعد وضع اسمك اضغط ENTER ستفتح لك صفحه بسيطه مايهمنا فيها هو نسخ الارقام الواقعه بين قوسين بعد تلك العباره
“id”: في اول الصفحه . قم بنسخ الارقام واستبدلها بجملة معرف ملفك الشخصي داخل
الكود السابق … ثم قم باستبدال رابط الصوره المعلم باللون الازرق بشعار مدونتك .
قبل ان ننتقل للجزء الثاني من الشرح انصح بحفظ التغييرات على القالب مادمت قد اخذت
نسخه احتياطيه
منه لان بقية الشرح ستضطر لعمل معاينه بعد وضع الاكواد الاتي ذكرها بعد قليل وقد يقابلك
خطا في تطبيق الجزء الثاني من الشرح فحينها لا تضطر لاعادة الجزء الاول من جديد .
قم الان بالبحث في قالبك عن الوسم التالي <head> او هذا ]]></b:skin> وضع بعده مباشرة
او اسفل منه الكود التالي [toggle title="شاهد الكود"]<script src=’http://my-tqarob.googlecode.com/svn/trunk/jquery-latest.pack.js’/> <script src=’http://my-tqarob.googlecode.com/svn/trunk/jsCommentPages.js’/> <script src=’http://connect.facebook.net/ar_AR/all.js#xfbml=0′/>[/toggle]
ثم ابحث عن class=’comments او عن <div class=’comments’ id=’comments’> وضع اسفل منه الكود التالي [toggle title="شاهد الكود"]<div class=’comments-tab’ id=’fb-comments’ title=’عدد تعليقات الفيس بوك’>
<fb:comments-count expr:href=’data:post.url’/>تعليقات (فيس بوك)
</div>
<div class=’comments-tab’ id=’blogger-comments’ title=’عدد تعليقات بلوجر’>
<data:post.numComments/>تعليقات (بلوجر)
</div>
<div class=’clear’/>
</div>
<div class=’comments-page’ id=’fb-comments-page’>
<b:if cond=’data:blog.url != data:blog.homepageUrl’>
<div id=’fb-root’/>
<fb:comments expr:href=’data:post.url’ num_posts=’10′ width=’500′/>
</b:if>
</div>
<div class=’comments comments-page’ id=’blogger-comments-page’>[/toggle]
<fb:comments-count expr:href=’data:post.url’/>تعليقات (فيس بوك)
</div>
<div class=’comments-tab’ id=’blogger-comments’ title=’عدد تعليقات بلوجر’>
<data:post.numComments/>تعليقات (بلوجر)
</div>
<div class=’clear’/>
</div>
<div class=’comments-page’ id=’fb-comments-page’>
<b:if cond=’data:blog.url != data:blog.homepageUrl’>
<div id=’fb-root’/>
<fb:comments expr:href=’data:post.url’ num_posts=’10′ width=’500′/>
</b:if>
</div>
<div class=’comments comments-page’ id=’blogger-comments-page’>[/toggle]
ثم ابحث مره اخرى عن <head> وضع بعده مباشرة الكود التالي [toggle title="شاهد الكود"]<meta content=’معرف بروفايلك الشخصي’ property=’fb:admins’/> <meta content=’معرف التطبيق’ property=’fb:app_id’/>[/toggle]
قم باستبدال المتغيرات داخل الكود كما هو موضح وهي نفسها
نفس ارقام المعرف الشخصي ومعرف التطبيق والذي تم التنويه عنهم في بداية الشرح
قم بمعاينة القالب ان لم تجد اخطاء قم بالحفظ ومبروك عليك الاضافه المتميزه .
ارجو من جميع من مر على هذا الموضوع سواء استفاد منه وقام بتطبيقه او لا بان يساهم
في دعم المدونه عن طريق الضغط على الشريط الازرق في يسار المدونه ومتابعة صفحتنا
على جوجل بلس والفيس بوك فهذا بالنسبه لي يعتبر اكبر تقدير ومقابل تقدمه للمدونه.
فكثرة تعليقات الشكر لا تسعدني بقدر ما اشعر بسعاده في الرد على استفساراتكم .
لذلك لا اعتبر عبارات الشكر والمديح دعما حقيقيا يدفعني للاستمرار على عكس شئ بسيط
كاشتراكك في صفحة المدونه
فهو قد يكون تافها بالنسبه لك لكن له اثر عميق في نفس من يكتب وينشر المواضيع
لذا لا تبخل بمتابعتك لنا واي استفسار
بخصوص الموضوع يرجا ترك تعليق بالاسفل سواء علي فيس بوك او بلوجر
وساقوم بالرد علي جميع الاستفسارات
وساقوم ايضا بتلقي طلبات تركيب الاضافه لمن يرغب في ذلك ممن يستعصي عليه تطبيق الشرح
هل أعجبك الموضوع ؟
بقلم أيوب بولعيش
مدون مغربي مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النتالفيسبوك . تويتر . جوجل بلس
ليست هناك تعليقات:
إرسال تعليق