.jpg)
Juni 02, 2012
TAHAP I
Membuat Aplikasi untuk komentar di Facebook.
Langkahnya sangat mudah, caranya sebgai berikut:1 Masuk/login ke Facebook.com
2 Setelah itu lanjutkan dengan masuk developer/pengembang situs FB di link ini:
developers.facebook.com/setup
3 Klik Create New App
5 Ketik Nama Aplikasi yang dikehendaki, sekedar contoh diatas adalah: pandaankucom
6 App Namespace: Ini bisa dibiarkan kosong atau tulis nama dengan minimal 7 karakter
7 Klik Lanjutkan
8 Selanjutnya muncul jendela munculan verifikasi kata, ketik terus Submit.
9 Selesai.
Nah, sampai tahap ini kalian sudah selesai membuat Aplikasi yang akan digunakan untuk fungsi komentar di blog kalian. Pada screeshoot diatas tertera nama Aplikasi dan nomor ID Aplikasi serta kode rahasia Aplikasi.
TAHAP II
Memasukkan alamat blog kedalam Aplikasi yang telah kaliah buat pada tahap I
Seringkali kita menjumpai blog atau situs yang memiliki kotak komentar FB kadangkala mengalami error dengan adanya pesan seperti "Warning: the url --- is Unreachable". Penyebab utama dari kasus tersebut sebaian besar adalah tidak dimasukkannya alamat URL blog pada Aplikasi yang baru dibuat. Berikut saya jelaskan cara memasukkan alamat blognya.1. Sampai pada tahap I ketika kalian sudah mendapatkan ID App kalian maka lihatlah pada
kolom bawahnya, disitu tertera beberapa kolom yang harus kalian isi.
Ket: Page ini bisa juga diakses dengan link:https://developers.facebook.com/apps/ID App
Ganti font merah dengan kode ID App pada step tahap 1.
2. Setelah itu ketik alamat email FB kalian, contoh: pandaanku@gmail.com
3. Abaikan saja kolom App Domain
4. Pada bagian tengah dimana terdapat kalimat "Select how your app integrates with
Facebook", langsung klik saja checklist Website dan kemudian lanjutkan dengan
pengisian nama domain blog kamu yang akan dikasih kotak komentar.
5. Iya, isi pada kolom tersebut nama domain blog kamu dan harus diakhiri dengan
garis miring, contoh: http://www.pandaanku.com/
6. Lanjutkan dengan Klik Save Changes pada bagian bawah
Lihat screeshoot berikut agar lebih jelas.
TAHAP III
Pada Tahap ini kalian harus memasang tiga jenis kode dari developer FB ke template blog kalian: Kita harus memasukkan 3 (tiga) script kode ke template blog kalian. Dengan catatan kalian sudah mengetahui ID App dan ID FB kalian, Untuk cara mengetahui kode akun bisa dilihat disini.
Nah biar aman dan lancar lebih baik copas dulu nomor ID App dan ID FB pada Notepad.
Seperti biasa kalian harus masuk ke blogger dan pilih Template ----> edit HTML----> Proceed----> Centang Expand Widget Templates
(PERHATIAN: BACK UP DULU TEMPLATE KALIAN AGAR AMAN)
Terus???ini kelanjutannya..
1. Menyisipkan kode fbml facebook pada template blog.
Caranya yaitu mencari dulu kode <html lalu sisipkan kode xmlns:fb='http://www.facebook.com/2008/fbml'dan taruh pada bagian setelah kode tersebut, contoh <html xmlns:fb='http://www.facebook.com/2008/fbml'
2. Memasukkan kode Open Graph Protocol Tag pada template blog.
Caranya adalah sebagai berikut:
- Carilah kode <b:skin>
- Copas kode berikut tepat diatas kode <b:skin>
Caranya adalah sebagai berikut:
- Carilah kode <b:skin>
- Copas kode berikut tepat diatas kode <b:skin>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='BLOG NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR APP ID ' property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Ganti BLOG NAME dengan nama blog kalian.
- Ganti YOUR APP ID dengan nomor ID App kalian.
- Ganti YOUR ID FB PROFILE dengan ID FB Profile kalian, bila nggak tahu yang ini buka cara menemukannya disini.
3. Memasukkan kode SDK Facebook
Caranya adalah sebagai berikut:
- Cari kode <body
- Copas kode berikut tepat dibawah kode <body
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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);
}());
<fb:comments/>
</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
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);
}());
<fb:comments/>
</script>
Penting!!...Nah, nyampai disini berarti kalian sudah memasang atau mengintegrasikan Aplikasi dan perangkat sistem moderasi komentar FB pada blog kalian. Namun kalian masih belum memasang kotak komentar FB pada blog kalian sehingga sudah dipastikan gak akan muncul. Nah untuk memasang kotak komentar FB maka kalian akan saya kasih sebuah tips yang sangat menarik yakni tentang pemasangan kotak komentar FB yang bersebelahan dengan komentar blogger. Modelnya persis seperti yang ada di blog pandaanku ini. Lihat screenshoot:
Untuk cara memasangnya silahkan ikuti panduan lanjutannya lengkap tentangmemasang kotak komentar FB pada blog bersebelahan dengan komentar bloggerdisini
CATATAN: Apabila sudah memasang kotak komentar diatas, maka pemasangan komentar FB+Moderasi sudah selesai, untuk melihat komentar masuk dan melakukan moderasi bisa di akses di URL:http://developers.facebook.com/tools/comments
Kotak Komentar FB Bersebelahan dengan Kotak Komentar Blogger lengkap dengan tombol buka dan penutup.
1. Masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed---->
Centang Expand Widget Templates
(PERHATIAN: BACK UP DULU TEMPLATE KALIAN)
2. Cari kode <div class='comments' id='comments'> (Gunakan CTRL+F)
3. Copas kode berikut tepat dibawah kode <div class='comments' id='comments'>
-Bila ada dua kode <div class='comments' id='comments'> Maka silahkan pilih yang
pertama, bila gagal pilih yang kedua.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
4. Setelah pemasangan kode tersebut, lanjutkan dengan mencari kode</head>
5. Bila sudah ketemu maka copas kode berikut tepat diatas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
Penting!!<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
- Ganti YOUR ID FB PROFILE dengan nomor ID FB kalian. Bila nggak tahu cara dapetin kodenya klik disini untuk caranya.
6. Sesudah itu lanjuntkan dengan memasang kode CSS berikut. Untuk memasangnya cari kode #comment atau .comment dan letakkan kode berikut dibawahnya atau diatasnya (terserah kalian).
letaknya adalah antara kode <b:skin><![CDATA[/* sampai pada kode sebelum ]]></b:skin>
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
Selesai dan selamat mencoba semoga berhasil
6 Comments
Mmmmmm....
BalasHapusbetmatik
BalasHapuskralbet
betpark
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
ARFVD3
betmatik
BalasHapuskralbet
betpark
tipobet
slot siteleri
kibris bahis siteleri
poker siteleri
bonus veren siteler
mobil ödeme bahis
PK7W6
canlı sex hattı
BalasHapushttps://girisadresi.info/
heets
salt likit
salt likit
J8P6
batman
BalasHapusbilecik
bingöl
bitlis
bodrum
PS3E
Ijin nyimak mas gan..
BalasHapus