حصريا طريقة دمج تعليقات الفيس بوك مع تعليقات بلوجر في تبويب واحد

الأربعاء، مارس 14، 2012
السلام عليكم ورحمة الله وبركاته . اليوم مع تدوينه حصريه بمعنى الكلمه في  المدونات العربيه . سوف نقوم في هذا الدرس البسيط والسهل بتطبيق اضافه انصح بها جميع من يستخدم تعليقات الفيس بوك في مدونته نظرا لما تمنحه تلك الاضافه من سرعه في تحميل الصفحه فهي اما ان تخفي تعليقات الفيس اثناء تحميل الصفحه او تخفي تعليقات بلوجر . وهذا الاختيار يرجع لك وستتعلم في السطور القادمه كيف تجعل تعليقات الفيس بوك هي التعليقات الافتراضيه في مدونتك حين دخول احد الزوار لموضوع ما مع اتاحة التنقل بكل سهوله الي وضع التعليق باستخدام الحسابات التي يوفرها صندوق تعليقات بلوجر . والعكس صحيح تستطيع جعل بلوجر الافتراضي والفيس الاختياري . بالنسبه للمدونات ذات التعليقات الكثيره بالطبع تعليقات الفيس حين تكون هي الافتراضيه سيجعل تحميل الصفحه سريع جدا ومثال على ذلك شاهد صفحة الدعم الفني في مدونتي من هذا الرابط     بها اكثر من 100 تعليق ومع ذلك يتم تحميلها بكل سهوله .. اضاف اليوم تغني في نفس الوقت عن الاضافه التي تقوم باخفاء واظهار التعليقات فحين التنقل بين تعليقات الفيس وبلوجر هذا بمثابة اخفاء واظهاء للتعليقات .
لرؤية مثال حي يمكنك مشاهدة نموذج التعليقات في تلك التدوينه  وتجربته لمن اراد .. الان ناتي للشرح :
الخطوه الاولى . انشاء تطبيق علي موقع فيس بوك وهي الطريقه الشهيره المتبعه لاضافه صندوق تعليقات الفيس بوك 
لكن لا تقم بتطبيق اي درس اخر غير الذي ساقوم بشرحه الان لان هناك اجزاء لن نحتاجها في الشروحات القديمه 
اولا قم بالذهاب الى هذا الرابط  developers.facebook.com/apps   وقم بانشاء تطبيق جديد ضع اسما من اختيارك للتطبيق وضع ارقام التحقق التي يطلبها منك بعدها ستنتقل لمرحله اخرى كما في الصوره

كما وضح من خلال الصورة ستدخل رابط مدونتك و رابط اسم النطاق الذي عليه مدونتك، مثلا blogspot.com لمدونات بلوجر التي لا تستعمل اسم نطاق خاص. كذلك ستكون قد نسخت معرف التطبيق الموضح في الصورة لانك ستحتاجه فيما بعد.
قم  بنسخ معرف التطبيق كما موضح في الصوره وانسخه في ملف نصي ثم   توجه في مدونتك إلى : تصميم > تحرير html > توسيع القالب (لا تنس أخذ نسخة قبل ذلك) . وابحث عن  <html ثم قم بوضع مسافه واحده فارغه بعده وضع الكود التالي
xmlns:fb='http://www.facebook.com/2008/fbml'
 وضع بعده مسافه هو ايضا . لا تتهاون في هذا الامر كى تنجح معك الاضافه.
ابحث مره اخرى عن هذا الوسم <body>  في قالبك وبعده مباشرة او اسفل منه ضع الكود التالي
<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> 
استبدل كلمة معرف التطبيق داخل الكود بارقام معرف التطبيق الخاص بك والتي نسختها في بداية الشرح كما هو موضح في الصوره .
ابحث مجددا عن </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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgoOHmLlxNuSwNSwLUKe5gTIBFx6dSXZuOvILkntNLWekgmKNY2JVh274HkOLLiOlXbEa-j2fhuy8dkhyphenhyphenE5EdbNNhkTFGCPCWg57TpMrqUWqLpCYzksYHgFh1OQ2npSbzbmjBbvwVVNE/s1600/mytqarobb.png'   property='og:image'/>
<meta content='معرف التطبيق'   property='fb:app_id'/>
<meta content='معرف بروفايلك الشخصي'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
 بعد لصق الكود كما وضحنا ستقوم بالتعديل عليه بتغيير مدون تقارب باسم مدونتك وتغيير معرف التطبيق بارقام معرف التطبيق التي تعلمناها في بداية الشرح . وتبديل معرف بروفايلك الشخصي  بارقام المعرف الخاص بملفك الشخصي على الفيس بوك
تستطيع الحصول على المعرف الخاص ببروفايلك الشخصي عن طريق تلك الطريقه 
انا على سبيل المثال رابط ملفي الشخصي على الفيس بوك كالتالي http://www.facebook.com/tqarob
مايهمنا في الرابط هو كلم tqarob اذن قم بالذهاب الي الرابط التالي  من هنا     واستبدل كلمة tqarob الموجوده في شريط التصفح باسمك الذي يظهر في رابط ملفك الشخصي سواء كان اسما مختصرا كما هو الحال عندي او ارقام طويله في حالة ان لم تكن قد اخترت وضع اسما مختصرا لملفك ع الفيس بوك . بعد وضع اسمك اضغط ENTER ستفتح لك صفحه بسيطه مايهمنا فيها هو نسخ الارقام الواقعه بين قوسين بعد تلك العباره  
"id": في اول الصفحه . قم بنسخ الارقام واستبدلها بجملة معرف ملفك الشخصي  داخل
الكود السابق ... ثم قم باستبدال رابط الصوره المعلم باللون الازرق بشعار مدونتك .
قبل ان ننتقل للجزء الثاني من الشرح انصح بحفظ التغييرات على القالب مادمت قد اخذت
 نسخه احتياطيه
منه لان بقية الشرح ستضطر لعمل معاينه بعد وضع الاكواد الاتي ذكرها بعد قليل وقد يقابلك
خطا في تطبيق الجزء الثاني من الشرح فحينها لا تضطر لاعادة الجزء الاول من جديد .
قم الان بالبحث في قالبك عن الوسم التالي  <head>  او هذا ]]></b:skin> وضع بعده مباشرة 
او اسفل منه الكود الموجود في الاسفل
<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'/>

ثم ابحث عن class='comments   او عن <div class='comments' id='comments'> وضع اسفل منه الكود التالي 
<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'> 
 ثم ابحث مره اخرى عن <head> وضع بعده مباشرة 
<meta content='معرف بروفايلك الشخصي' property='fb:admins'/> 
    <meta content='معرف التطبيق' property='fb:app_id'/>
قم باستبدال المتغيرات داخل الكود كما هو موضح وهي نفسها
 نفس ارقام المعرف الشخصي ومعرف التطبيق والذي تم التنويه عنهم في بداية الشرح
قم بمعاينة القالب ان لم تجد اخطاء قم بالحفظ ومبروك عليك الاضافه المتميزه .
ارجو من جميع من مر على هذا الموضوع سواء استفاد منه وقام بتطبيقه او لا بان يساهم
في دعم المدونه عن طريق الضغط على الشريط الازرق في يسار المدونه ومتابعة صفحتنا
على جوجل بلس والفيس بوك فهذا بالنسبه لي يعتبر اكبر تقدير ومقابل تقدمه للمدونه.
فكثرة تعليقات الشكر لا تسعدني بقدر ما اشعر بسعاده في الرد على استفساراتكم .
لذلك لا اعتبر عبارات الشكر والمديح دعما حقيقيا يدفعني للاستمرار على عكس شئ بسيط
 كاشتراكك في صفحة المدونه 
فهو قد يكون تافها بالنسبه لك لكن له اثر عميق في نفس من يكتب وينشر المواضيع 
 لذا لا تبخل بمتابعتك لنا واي استفسار
بخصوص الموضوع يرجا ترك تعليق بالاسفل سواء علي فيس بوك او بلوجر
 وساقوم بالرد علي جميع الاستفسارات 
وساقوم ايضا بتلقي طلبات تركيب الاضافه لمن يرغب في ذلك ممن يستعصي عليه تطبيق الشرح 
فقط قم بالرد هنا واخباري عن ارسالك رساله لبريدى التالي tqarobweblog@gmail.com . انتهى .
معلومات (عن الكاتب)
تعليقات (Facebook)
0تعليقات (Blogger)
كاتب الموضوع

0 التعليقات:

إرسال تعليق

إشترك تصلك التدوينات الجديده علي بريدك

تابع كل جديد برسالة الكترونيه لـ إيميلك فورا

تعليقات

 
القالب الجديد.نموذج بواسطة Josh Peterson تدعمه بلوجر.