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

السلام عليكم ورحمة الله وبركاته .اليوم مع هذا الموضوع الحصري المقدم من طرف موقع تعلم أكثر للمعلومبات . سوف نقوم في هذا الدرس بشرح طريقة دمج تعليقات الفيس بوك ، تعليقات بلوجر و تعليقات صندوق Disqus في تبويب واحد و بالطريقة بسيطة وسهلة التطبيق . اضافة هذا التبويب يمكن الزائر من إختيار التعليق المناسب إما بالستعمال الفايسبوك ، غوغل أو تعليقات Disqus . لذلك أنا انصح بها جميع من يستخدم تعليقات الفيس بوك و تعليقات البلوجر في مدونته نظرا لما تمنحه هذه الاضافة من سرعة تحميل المدونة . فهي تخفي سواء تعليقات الفيس أو تعليقات بلوجر او Disqus خلال تحميل صفحة على مدونة . وهذا ما يعطي شكل احترافي على صندوق التعليقات في مدونتك .

الآن نمر لتطبيق الإضافة على المدونة :

1. تسجيل الدخول على حسابك في بلوجر. وحدد المدونة الخاصة بك.

2. إذهب إلى قالب . ثم تحرير HTML 

3. إبحث باستعمال    Ctrl+F   عن 

</head>

4. فوق </head>  ضع الكود التالي ;

<meta content='umeshtarsariya' property='fb:admins'/>
<meta content='3840756250xxxxx' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://tipsviablogging.github.io/tvbcommentstyle.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

5. استبدال umeshtarsariya  باسم المستخدم الخاص بك على  الفيسبوك .
   استبدال 3840756250xxxxx بالمعرف التطبيق الخاص بحسابك على الفيسبوك .

6. ابحث عن   

<div class='comments' id='comments'>

  قد تجد الكود مكرر مرتين . لذلك أضف الكود التالي بعد كل واحد  "تحته" .

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='js-default-tab comments-tab' id='blogger-comments' title='Comments from Blogger'>
        <data:post.numComments/>
            Comments
            </div>
            <div class='comments-tab disqusbutton' id='disqus-comments' onclick='load_disqus()' title='Comments with Disqus'>
            <a alt='submit' class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + &quot;#disqus_thread&quot;' style='text-decoration: none; color: #ffffff'/>
            Disqus
            </div>
            <div class='comments-tab' id='fb-comments' title='Comments made on Facebook'>
            <fb:comments-count expr:href='data:post.url'/>
            Fb Comments
            </div>
            <div id='get-this' style='float: Right' title='Get This Comments Plugins'>
                          <a href='http://www.tipsviablogging.com/2013/07/facebook-disqus-tab-in-blogger.html' style='text-decoration: none;' target='_blank'>
                            <span style='color: #999999;'>
                              [Get It]
                            </span>
                          </a>
                        </div>
                      </b:if>
                      <div class='clear'/>
                    </div>
                    <div class='comments-page' id='disqus-comments-page'>
                      <div id='disqus_thread'/>
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <div id='disqus_thread'/>
                        <div id='disqus_loader' style='text-align: center'>
                          <script>
                            function load_disqus()     {       var dsq = document.createElement(&#39;script&#39;); dsq.type = &#39;text/javascript&#39;; dsq.async = true;       dsq.src = &quot;http://hukmat.com.disqus.com/embed.js&quot;;       (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(dsq);       var ldr = document.getElementById(&#39;disqus_loader&#39;);       ldr.parentNode.removeChild(ldr);     }   </script>
                        </div>
                      </b:if>
                </div>
                <div class='comments-page' id='fb-comments-page'>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <fb:comments-count expr:href='data:post.url'/>
                <b>
                Comments :
                </b>
                <br/>
                <br/>
                <fb:comments expr:href='data:post.url' num_posts='10' width='600'/>
                </b:if>
           </div>
     <div class='comments comments-page' id='blogger-comments-page'>

7.  مع استبدال hukmat.com بإسم المستخدم على صندوق Disqus  .
    و 10 بالعدد التعليقات في الصفحة .
    و 600 بالعرض الصندوق  .
لمن لا يعرف جلب اسم المستخدم في Disqus

كيفية اضافة صندوق تعليقات Disqus

8. والآن إلى آخر عملية . إبحث عن     </body>     وضع الكود التالي فوقه  مباشرة ;

<script type='text/javascript'>
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = &#39;Disqus-Site-Name&#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>

9. استبدل Disqus-Site-Name بإسم المستخدم على  Disqus .

مبروك عليك . لا تترددوا في وضع استفساراتكم وارائكم . دمتم في أمان الله

مقالات ذات صلة