Mengkostumisasi Facebook Fan Page dengan Iframe
Aduh, kakak. Facebook Page sekarang sudah diupdate nih sama kak Zuckenberg jadi timeline. Maaf ya kakak, belum sempat update artikel ini lagi. Sementara, bisa sebagai referensi saja, ya kakak. Artikel tentang Facebook Iframe terbaru bisa dilihat di sini
Melalui Developer Roadmap-nya, Facebook mengumumkan tentang dihentikannya penggunakan FBML untuk pembuatan aplikasi Facebook. Bagi Anda yang pernah menggunakan FBML dalam mengkostumisasi Fan Page, semisal dengan menggunakan aplikasi Static FBML, barangkali sudah saatnya untuk mulai mencoba iFrame untuk pembuatan aplikasi Facebook. Pada dasarnya, Iframe memungkinkan Anda untuk menggunakan konten yang berada pada domain yang berbeda. Teknik ini memudahkan Anda untuk menampilkan konten dari sebuah website ke website yang lain. Contoh yang mudah kita temui adalah teknik embedding video Youtube atau mengambil foto dari Flickr pada sebuah website.
Tutorial ini akan membantu Anda, memasang konten menggunakan iframe, untuk Facebook Fan Page dengan template sesuai kebutuhan kita.
Langkah pertama adalah membuat template HTML untuk konten utama kita. Secara default, Lebar untuk Facebook Page yang tepat adalah 520px. Anda bisa juga mendapatkan template Facebook Page gratis di internet, misal di website ini: http://www.facebookpagetemplates.com/.
Setelah template Anda diupload ke web server, misal pada tutorial telah diupload ke: http://labs.rumahdot.com/fanpage/, kemudian masuk ke halaman Facebook Developer (http://www.facebook.com/developers/), dan klik Set Up New App.
Masukkan nama aplikasi, dan pilih Agree pada Facebook Terms, kemudian klik Create App.
Masukkan informasi dasar dari aplikasi, tambahkan logo dan icon jika perlu.
Kemudian pada panel menu sebelah kiri, klik Facebook Integration.
Masukkan URL yang akan dijadikan sebagai URL aplikasi kita pada field Canvas Page. Masukkan URL template yang telah kita upload sebelumnya pada field Canvas URL. Kemudian pilih Auto-resize pada iframe. Jika Anda ingin aplikasi ini mempunyai Tab tersendiri pada sebuah page, masukkan Isian Tab Name dan Tab URL pada bagian Page Tabs.
Setelah klik Save Changes, akan muncul informasi aplikasi yang telah kita buat. Klik Application Profile Page.
Pada profile page aplikasi kita, pilih menu Add to My Page, untuk menambahkan aplikasi kita pada Fan Page.
Pilih Fan Page yang ingin ditambahkan.
Setelah itu, buka Fan Page yang ingin kita kustomisasi. Seharusnya akan muncul Tab baru dengan nama sesuai aplikasi yang kita tambahkan sebelumnya, seperti yang tampak pada gambar di bawah ini:
Langkah terakhir adalah mengatur tampilan agar saat Fan Page dibuka pertama kali, maka akan menuju Tab Aplikasi kita tersebut. Caranya adalah sebagai berikut:
Klik Edit Page
Kemudian pada Menu Default Landing Page, pilih aplikasi yang kita tambahkan sebelumnya.
Simpan perubahan, dan hasilnya bisa Anda lihat seperti ini: http://www.facebook.com/pages/Rumahdot-Labs/177793348937676
Jika muncul vertical scrollbar, Anda bisa menambahkan kode berikut pada file HTML template yang terupload pada server:
</p>
<div id="fb-root"></div>
<p><script type="text/javascript">
window.fbAsyncInit = function() {
//Your app details here
FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
//Resize the iframe when needed
FB.Canvas.setAutoResize();
};</p>
<p> //Load the SDK asynchronously
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script></p>
<p>
Semoga bermanfaat 
Artikelnya bagus banget. *terharu membacanya*.
. Amiin
Makasih banyak om. Tak dungakno semoga lancar rezeki dan segera menikah sama yang mau dinikahin
Mas, yang saya ingin tanyakan, apakah pada aplikasi seperti iframe ini bisa juga diaplikasikan static HTML? Jadi tinggal input source code nya saja (Seperti static FBML) karena saya minim hosting dan belum familiar mas, masih belajar. adapun contoh static FBML yang saya buat: http://www.facebook.com/shelterdigitalarts
Kalau menggunakan iframe, sudah pasti harus ada hosting mas untuk meletakkan file HTML yang nanti URL-nya akan kita masukkan sebagai canvas URL.
Okay makasih. saya mesti banyak belajar kalau gitu. Thanks
wah ini dia artikel yg ku cari 2x setelah mengalami penantian begitu panjang..makasih banyak gan….. salam kenal klopshop.com
Gan… gimana dengan invite friends ke applikasi kita ? jadi pas click send invitation bakal muncul list nama2 yang bisa kita add untuk gabung applikasi kita ?
ane pake koneksi https, pas nyoba mengunjungi facebook fan page demo diatas kok muncul keterangan gini ya?
—-Maaf! Kami tidak bisa menampilkan konten ini selama Anda melihat Facebook melalui koneksi aman (https).
Apakah Anda ingin beralih sementara ke koneksi biasa (http) untuk menggunakan aplikasi ini?
Anda akan menggunakan kembali koneksi aman setelah Anda masuk berikutnya.—
Hehe, tidak usah heran Mas. Facebook sampai sekarang belum ada respon (CMIIW) meskipun banyak developer fb app yang komplain ttg hal semacam ini. Baik itu aplikasi ada di secure environment atau yang mengandung malicious pun, facebook sering ada warning seperti ini.
Untuk sementara, barangkali bisa dicoba mengubah pengaturan keamanan facebooknya melalui menu Account > Account Settings > Account Security. Di situ ada pilihan Secure Browsing, untuk pilihan memakai http/https untuk facebook.
Yupsss mantabs mbak, berdasarkan petunjuk artikelnya saya berhasil memoles facebook fan page blog saya,
http://www.facebook.com/klikedukasi
satu pertanyaan, sepertinya kalau di load dari perangkat mobile fasilitas ini ga bisa ditampilkan ya mbak?
mohon petunjuk..saya sdh bikin page dan landing page sdh sy arahkan ke new product tetapi saat sy masuk ke page kok yg kluar masih di wall? mohon pencerahan..tq
AFAIK, landing page via iframe yang ditampilkan itu hanya untuk non-fans. Jika user sudah klik tombol like, default tab nya otomatis menjadi wall.
Im so glad that the inetrnet allows free info like this!
Terimakasih mas infonya tentang tutotial FB ini, lengkap dan jelas.
Ini dia artikel tg saya cari akhirnya saya mampir ke blog anda. Salam kenal
kok ga ada yang seperti di nomor 11
ada cara yg terbaru ga admin
cyberworlds.at.ua
Masih ada kok, coba diteliti ya. Maksudnya untuk pengaturan Default Landing Tabs kan?
Sy uda py fans page,pas mw pkai aplikasi update status koq hrus mengakses sbgai nama akun sy,pdhal sy ingin mnggunakan nama page tsb.
Mohon pencerahan’y..makasih
Tampilan aplikasi FB sepertinya udah beda dari yang ditunjukkan dari artikel diatas..:) Masalah scrolbar juga masih muncul terus meskipun widthnya sudah di kecilkan jadi 507. apakah mas/mbak berencana mengupdate tutorial ini …:) thanks
Thanks atas informasinya, tapi boleh tau perbedaan apa yang dimaksud, karena sampai saat ini saya masih menggunakan tips seperti pada artikel ini. Oh iya, untuk masalah scrollbar barangkali tips berikut bermanfaat. untuk scrollbar horizontal, coba cek di css, atau tambahkan baris untuk overflow seperti misal body { overflow-x:hidden }.
Bagi yang menggunakan html5 boilerplate, terkadang ketemu masalah vertical overflow jg, meski sudah diatur sedemikian rupa. biasanya itu karena ada predefined rules di style.css nya, bisa dioverwrite dengan html{ overflow-y:auto }
klo sekarang, FBML masih bisa dpake g ya?
klo iframe kan hrs punya hosting
mas…gimana y cara nya setting landing fan page yang sudah byk penggemarnya…settingan nya gk nongol untuk menerapkan landing fan page..mohon pencerhan nya..saya mengalmi kesulitan…
Settingan yang mana yang tidak muncul mas? Default Landing Page bisa diatur lewat https://www.facebook.com/pages/edit/?id=(id page Anda) , perlu dicatat bahwa landing page ini hanya muncul untuk profil-profil yang belum “nge-like” page Anda. Setelah klik like otomatis user diarahkan ke wall page tersebut
wow terimakasih sesuai dengan apa yang saya cari , kebetulan mau ekspansi via FB
thanks a lot
sangat menarik artikel yang anda bahas,cuma sekedar masukan saja bahwa aplikasi apa saja yang kita install di fan page fb kita sudah tidak bisa berjalan dengan baik jika di gandeng dengan kronologi,dan ini sudah saya buktikan berapa kali ternyata emang sulit gan
@MDProject kan emang barusan aja ganti itu FB jadi FB timeline, ngefek juga di pages soalnya