Cara Memasang Komentar Default Blog dan Facebook Secara Bergantian Menggunakan Ajax - Maksud dari judul artikel ini adalah, bagaimana caranya memasang komentar facebook tanpa harus menghilangkan, ataupun memindahkah tampilan default/standard komentar dari blog itu sendiri. Jadi kotak komentar akan tampil bergantian, sesuai dengan keinginan pengunjung.
Jika sobat masih belum mengerti apa yang sudah saya jelaskan pada deskripsi diatas, silahkan lihat demo komentar sebagai salah satu contoh.
Cara memasang komentar facebook yang ada pada contoh diatas adalah dengan memanfaatkan script dari ajax googleapis. Jadi jika sobat ingin memasang komentar facebook seperti apa yang ada dalam demo, setidaknya sobat harus sedikit mengerti tentang code JavaScript.
Bagi sobat yang belum mengerti tentang JavaScript, tapi ingin memasang komentar default blog dan komentar facebook secara bergantian seperti yang terlihat pada demo. Mari kita bahas bersama-sama cara memasang code JavaScript tersebut dan bagaimana memulai cara kerja fungsinya.
Memasang Script Ajax Googleapis
Langkah pertama yang harus kita lakukan adalah memasang code JavaScript jqueri.min.js dari ajax.googleapis.com dalam tag <HEAD> di bawah code css, seperti ini
<HEAD>
<link rel="stylesheet" type="text/css" href="/styles/default/style.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</HEAD>
Langkah kedua adalah membuat code JavaScript sebagai fungsi untuk menampilkan dan menyembunyikan komentar. Yang akan kita letakkan diatas tag </HEAD>, perhatikan code JavaScript dibawah ini.
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
// Memulai fungsi...
$(".penutup").hide(); // Fungsi penutup tampilan komentar.
$("p.pembuka span:first").addClass("active").show(); // Fungsi pembuka komentar.
$(".penutup:first").show(); // Fungsi pembuka komentar tertutup.
// Bagian fungsi klik.
$("p.pembuka span").click(function() {
$("p.pembuka li").removeClass("active"); // Menonaktifkan pembuka komentar.
$(this).addClass("active"); // Menampilkan komentar yang di pilih pengunjung.
$(".penutup").hide(); // Menutup area komentar.
var activeTab = $(this).find("a").attr("href"); // Mencari rel nilai atribut untuk mengidentifikasi kometar terbuka.
$(activeTab).fadeIn(); // Menyamarkan komentar terbuka.
return false;
});
});
</script>
Memasang Form Komentar dalam Body
Sebagai langkah terakhir adalah memasang widget komentar facebook menggunakan fungsi "class" yang sudah kita buat pada code JavaScript di atas, mari kita perhatikan cara meletakan fungsi pada komentar dalam bagian body di bawah ini
<!-- COMMENTS START -->
<div class="style-menu-gaya-kamu">
<p class="pembuka">
<span><a href="#comments">Membuka Komentar Blog</a></span>
<span><a href="#fb-comments">Membuka Komentar Facebook</a></span>
</p><!-- #END Pembuka -->
</div>
<div id="comments" class="penutup">
<a name="comments"><h3>Komentar Default/Standard</h3></a>
<div id="comments">
<!-- Disini letak form komentar blog sobat -->
</div>
</div> <!-- #END Penutup -->
<div id="fb-comments" class="penutup">
<a name="fb-comments"><h3>Komentar Facebook</h3></a>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/
all.js#xfbml=1"></script>
<fb:comments href="/komentar"
num_posts="2" width="460"></fb:comments>
</div> <!-- #END Penutup -->
<!-- COMMENTS END -->
Akhir kata, semoga artikel ini dapat di mumeti. Salam!