أهلا وسهلا بك عزيزي الزائر في المدونة التعليمية للحاسوب فما رأيك بالقالب الجديد؟؟

درس شامل حول أفضل الطرق الصحيحة لإضافة تعليقات الفيسبوك إلى بلوجر


السلام عليكم ورحمة الله تعالى وبركاته

أسعد الله أيامكم إخوتي 

ومرحبا بكم في تدوينة أخرى جميلة ومفيدة

موضوعنا اليوم

درس شامل حول أفضل الطرق الصحيحة لإضافة تعليقات الفيسبوك إلى بلوجر


كما رأيتم تعليقات جميلة تتيح لكل من له حساب على الفيسبوك بالتعليق في مدونتك

وطبعا العديد من لديه حساب fb

المهم لنمر إلى الشرح الشامل والمفصل

وأضمن لكم ان هاته الطريقة مضمونة مئة بالمئة وعن تجربة

أولا أدخل إلى موقع الفيسبوك الخاص بالتطبيقات

    https://developers.facebook.com/apps

إضغط إلى إنشاء تطبيق Create New App


 ستظهر بعدها هاته الرسالة الخاصة بإنشاء التطبيق
 قم بملء الفراغات بإسم التطبيق الذي تريده 
وأحبذ أن يكون إسم مدونتك أو موقعك


بعدها ستظهر الـ Recapatcha أكتب كما في الصورة التي ستظهر لديك بعدها إضغط على متابعة


بعدها هنيئا لك بالتطبيق وما نحتاجه فقط هو الـ Apps ID


  1. المعرف الخاص بالتطبيق.
  2. الكود السري الخاص بالتطبيق.
  3. إسم التطبيق الظاهر.
  4. البريد الإلكتروني للتواصل.
  5. ستضع هناك إسم دومين موقعك أو مدونتك مثلا blogspot.com .
  6. لم أفهم ما عملها لكن دعها ممكًن فقط.
الآن والخطوة الاخيرة في إنشاء التطبيق بنجاح

إضغط على
Website With Facebook Login

ستظهر لك هاته الخانة ضع رابط موقعك كاملا كالتالي


الآن قم بحفظ التغييرات ومبروووك عليك التطبيق الخاص بإدراج التعليقات

الآن لنمر لكيفية إدراجه ببلوجر

توجه إلى لوحة تحكم مدونتك : تصميم > تحرير html > تنسيق القالب (لا تنس أخذ نسخة قبل ذلك)

إبحث عن

<html

وضع بعده هذا الكود مباشرة

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

ملحوظة : ضع مسافة بيس الكود الأول والثاني ليظهر كالتالي

<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog

قم بالبحث عن هذا الوسم

 <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>
 لاتنسى لصق المعرف ID الخاص بالتطبيق

    <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='المعرف الخاص بحسابك الشخصي بالفيس'   property='fb:admins'/>
    <meta content='article'   property='og:type'/>

  الآن قم بضبط كل ماهو ملون بما يناسبك

السؤال المطروح عند البعض هو كيف أحصل على المعرف الخاص بحسابي الشخصي

الجواب وهو حل بسيط ضع هذا الرابط وقم باستبدال YourProfile بحسابك أنت

https://graph.facebook.com/YourProfile
وبهذا ستجد المعرف الخاص بك وانسخه وقم بلصقه بمكانه في الكود الأول

الآن إبحث عن الوسم

</head>

وقم بلصق الكود السابق الذي ضبطته بما يناسبك

أخيرا قم بالبحث عن 

<data:post.body/>

وألصق بعده هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>  <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments migrated='1' expr:href='data:post.url'  expr:title='data:post.title' expr:xid='data:post.id' width='450'/>  </div> </b:if>

يمكنك تغيير عرض صندوق التعليقات بما يناسب موقعك عبر التغيير في العرض 450

ملحوظة : ستجد هذا الكود <data:post.body/> مكرر مرات عدة قم بوضع الكود السابق بعدهم كلهم إن لم يعمل معك في اول لحظة

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

إلى هنا نصل إلى نهاية الشرح وأرجوا أن اكون قد وفقت في الطرح :)

والسلام عليكم ورحمة الله تعالى وبركاته

آخر مقالات المدونة

هناك 43 تعليقًا:

  1. اخي كل ما اضع هذا الكود
    xmlns:fb='http://www.facebook.com/2008/fbml'
    بيجيب اشعار خطا ومش عارف اعمل ايه ادي الكود الذي في مدونتي قولي اعمل ايه


    ردحذف
  2. كلمني علي الفيس بوك علشان اوريك الكود بتاع مدونتي علشان التعليق رافض كود الهوتميل

    ردحذف
  3. هل وضعت مسافة بينه وبين وسم html> :-?

    ردحذف
  4. والله عزيزي لم تترك لي مجالا للتعبير عن فسبق و قلت لك ابدعت و ابدعت ثم ابدعت فصرت في القمة (h) (h) (h) (h) (h) (h) (h) (h) (h) (h) (h) (h) (h)

    ردحذف
  5. الله يبارك فيك أخي العزيز على كل تعليقاتك المشجعة والمحفزة لإتمام التدوين بمدونتنا والف شكر لك على المرور الطيب :)

    ردحذف
  6. لا داعي للشكر انا لم افعل شيئا سوى الرد انت من ابدع مش انا

    ردحذف
  7. ايوة اخي اسامة لقد وضعت

    ردحذف
  8. ما رأيك أن أركبه لك وإنشاء الله ينجح معاك وشكرا لكم على المرور الكريم

    ردحذف
  9. إما أن تعطيني القالب وأردجه فيه وأرى إن غشتغل أوتجعلني مشرفا لأعمل ذللك مباشرة ثم عندها إحذفني من المشرفين بمدونتك

    ردحذف
  10. شكرا اخي اسامة والله انا نفس مشكلة اخي كن محترف عطني ايميلك عشانك اضيقك مشرف في انتظارك

    ردحذف
  11. أهو الإيميل
    big2012barsa@gmail.com
    وأرجوا أن أفيدكم بالحل إنشاء الله :)

    ردحذف
  12. اخي اسامة شوف اعينك مشرف هات الايميل

    ردحذف
  13. اخي Mohammed al-dashan
    ايميلي اهو mmmmmhh10@gmail.com

    ردحذف
  14. لقد أعطيتك الإيميل في الرد السابق راجع التلعيقات في هذا الدرس وستجده

    ردحذف
  15. اخي انا بعت طلب ياريت تقبل

    ردحذف
  16. لقد قبلت الدعوة بس لما شفت مدونتك وجدت الحقوق راحت مع انك أقسمت لي بعدم حذفها ;(

    ردحذف
  17. اخي معلش نست خالص انت دلوقتي المدير غير الحقوق وارجوك سامحني ;((

    ردحذف
  18. مبرووك تعليقات الفيس بوك تم حل المشكلة ويمكنك حذفي الآن من قائمة المشرفين بمدونتك وأنا لم أعد أهثم للحقوق الخاصة بالقالب لأن العديد نسبه إلى نفسه إذا لامشكلة

    ردحذف
  19. اخي اسامة تمت دعوتك الى المدونة اتمنى تركيب الفيس بوك والله يعطيك العافية

    ردحذف
  20. أوك اخي قبلت الدعوة إجعلني مشرفا لأتحكم بالقالب وأضيف التعليقات :-d

    ردحذف
  21. لقد جعلتك مشرفا اتمنى تركيبه وشكرا جزيلا

    ردحذف
  22. العفو أخي هذا واجبي وإنشاء الله يعمل معك

    ردحذف
  23. أخي يجب أن ترسل لي الـ Apps ID الخاص بك

    ردحذف
  24. أوك لقد الوصل لي المهم لقد شغلت لك السلايدرشو :-d مبروك لك

    ردحذف
  25. شكرا لك جزيلا لكن تاكد الاي دي في رسالة الثانية لان الاول غلط

    ردحذف
  26. أوك سأرى ذلك وإنشاء الله تعمل لديك التعليقات

    ردحذف
  27. جميل أوى والله ماقصرت شرح جميل ومفصل :p

    ردحذف
  28. شكرا على المرور أخي وتعليقك المحفز لعملنا :)

    ردحذف
  29. أخي فيه مشكلة عندي ؟؟؟ بطبق كل الكلام دا بس مبيحصلش أي تغيير! ومش عارف فين المشكلة؟؟؟

    ردحذف
  30. هناك من قد يجد اكثر من 4 وسوم لهذا
    data:post.body
    لذلك يجب عليك أن تقوم بلصق الكود الذي ليه في كل الوسوم الثلاث او الأربع وواحد فيهم سيشتغل معك إن شاء الله :)

    ردحذف
  31. انا مش بعرف اكمل بعد التصميم ممكن تساعدنى

    ردحذف
  32. يمكنك الدخول إلى مجموعة لدينا على الفيس بكون لحل مشاكل المصممين وشكرا :)
    https://www.facebook.com/groups/149423218582654/

    ردحذف
  33. اخي هذه ليست احسن طريقة فأنا وجدت طريقة احسن و اسهل
    اتبع هذا الرابط و قم بادخال معلوماتك و اظغط على get code
    وسيعطيع كودين وارجة اخي ان تساعدني و تقول لي اين اضع هذه الاكواد
    https://developers.facebook.com/docs/reference/plugins/comments/

    ردحذف
    الردود
    1. جربت هذه الطريقه ولكن مشكلتها ان التعليقات نفسها تظهر لكل المواضيع :)))) اتبع طريقه الاخوه هنا فأنا جربتها و زبطت والحمدلله
      www.kilanijobs.com

      حذف

  34. رمضان كريم كل عام وانتم بخير

    http://www.arabie3lan.com الشيخ الروحاني

    ردحذف
  35. www.herzas.net - Domain Parking
    الشيخ الروحاني http://www.sheikhrohani.de/

    ردحذف
  36. شكرا جزيلا للشرح الرائع
    تمت الاضافه www.kilanijobs.com

    ردحذف

إذا أردت عزيزي الزائر إدراج فيديو من يوتوب بتعليق قم بالتالي
[youtube]رابط فيديو يوتوب هنا[/youtube]
كما يمكنك إدراج صورة عبر الكود التالي
[img]رابط صورتك هنا[/img]

جميع الحقوق محفوظة لمدونة المدونة التعليمية للكومبيوتر 2013

تصميم : بويردن