Tích hợp comment Facebook, Google và Disqus vào Xenforo không cần dùng add-on

[PVS]

Tích hợp comment Facebook, Google và Disqus vào Xenforo không cần dùng add-on

Thường thì khi cần dùng đến những cái này thì bạn sẽ sử dụng add-on Brivium - AIO Social Comment. Nhưng vấn đề là có nhiều người lại không thích sử dụng add-on. Nên đây là cách để các bạn tích hợp được mà không cần đến add-on

Demo:

​

B1: Vào template message, tìm:

<xen:include template="ad_message_below" />

Thêm vào dưới đoạn code sau:

<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">


        <div class="commentTabs comment">

            <input id="tabFacebook" type="radio" name="radio-set" class="tabSelectorFacebook" checked="checked">
            <label for="tabFacebook" class="tabLabelFacebook">
   
Facebook</label>


            <input id="tabGoogle" type="radio" name="radio-set" class="tabSelectorGoogle">
            <label for="tabGoogle" class="tabLabelGoogle">
   
Google +</label>


            <input id="tabDisqus" type="radio" name="radio-set" class="tabSelectorDisqus">
            <label for="tabDisqus" class="tabLabelDisqus">
   
Disqus</label>

        <div class="clear-shadow"></div>

        <div class="contentTab">
 
                <div class="tabFacebook">
                   
                    <div class="fb-comments"
                        data-href="{$contentLink}"
                        data-width="{$facebook.width}"
                        data-numposts="{$facebook.num_posts}"
                        data-colorscheme="{$facebook.scheme}">
                    </div>
               </div>
 
 
                <div class="tabGoogle">
                   
<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="{$contentLink}"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>
                  </div>
 
 
                <div class="tabDisqus">
             
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{$disqus.short_name}'; // required: replace example with your forum shortname
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
           
                </div>
 
        </div>
    </div>


        </xen:if>

B2: Vào template EXTRA.css và thêm đoạn sau:

/*Responsive FB*/
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
/* --- BRAIOSC_style.css --- */
        div[id^='___comments_'], div[id^='___comments_'] iframe {
            width: 100% !important;
        }

.commentTabs{
    max-width:100%;
    margin:0 auto;
    position:relative;
    clear: both;
    padding-top:0px;
}
.commentTabs h3 {
    font-size:15px;
    background: #C0392B;
    color: #fff;padding: 0 20px;
    margin: 0 -24px;
}
.commentTabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.commentTabs label{
    display:block;
    float:left;
    position:relative;
    padding:10px 20px;
    line-height:1.5em;
    min-width:55px;
    text-align:center;
    color: #222;
    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
    cursor:pointer;
}
.commentTabs label:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    background:#fff;
    left:0;
    bottom:-5px;
}
.clear-shadow{
    clear:both;
}
.contentTab{
    position:relative;
    width:100%;
    border-top: 1px solid #DDD;
    padding-top: 10px;
    margin-top:-1px;
}
.contentTab>div{
    overflow:hidden;
    top:0;
    left:0px;
    opacity:0;
    display:none;
    transition:opacity .4s;
    -moz-transition:opacity .4s;
    -webkit-transition:opacity .4s;
    -ms-transition:opacity .4s;
    -o-transition:opacity .4s;
}

.commentTabs input:checked + label{background: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/yf/r/PfBgtiydy5U.gif) no-repeat bottom center;z-index:1}
.commentTabs input.tabSelectorFacebook:checked ~ .contentTab .tabFacebook,
.commentTabs input.tabSelectorGoogle:checked ~ .contentTab .tabGoogle,
.commentTabs input.tabSelectorDisqus:checked ~ .contentTab .tabDisqus{
opacity:1;display:block;
}

Lưu ý:

1. Code đã tích hợp các hàm của Xenforo nên không cần đổi tên miền nữa!
2. Vẫn có thể dùng add-on AIO Social Comment của Brivium nhưng không lỗi lầm gì!
3. Link add-on nếu bạn không thích đụng code: http://vnxf.vn/brivium-aio-social-comments-2-4-2.t5843.html

Chúc các bạn thành công.

Nguồn: mamcongnghe.com​

 

[lanhhuyettu]

thank admin. cài addons lỗi nên dùng code vậy

 

[lanhhuyettu]

cài code vẫn k hiện là sao nhỉ

 

[hieuld]

sao em cài vào nó hiện ra , nhưng ko comment được là sao ạ ?

 

[leejuu]

sao cài vào nó không hiện ra gì vậy AD