مساحة إعلانية

الأربعاء، 7 أكتوبر، 2015

الأربعاء، 7 أكتوبر، 2015

دمج أنظمة التعليقات بلوجر فيسبوك Disqus

Multi Comments Systems Blogger Facebook and Disqus
أحد ان لم تكن الإضافة الأكثر طلباً من متابعينا وهي إضافة نظام التعليقات المتعدد , والحقيقة ترددت كثيراً قبل طرح تلك الإضافة ولا اخفيكم سراً لم اكن اود ان اطرحها ^_^ ولكن ما العمل طلباتكم أوامر فعرضتها مع اصراري على نصيحتي السابقة في موضوع
أن هذه الإضافة تعتبر ثقيلة وطبعا يمكنك التعرف أكثر على اسباب نصحي بعدم تركيبها بقراءة الموضوع السابقة
 , لكن نظراً لكثرة الطلب عليها قررت أن اشرحها وهذا الشرح هو حصري لكن مدون نعم لست اول من يشرح الإضافة لكن أغلب الشروحات وجدتها معقدة بعض الشئ ويصعب التعامل معها فقررت صنع اضافة أسهل في التركيب لذلك هذا الشرح حصري
قم بتركيب الأكواد بطريقة مضبوطة وستكون كافية لتعمل الإضافة بإذن الله وتوزيع الاكواد سهل بدلا من التعقيد الموجود في بعض الشروحات
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $("#tabs").tabs();
});
</script>

/*Cnmu Multi Comments widget*/
#tabs {
  background-color: #fff;
  box-shadow: 0 0 0 1px #ddd inset;
  margin: 0 0 20px;
  padding: 0 0 10px;
}
.cnmu-multicomm {
  background-color: #555;
  display: block;
  height: 32px;
  line-height: 32px !important;
  list-style: outside none none;
  margin: 0 0 10px !important;
  overflow: hidden;
  padding: 0 !important;
}
.cnmu-multicomm li {
  float: right;
  margin: 0 !important;
  padding: 0 !important;
  width: 33.3%;
}
.cnmu-multicomm li a {
  color: #fff;
  display: block;
  float: right;
  height: 100%;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.ui-tabs-active.ui-state-active .blogger-comm {background-color: #fc5400;}
.ui-tabs-active.ui-state-active .fb-comm {background-color: #3f5c9a;}
.ui-tabs-active.ui-state-active .dis-comm {background-color: #229CFF;}
إن قمت بحذف أحد الانظمة إجعل هذا الرقم 33.3 50

الكود الثالث هو الذي يحتاج تركيز في تركيبه

ابحث عن الكود التالي <b:includable id='comments' var='post'>
قد تجده كما في الصورة

لاحظ السطر كاملا حدده واستبدله بالكود التالي وسنسميه كود العملية

<b:includable id='comments' var='post'>
<div id='tabs'>
<ul class='cnmu-multicomm'>
<li><a class='blogger-comm' href='#tabs-1'>بلوجر</a></li>
<li><a class='fb-comm' href='#tabs-2'>فيسبوك</a></li>
<li><a class='dis-comm' href='#tabs-3'>Disqus</a></li>
</ul>
<div style='margin:0 10px;'>
<!-- تعليقات بلوجر -->
<div id='tabs-1'>
 <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
      <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
    </div>
    </div>
  </div>
</div><!-- نهاية تعليقات بلوجر -->
<!-- تعليقات فيس بوك -->
<div id='tabs-2'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1' width='100%'/>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
    FB.init({xfbml: true, appId: xxxxxxxxxx });
  };
  (function() {
    var e = document.createElement(&#39;script&#39;); e.async = true;
    e.src = document.location.protocol +
      &#39;//connect.facebook.net/ar_AR/all.js&#39;
    document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
</script>
</div>
<!-- نهاية تعليقات فيس بوك -->
<!-- تعليقات Disqus -->
<div id='tabs-3'>
  <div id='disqus_thread'/>
    <script type='text/javascript'>
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = &#39;cnmu&#39;; // required: replace example with your forum shortname

        /* * * DON&#39;T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;
            dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/embed.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>

 <script type='text/javascript'>
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = &#39;cnmu&#39;; // required: replace example with your forum shortname

    /* * * DON&#39;T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement(&#39;script&#39;); s.async = true;
        s.type = &#39;text/javascript&#39;;
        s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
        (document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
    }());
    </script>
</div>
<!-- نهاية تعليقات Disqus -->
</div>
</div>
</b:includable>
كرر نفس العملية مع هذا الكود  <b:includable id='threaded_comments' var='post'>

لكن فقط استبدل السطر الأول في كود العملية هذا
<b:includable id='comments' var='post'>
بهذا
<b:includable id='threaded_comments' var='post'>

توضيحات

كما تلاحظ كل منطقة انا واضع تعليق توضحي لها بحيث ان اردت حذف أى نظام من الأنظمة
تحذف من بداية الكود الى نهاية وتحذف أيضا السطر الخاص به في البداية انا علمت السطور بثلاثة الوان
فمثلا لو اردت نظام فيسبوك وDisqus تحذف منطقة بلوجر وسطر بلوجر المعلم بالبرتقالي
وتعدل الأرقام فستجد ثلاث ارقام للأنظمة ان حذفت واحد تجعل النظامين الباقيين بالرقمين 1 -2 فلا نحتاج 3
ويمكنك ايضاً تبديل ترتيب الأنظمة ان اردت بنقل كود النظام كاملا مع تغيير ترتيب الأرقام ايضاً
الكلمة xxxxxxxxxx تستبدلها بمعرف تطبيق فيس بوك
لمعرفة طريقة انشاء التطبيق والحصول على المعرف من الموضوع التالي طبعا انت لن تقوم بالخطوات التي في الموضوع كلها انت فقط ستنشئ التطبيق وتحصل على المعرف

الموضوع الشامل حول تعليقات فيس بوك

أيضاً فيما يخص تعريفات الفيس بوك اضف الكود التالي بعد الوسم <head>
 <meta property="fb:app_id" content="{معرف التطبيق}"/>
<meta property="fb:admins" content="{معرف الحساب}"/>
استبدل معرف التطبيق بنفس المعرف المطلوب سابقاً ومعرف الحساب ستجد في الموضوع السابق أيضاً طريقة الحصول عليه
اسم مدونتي مكرر مرتين باللون الزهري cnmu استبدله بمعرف Disqus
للحصول على المعرف هذا الموضوع سيفيدك

انشاء ركن أسئلة او سجل للزوار عبر تعليقات DISQUS

ولا تنسى أخذ نسخة احتياطية من قالبك
تحياتي

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

  1. الردود
    1. تشرفت بمرورك أخي مهدي
      تحياتي

      حذف
  2. شرح مميز اخى عمرو دائما شكرا لما تقدمة لنا حتى وإن كنت اعرف الموضوع لك نكهتك الخاصة بكتابة الموضوع

    ردحذف
    الردود
    1. ربي يعزك أخي أحمد ودائما ما تنير الموضوع بمرورك يا طيب

      حذف
  3. شكرااااااا علي الموضوع الرائع

    ردحذف
    الردود
    1. أهلا بك يا طيب وسرني مرورك

      حذف
  4. جميل جدا شكرا لاتخرمنا من مواضيعك الشيقة

    ردحذف
  5. ومالها تعليقات بلوجر انا لما شوفت شرح دة قولت مش هستخدم غير بلوجر في المواضيع و Disqus في ركن الاسئلة وبس

    ردحذف
    الردود
    1. وهذا ما ننصح به يكفي نظام واحد للتعليقات المهم اختيار النظام المناسب لمدونتك
      وبالتوفيق

      حذف
  6. يرجى الرد على مشكلتي : عندما ركبت هذه التعليقات نجحت 100% ولكن واجهتني مشكلة صغيره جدا
    أنــا دائما الغي التعليقات في الصفحات الثابته ولكن حين أضفت هذه التعليقات لم يعد بأمكاني أيقاف التعليقات فتحى لو أقفلت تعليقات بلوجر تظهر تعليقات الفيس بوك و Disqus
    ارجوا المساعدة !!

    ردحذف
    الردود
    1. التعليقات المدمجة لا تقبل التعامل من لوحة التحكم الذي يقبل فقط هو نظام بلوجر المنفرد هناك حل واحد وهو الغائها من جميع الصفحات الثابت بالكود التالي يضاف فوق الوسم </head>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style>
      #tabs { display: none;}
      </style>
      </b:if>

      حذف
  7. شكرا لك أخي عن الشرح وشكرا على المجهد الذي تبدله

    ردحذف
    الردود
    1. لمذا يضهر موقعك بعد البحث عن مونتي في محرك البحث ارج لاجابه اكنا هذا مخطط مسبق... ارجو الاجابه

      حذف
    2. ما علاقة موقعي بالبحث عن مدونتك اخي الكريم ؟
      وكيف يكون مخطط له ؟
      ربما فقط تكون مثلا انت اضفت اسم مدونتك في تعليقات موقعي وصفحات موقعي أرشفتها قوية فلو لم يكن موقعك بنفس قوة الأرشفه ربما تتقدم عليه نتائج موقعي مؤقتاً لحين تقوى ارشفة موقعك وتتصدر النتائج

      حذف
  8. السلام عليكم ورحمة الله وبركاتة
    اخى الكريم الشرح اكثر من رائع
    ولكن لى استفسار بسيط بجد
    مش فاهم اخر حاجة الا هية فى الصورة ممكن شرح مبسط ليها
    http://prntscr.com/afipg1
    ولك جزيل الشكرا

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      ستبحث اخي عن الكود الثاني وتستبدل أيضاص الاكواد بنفس الطريقة كما في المرة الأولى
      لكن فقط هذه المرة عدل اول كود في الأكواد المستبدله
      بهذا
      <b:includable id='threaded_comments' var='post'>

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©