[ GÜNCELLENDİ 10 Aralık 2011]

iFrame normal bir web sayfasının, harici bir sayfa içinde, kendine ait bir pencerede görüntülenmesidir. Kısacası iFrame ile bir web sayfasını istediğiniz bir sitede veya kod bütününde, vereceğiniz ölçüler içinde yayınlayabilirsiniz.

Bildiğiniz üzere son facebook güncellemesinin ardından, Static FBML sekmeler artık kullanılamazken, fan sayfalarında iFrame sekmeler (iFrame Tabs) sistem tarafından destekleniyor. Hal böyle olunca daha önce hepimizi sınırlandıran FBML eklentilerine ihtiyaç duymaksızın Facebook üzerinde özgün sekmeler oluşturmanın da önü açılmış oldu. Kısacası artık HTML, CSS, Java, PHP, ASP vb dilleri kullanarak sıradan bir web sayfası yapar gibi Facebook sekmesi tasarlamak mümkün. Peki bunu nasıl yapacağız.

Basit HTML / CSS bir sayfa oluşturarak başlayalım
Bir iFrame sekme hazırlamadan önce yapmamız gereken ilk şey bu iframe içinde gösterilecek web sayfasını tasarlamak. Bunun için özel bir şey yapmamıza gerek yok. Sıradan bir CSS kodlanmış sayfa da ilk mesajımızı yayınlamak için bize yetecektir. Aşağıdaki kod bütününü bir metin belgesine (.txt) yapıştırın ve farklı kaydet dedikten sonra .html uzantılı olarak kaydedin. 
- html kullanmanız şart değil, dileyenler .php ve .aspx uzantılı olarak da kaydedebilirler - 




Sayfayı tasarlarken dikkat etmemiz gereken en önemli şey genişliğin 520px den fazla olmaması, zira sekmelerin genişliği bununla sınırlı. Yükseklikte de scroll çıksın istemiyorsanız 800px dan fazlasını kullanmamanızı öneririm.

Sıra geldi dosyayı yüklemeye. Elbette bir sayfanın iFrame altında çalışabilmesi için Web üzerinde bir alanda host ediliyor olması gerekli. Bu nedenle dosyayı bir FTP alanına yükleyin; adresi www.domainadiniz.com/facebook/index.html vb olarak hazırlarsanız sonrasında işiniz daha kolay olacaktır.

Facebook Developer Uygulamasına kaydolalım

Bu kısmı işin en basit kısmı; https://developers.facebook.com/apps adresine tıklayın ve gittiğiniz sayfanın sizing bilgilerinize erişmesine izin verin. (bunu yaparken facebook sizden kredi kartı veya telefon yoluyla konfirmasyon isteyebilir, tavsiyem cep telefonunuz üzerinden konfirme etmeniz)



Sonrasında yapmanız gereken tek şey yeniden anasayfanıza dönmeniz ve sol taraftaki menünüzden Apps (Uygulamalar) linkine tıklamanız. Buradan da Developer linkine tıklayarak uygulama oluşturacağınız sayfaya ulaşabilirsiniz.





iFrame uygulamamızı oluşturmaya başlayalım

Uygulamalar (Apps) linkine gittiğinizde sağ tarafta Set Up New App (Yeni uygulama oluştur) seçeneğini göreceksiniz. Buraya tıklayın. 



Ardından çıkan ekrana uygulamanıza vermek istediğiniz adı yazın ve devam edin, Continue (Devam et)butonuna tıklayın.



Güvenlik kodunu da girdikten sonra artık yola devam edebilirsiniz.




Uygulama Ayarlarına Geçelim

Buraya kadar herşey yolunda gittiyse eğer şimdi işin en önemli kısmına yani uygulamayı hayata geçirme kısmına geldik. Karşınıza çıkan sayfa aşağıda da göreceğiniz gibi tüm ayarları açılır bir menü sistemi üzerinde barındırıyor. Bizim için kritik olan ise bunların 3 tanesi: Basic Info (Temel Bilgileri), App On Facebook (Uygulama Ayarları) ve Page Tab (Sayfa Sekmesi)



Uygulamanın adı, (Display Name) sizin kendi menünüzde göreceğiniz ad olacak. Sekmeyi etiketlemeyecek.Category (Kategori) kısımları ise size kalmış. Eğer başka insanların da kullanmak isteyeceği bir uygulama yapıyorsanız, yazmanızı tavsiye ederim.

Logo, (Sol üstteki resim kısmına tılayarak değiştirebilirsiniz) uygulama sayfanızda sol taraftaki avatarı, icon ise fan page’e bu uygulamayı eklediğinizde, soldaki sekmeler listesinde bulunacak olan küçük simgeyi temsil eder. İcon kullanmak uygulamanıza ciddiyet katacaktır.


Facebook Integration (Uygulamaya Dair Ayarlar)

Yukarıdan aşağıda doğru sıralanan linkler içinde iki tanesini aktif hale getiriyoruz şimdi. App on Facebook (Facebook Uygulaması) ve Page Tab (Sayfa Sekmesi) - Türkçe'sinde sıralama aşağıdakinden farklı olacaktır ama içerik tümüyle aynı. İlerleyen dönemde daha kapsamlı uygulamalar geliştirmeye ihtiyaç duyarsanız eğer gelişmiş ayarlara da ihtiyacınız olacak ancak şimdilik bu kadarı fazlasıyla işimizi görecektir. Şimdi gelelim en önemli kısıma. Bu kısımlara yazacaklarımız neler?

Canvas (Tuval) menüsünde ayarları aşağıdaki resimde gördüğünüz gibi yapın. Canvas URL (Tuval Adresi/URL'si) dosyanızın blunduğu dizini gösterir, yani httpdocs içinde uygulamanın bulunduğu klasörü. Burayı kendi dosyanızın bulunduğu dizine göre düzenleyin. Eğer hiç bir klasörde değil, direkt httpdocs içinde ise, sadece domain adresini, sonuna "/" işareti koyarak yazmanız yeterli. Secure kısmı için ise aynı adresi bu kez başında "https" olacak şekilde yazın. (Secure alanlar kullanmak her zaman daha sağlıklıdır, bu nedenle tavsiyem mutlaka SSL sertifikalı FTP alanlarını yeğlemeniz yönünde)



Tab Name (Sekme adı) uygulamayı sayfanıza eklediğinizde sol taraftaki menüde göreceğiniz linkin adını temsil ediyor. Burada dikkat etmemiz gereken Sekme Adının 16 karakteri geçmemesi. Aksi halde uygulama ikinci satıra geçecektir.

Tab URL ve Secure Tab URL, HTTP ve HTTPS farkını oluşturur. Her ikisine de aynı linki yapıştırırsanız eğer facebook https bağlantı üzerinde çalışırken de uygulamanız görüntülenmeye devam edecektir. Bunu atlamayın! Profesyonel çalışmalarınızda https bağlantıyı FTP üzerinde doğru nokta ile ilişkilendirerek verimli kullanabilirsiniz.

*Eğer Secure Tab URL bölümünü boş bırakırsanız SSL üzerinden sayfanıza bağlananlar uygulamanızı göremeyeceklerdir.

İşimizi tamamladık. Save Changes (Değişiklikleri Kaydet) tuşuna basın. 


Uygulamayı Fan Page’e (Fan Sayfasına) Kaydedelim

Kaydet tuşuna bastıktan sonra şimdi önünüzde açık olan uygulama sayfasında üst kısımdan yenien Edit App (Uygulamayı Düzenle) butonuna tıklayın ve ardından sol alt kısıma bakın. Buradan View Application Profile Page(Uygulama Profil Sayfasını Görüntüle) linkine tıklayın ve uygulamanın sayfasına gidin. 



Şimdi öncelikle bu sayfayı beğenin (Like Button) ve ardından sol alt tarafta bulunan linklerden Add to My Page (Sayfama Ekle) butonuna tıklayın. 



Karşınıza çıkan pop-up (açılır pencere) üzerinden kendi sayfanızın yanında bulunan ADD TO PAGE (SAYFAMA EKLE) butonuna tıklayın. Artık uygulamanız sayfanıza eklendi.

* İstisnai durumlarda uygulamalar sayfada geç görünebiliyor. Lütfen sabırlı olun... Bu durumda öncelikli olarak tarayıcınızın ön belleğini kontrol edin.