Cara pasang Multi Tab Comment di Wordpress (Responsive)

Dalam tutorial kali ini imadenews akan membahas Cara Pasang Multi Tab Comment Di Wordpress (Responsive). Multi Tabs berisikan Disqus, Wordpress, dan Facebook Comment. Biasanya Multi Tab Comment banyak kalian jumpai pada Web/Blog yang menggunakan blogspot sebagai CMS nya. Nah untuk kali ini akan dibahas cara membuat atau pasang untuk Cms Wordpress (Self Hosted). MultiTab Comment ini Responsive dan mudah untuk dipasang. untuk langkah langkahnya silahkan simak dibawah ini

Pertama pastinya Login ke Dashboard Wordpress admin anda, Pasang Script dibawah tepat di atas </head> atau jika anda memasang plugin Custom Header and Footer Scripts anda bisa masukan disitu di kolom header

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/suryadewa/Website/script/imd/responsive-tabs.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/suryadewa/Website/script/imd/ResponsiveTabs.js"></script>

Jika sudah silahkan Save/Simpan.

Lanjut ke langkah berikutnya masukan script berikut diatas </body>  atau jika anda memasang plugin Custom Header and Footer Scripts anda bisa masukan disitu di kolom Footer

<script>
(function() {
var d = document, s = d.createElement('script'); 
s.src = '//imadenewscom.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#CommentTabs').ResponsiveTabs({
            type: 'default',
            width: 'auto',
            fit: true, 
            tabidentify: 'imd_1', 
            activate: function(event) { 
                var $tab = $(this);
                var $info = $('#nested-tabInfo');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });

    });
</script>

Perhatikan script diatas ubah imadenewscom.disqus.com/embed.js menjadi username disqus anda lalu Save/Simpan.

Lanjut ke langkah terakhir masuk ke menu Editor di dashboard admin wordpress anda lalu pilih dan edit Comments.php (appearance>Editor>Comments.php)

Copy semua Script yang ada di comments php terlebih dahulu simpan di notepad lalu masukan script dibawah

<div id="CommentTabs">
            <ul class="resp-tabs-list imd_1">
                <li>Disqus</li>
                <li>Wordpress</li>
                <li>Facebook</li>
            </ul>
            <div class="resp-tabs-container imd_1">
                <div>
				
<div id="disqus-comments">
<div id="disqus_thread"></div>
</div>
<script>
var disqus_config = function () {
this.page.url = '<?php echo get_permalink(); ?>';
};
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            
                </div>
                <div>

	<--- COPY SEMUA SCRIPT DIDALAM COMMENTS.PHP THEME LALU PASTE DISINI --->
				
                </div>
                <div>
				
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=559350760910341";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="100%" data-numposts="7"></div>
               
                </div>
            </div>
        </div>

Perhatikan Script diatas pada <— COPY SEMUA SCRIPT DIDALAM COMMENTS.PHP THEME LALU PASTE DISINI —> ganti tulisan itu dengan script yang sudah anda simpan tadi di notepad.

Ganti app facebook id 559350760910341 dengan app id anda agar kalian bisa setting dan moderate komentar nantinya.

untuk yang lain lain jika mengerti silahkan anda bisa mengubahnya. Jika sudah Save/Simpan.

Sekarang silahkan anda melihat hasil sendiri dengan mengunjungi post pada web anda.

Untuk Preview atau Contoh silahkan kalian bisa lihat sendiri pada komentar dalam website ini.

 

Thanks for Samson Onna sudah membuat Responsive Tabs sehingga bisa digunakan untuk membuat Multi Tab Comment dan dipakai dalam website imadenews ini.