Membuat Komentar Facebook di CMS Formulasi

Dalam postingan kali ini masih dibahas tentang facebook comment. Akan tetapi sedikit berbeda dengan posting sebelumnya. Jika dalam posting terdahulu fb comment disisipkan di tabs view yang ada di halaman utama, fb comment yang sekarang diletakkan di bawah posting dan disandingkan dengan fitur komentar yang susah ada sebelumnya.

Secara default komentar di bawah postingan seperti gambar di bawah ini :

dan kemudian akan dirubah menjadi tabs view menu bersama fb comment sehingga menjadi seperti gambar di bawah ini :

Agar dapat membuat Tabs View Menu Komentar di Bawah Postingan CMS Formulasi, cara-cara yang perlu ditempuh adalah sevagai berikut :

1. Mendapatkan code Facebook Comment. Dimana memperolehnya, silahkan baca posting sebelumnya : Menambah Fitur Facebook Comment Di CMS Formulasi 
2. Edit file detberita.php yang terdapat dalam folder kontenweb » modul di file manager hosting Anda
3. Klik kanan pada file tersebut dan pilih edit
4. Terbuka halaman edit. Sebelum melakukan edit, sebaiknya dibackup dulu dengan cara copy paste di notepad atau notepad++
5. Temukan script <h3>Tinggalkan Komentar</h3>
6. Kemudian hapus script dimulai dari <h3>Tinggalkan Komentar</h3> hingga script
   <p><?php echo "$k[isi_komentar]"?></p> <?php } ?>
   </li>
   </ul>
dan ganti dengan script jadi dari rangkaian proses di bawah ini

7. Kemudian secara bertahap ikuti langkah-langkahnya :
   Masukkan javascript ini di tempat yang di hapus tadi
   view plainprint?

   1. <script type="text/javascript">   
   2.   
   3. $(document).ready(function() {  
   4.   
   5.   
   6.   
   7. //When page loads...  
   8.   
   9. $(".tab_content").hide(); //Hide all content  
   10.   
   11. $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
   12.   
   13. $(".tab_content:first").show(); //Show first tab content  
   14.   
   15.   
   16.   
   17. //On Click Event  
   18.   
   19. $("ul.tabs li").click(function() {  
   20.   
   21.   
   22.   
   23. $("ul.tabs li").removeClass("active"); //Remove any "active" class  
   24.   
   25. $(this).addClass("active"); //Add "active" class to selected tab  
   26.   
   27. $(".tab_content").hide(); //Hide all tab content  
   28.   
   29.   
   30.   
   31. var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content  
   32.   
   33. $(activeTab).fadeIn(); //Fade in the active ID content  
   34.   
   35. return false;  
   36.   
   37. });  
   38.   
   39.   
   40.   
   41. });  
   42.   
   43. </script>  


8. Dibawah javascript ketik :
   view plainprint?

   1. <!-- tabs -->  
   2.   
   3. <ul class="tabs">  
   4.   
   5.   
   6.   
   7. <li><a href="#komentar"><b>Komentar</b></a></li>  
   8.   
   9. <li><a href="#facebook"><b>Facebook</b></a></li>  
   10.   
   11.   
   12.   
   13. </ul>  


9. Lanjutkan dengan :
   
   view plainprint?

   1. <div id="lebarTab">  
   2.   
   3.   
   4.   
   5. <div id="facebook" class="tab_content">  
   6.   
   7. masukkan kode facebook comment di sini !!  
   8.   
   9. </div>  
   10.   
   11.   
   12.   
   13.   
   14.   
   15. <div id="komentar" class="tab_content">  
   16.   
   17. masukkan script komentar di sini !!  
   18.   
   19. </div>  
   20.   
   21. </div>  


10. Kode Facebook Comment
    
    view plainprint?

    1. <div id="fb-root"></div>  
    2.   
    3. <script>(function(d, s, id) {  
    4.   
    5. var js, fjs = d.getElementsByTagName(s)[0];  
    6.   
    7. if (d.getElementById(id)) return;  
    8.   
    9. js = d.createElement(s); js.id = id;  
    10.   
    11. js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";  
    12.   
    13. fjs.parentNode.insertBefore(js, fjs);  
    14.   
    15. }(document, 'script', 'facebook-jssdk'));</script>  
    16.   
    17.   
    18.   
    19.   
    20.   
    21. <div class="fb-comments" data-href="<b><span style="color: red;">http://www.cmsformulasi.com</span></b>" data-width="550" data-num-posts="5"></div>  
    
    http://www.cmsformulasi.com, sesuaikan dengan website seekolah/madrasah Anda saat membuat facebook comment


11. Kode komentar
    view plainprint?

    1. <h3>Tinggalkan Komentar</h3>  
    2.   
    3.   
    4.   
    5.   
    6. <form method="POST" action="kontenweb/insert_komentar.php?t=berita" id="formkomentar" name="formkomentar">  
    7.   
    8. <?php     echo "<input type='hidden' name='id' value='$r[id_berita]'>";?>  
    9.   
    10. <table>  
    11.   
    12. <?php if(isset($_COOKIE["userformulasi"])){  ?>   
    13.   
    14. <tr><td width="75px"><b>Nama </b></td><td><input type="hidden" name="nama" class="sedang" value="<?php echo $_COOKIE["userformulasi"];?>"><?php echo $_COOKIE["userformulasi"];?></td></tr>  
    15.   
    16. <?php     }else{ ?>   
    17.   
    18. <tr><td width="75px"><b>Nama *</b></td><td><input type="text" name="nama" class="sedang" value=""></td></tr>  
    19.   
    20. <?php    } ?>  
    21.   
    22. <?php if(isset($_COOKIE["usermail"])<>''){  ?>  
    23.   
    24. <input type="hidden" name="email" value="<?php echo $_COOKIE["usermail"];?>" class="sedang">  
    25.   
    26. <?php     }else{ ?>  
    27.   
    28. <tr><td><b>Email *</b></td><td><input type="text" name="email" class="sedang">&nbsp;<small><i>Tidak akan diterbitkan</i></small></td></tr>  
    29.   
    30. <?php     }  ?>  
    31.   
    32. <?php if(isset($_COOKIE["userurl"])<>''){  ?>  
    33.   
    34. <input type="hidden" name="url" class="sedang" value="<?php echo $_COOKIE["userurl"];?>">  
    35.   
    36. <?php     }else{ ?>  
    37.   
    38. <tr><td><b>Url </b></td><td><input type="text" name="url" class="sedang">&nbsp;<small><i>masukkan tanpa Http:// contoh :<b>www.m-edukasi.web.id</b></b></i></small></td></tr>  
    39.   
    40. <?php     }  ?>  
    41.   
    42.   
    43.   
    44. <tr><td><b>Komentar *</b></td><td>  
    45.   
    46. <textarea name="komentar" style="width: 200px; height: 75px;"></textarea>  
    47.   
    48. </td></tr>  
    49.   
    50. <tr><td></td><td><img src="kontenweb/captcha.php?date=<?php    echo date('YmdHis');?>" alt="security image" /></td></tr>  
    51.   
    52. <tr><td></td><td><input type="text" name="kode" class="pendek">&nbsp;<small><i>Masukkan kode diatas</i></td></tr>  
    53.   
    54. <tr><td></td><td><input type="submit" class="tombol" value="Kirim">&nbsp;<input type="reset" class="tombol" value="Reset"></td></tr>  
    55.   
    56. </table>  
    57.   
    58. </form>  
    59.   
    60. <?php     include "kontenweb/tema/form_komentar.php";?>  
    61.   
    62.   
    63.   
    64. <?php     
    65.   
    66. $hitung_komentar_ini=mysql_query("SELECT * FROM ".$DB_KODE."_komentar WHERE status_terima='1' AND id_berita='$r[id_berita]'");  
    67.   
    68. $jml_komentar_ini=mysql_num_rows($hitung_komentar_ini); ?>  
    69.   
    70.   
    71.   
    72.   
    73.   
    74. <ul>  
    75.   
    76. <?php   
    77.   
    78. $komentar=mysql_query("SELECT * FROM ".$DB_KODE."_komentar, ".$DB_KODE."_berita WHERE ".$DB_KODE."_komentar.id_berita=".$DB_KODE."_berita.id_berita AND status_terima ='1' AND status_terbit='1' ORDER BY id_komentar DESC limit 4");  
    79.   
    80. $hitungkomentar=mysql_num_rows($komentar);  
    81.   
    82.   
    83.   
    84. if($hitungkomentar > 0){  
    85.   
    86. while($kom=mysql_fetch_array($komentar)){  
    87.   
    88. $judul = strtolower(preg_replace("/s/","9a9z9",$kom['judul_berita']));  
    89.   
    90. $judul = preg_replace('#W#', '', $judul);   
    91.   
    92. $judul = str_replace("9a9z9","-",$judul);  
    93.   
    94. $url_link = "info-".$kom['id_berita']."-".$judul.".html";  
    95.   
    96. ?>  
    97.   
    98. <li><a href=""><?php    echo "$kom[nama_komentar]";?></a> pada <a href="<?php    echo $url_link;?>"><?php    echo "$kom[judul_berita]";?></a>  
    99.   
    100.   
    101. <b><?php    echo "$kom[tanggal_komentar]";?></b>  
    102.   
    103.   
    104. <i><?php    echo "$kom[isi_komentar]";?></i></li>  
    105.   
    106. <?php     }}  
    107.   
    108.   
    109.   
    110. else {?>  
    111.   
    112. <li><a href=""><b>Data komentar belum ada</b></a></li>  
    113.   
    114. <?php     } ?>  
    115.   
    116. </ul>  


12. Klik "Save Changes"

Silahkan dicoba, jika ada kegagalan sangat mungkin terjadi kesalahan script. Ada baiknya script yang terdapat dalam posting ini tidak langsung di copy dan paste di halaman edit file manager, melainkan dipste dahulu di notepad atau notepad++.