DAFTAR ISIBUKATUTUP
Cara membuat atau memasang Plugin komentar facebook di Website atau di Blog dapat dikatakan gampang2 susah. Sulitnya adalah karena keterangan tentang cara ini ditulis FB dalam bahasa inggris dan juga kode yang dibagikannya pun masih mentah (fb menyebutnya non-publik) jadi harus di olah lagi agar kodenya berjalan, atau mungkin karena saya pakai hp ya? jadi cuma dikasi kode mentah. Nah kode yang saya bagikan ini merupakan hasil olahan yang sudah jadi dapat dari blog tetangga namun saya tambahi lagi sedikit dan semoga dapat langsung siap pakai.
Untuk keterangan lengkap tentang fiturnya, cara menyembunyikan atau menghapus komentar spam, menyaring kata yang dilarang, pengaturan boleh menyertakan fitur berkomentar sambil melampirkan/upload foto atau tidak, serta kode khusus untuk php, dll silakan baca di https://developers.facebook.com/docs/plugins/comments/?locale=id_ID
Baiklah langsung saja ke cara membuatnya. Pertama kita harus membuat ID Aplikasi dan ID dari App tersebut digunakan untuk menjalankan script ini.
1. Cara membuat ID App FB.
Klik disini https://developers.facebook.com/requests
Klik tanda + seperti gambar dibawah ini.
Atau Klik disini juga boleh https://developers.facebook.com/apps/
Silakan Klik tanda + dan akan muncul seperti gambar dibawah ini. Silakan masukan nama terserah (yang bakal jadi nama App anda) dan email lalu tap "Buat ID". Setelah dibuat salin ID-nya. Jika setelah membuat App tapi diarahkannya kehalaman yang membingungkan dan tidak sempat melihat ID-nya, silakan kembali saja klik link pintas yang saya tulis diatas atau tap burger menu (garis 3 susun) dipojok kanan atas dan pilih "Aplikasi saya" untuk melihat ID app yang baru anda buat tadi.
2. Masukan ID tersebut ke script dibawah ini. ID biasanya terdiri dari sekitar 15 buah angka.
3. Karena disini sudah saya sediakan JavaScriptnya jadi tak perlu lagi ambil ke Comments Plugin Code Generator FB karena itu masih mentah. Salin dan Pasang saja script dibawah ini ke Website anda atau ke dalam template Blog anda. Atau download scriptnya disini https://drive.google.com/file/d/1HYh3_1zl4A0d2-oX5E4WqD3vEWWzOoOG/view?usp=drivesdk
Pasang diatas </head>
<meta property='fb:app_id' content='GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI'/>
<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.9&appId=GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Pasang diatas <body>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI',
xfbml : true,
version : 'v2.9'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Ini snippet untuk menampilkan kotak/kolom komentar FB.
Pasang snippet dibawah ini kedalam <body> dibawah <data:post.body/> atau pasang di dekat komentar Blogger juga boleh, dimanapun boleh. Khusus template Contempo akan lebih pas dipasang dalam <b:includable id='postFooter'>..
<div id='fb-root'/>
<div class='fb-comments' data-colorscheme='light' data-mobile='auto-detected' data-numposts='10' data-order-by='reverse_time' data-width='100%' expr:data-href='data:post.url'/>
4. Setelah snippet sukses terpasang dan kotak komentar sudah muncul silakan tes berkomentar. Komentar pertama anda akan otomatis mengaktifkan Aplikasi yang anda buat pada langkah-1 diatas. Setelah aktif dapat melakukan Pengaturan pada Aplikasinya, misal ingin memblokir orang tertentu, atau menambahkan fitur lampiran foto agar pengunjung Blog anda bisa berkomentar dengan menyertakan gambar, silakan klik disini https://developers.facebook.com/tools/comments/
Peringatan penting dari facebook, jangan mengatur lebar snippet diatas dengan CSS karena snippet tidak akan berfungsi, jika ingin, langsung saja atur di snippetnya bagian data-width="100%" atau ganti 320px 480px dll, katanya.
Untuk keterangan lengkap tentang fiturnya, cara menyembunyikan atau menghapus komentar spam, menyaring kata yang dilarang, pengaturan boleh menyertakan fitur berkomentar sambil melampirkan/upload foto atau tidak, serta kode khusus untuk php, dll silakan baca di https://developers.facebook.com/docs/plugins/comments/?locale=id_ID
Baiklah langsung saja ke cara membuatnya. Pertama kita harus membuat ID Aplikasi dan ID dari App tersebut digunakan untuk menjalankan script ini.
1. Cara membuat ID App FB.
Klik disini https://developers.facebook.com/requests
Klik tanda + seperti gambar dibawah ini.
Atau Klik disini juga boleh https://developers.facebook.com/apps/
Silakan Klik tanda + dan akan muncul seperti gambar dibawah ini. Silakan masukan nama terserah (yang bakal jadi nama App anda) dan email lalu tap "Buat ID". Setelah dibuat salin ID-nya. Jika setelah membuat App tapi diarahkannya kehalaman yang membingungkan dan tidak sempat melihat ID-nya, silakan kembali saja klik link pintas yang saya tulis diatas atau tap burger menu (garis 3 susun) dipojok kanan atas dan pilih "Aplikasi saya" untuk melihat ID app yang baru anda buat tadi.
2. Masukan ID tersebut ke script dibawah ini. ID biasanya terdiri dari sekitar 15 buah angka.
3. Karena disini sudah saya sediakan JavaScriptnya jadi tak perlu lagi ambil ke Comments Plugin Code Generator FB karena itu masih mentah. Salin dan Pasang saja script dibawah ini ke Website anda atau ke dalam template Blog anda. Atau download scriptnya disini https://drive.google.com/file/d/1HYh3_1zl4A0d2-oX5E4WqD3vEWWzOoOG/view?usp=drivesdk
Pasang diatas </head>
<meta property='fb:app_id' content='GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI'/>
<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.9&appId=GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Pasang diatas <body>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'GANTI-DGN-ID-APLIKASI-FB-ANDA-DISINI',
xfbml : true,
version : 'v2.9'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Pasang snippet dibawah ini kedalam <body> dibawah <data:post.body/> atau pasang di dekat komentar Blogger juga boleh, dimanapun boleh. Khusus template Contempo akan lebih pas dipasang dalam <b:includable id='postFooter'>..
<div id='fb-root'/>
<div class='fb-comments' data-colorscheme='light' data-mobile='auto-detected' data-numposts='10' data-order-by='reverse_time' data-width='100%' expr:data-href='data:post.url'/>
4. Setelah snippet sukses terpasang dan kotak komentar sudah muncul silakan tes berkomentar. Komentar pertama anda akan otomatis mengaktifkan Aplikasi yang anda buat pada langkah-1 diatas. Setelah aktif dapat melakukan Pengaturan pada Aplikasinya, misal ingin memblokir orang tertentu, atau menambahkan fitur lampiran foto agar pengunjung Blog anda bisa berkomentar dengan menyertakan gambar, silakan klik disini https://developers.facebook.com/tools/comments/
Peringatan penting dari facebook, jangan mengatur lebar snippet diatas dengan CSS karena snippet tidak akan berfungsi, jika ingin, langsung saja atur di snippetnya bagian data-width="100%" atau ganti 320px 480px dll, katanya.
