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

أكتوبر 06, 2015 omer mohamed

أحد ان لم تكن الإضافة الأكثر طلباً من متابعينا وهي إضافة نظام التعليقات المتعدد , والحقيقة ترددت كثيراً قبل طرح تلك الإضافة ولا اخفيكم سراً لم اكن اود ان اطرحها ^_^ ولكن ما العمل طلباتكم أوامر فعرضتها مع اصراري على نصيحتي السابقة في موضوع

 (تعرف على أنظمة التعليقات وإختيار نظام يتناسب مع مدونتك) 

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

 , لكن نظراً لكثرة الطلب عليها قررت أن اشرحها وهذا الشرح هو حصري لكن مدون نعم لست اول من يشرح الإضافة لكن أغلب الشروحات وجدتها معقدة بعض الشئ ويصعب التعامل معها فقررت صنع اضافة أسهل في التركيب لذلك هذا الشرح حصري

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

معاينة

<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

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

مشاركة