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:
01 | <div id="fb-root"></div> |
02 | <script type="text/javascript"> |
03 | window.fbAsyncInit = function() { |
04 | //Your app details here |
05 | FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true}); |
06 | //Resize the iframe when needed |
07 | FB.Canvas.setAutoResize(); |
10 | //Load the SDK asynchronously |
12 | var e = document.createElement('script'); e.async = true; |
13 | e.src = document.location.protocol + |
14 | '//connect.facebook.net/en_US/all.js'; |
15 | document.getElementById('fb-root').appendChild(e); |
Semoga bermanfaat
0 Komentar: