HTML ve CSS Başlangıç Rehberi

@shayhowe tarafından hazırlanan HTML ve CSS’e giriş rehberi çok derin olmasa da HTML ve CSS’i genel hatlarıyla özetlemiş. Hem güzel bir sunum ile hazırlanmış hem de güncel bilgilere yer verilmiş. http://learn.shayhowe.com/html-css/ adresinden ulaşabileceğiniz rehber 10 başlıkta toplanmış güzel bir kaynak.

Shay Howe’un daha derin HTML ve CSS konularını topladığı hatta halen yazmaya devam ettiği, gelişmiş HTML ve CSS rehberine de http://learn.shayhowe.com/advanced-html-css/ adresinden ulaşabilirsiniz.

Radio butonları CSS ile makyajlamak

Bildiğiniz gibi bazı form elementlerine (radio butonlar, check butonlar ve birkaç diğer element) kozmetik olarak müdahale edemiyoruz veya kısıtlı şekilde müdahale edebiliyoruz. Sonuç olarak bu elementlerin görüntüsü ve çizilmesi tamamen tarayıcı kontrolünde, çoğu işletim sisteminin arabirim elementleriyle uyumlu şekilde görünecek şekilde ayarlanmış. Web arayüzünde standart elementlere dokunmamak genellikle farklı tarayıcı, farklı cihaz ve farklı işletim sistemlerinde sorunsuz çalışmasını sağlaycaktır.

Fakat bazen bir sayfayı sadece bir cihaz için veya belirli bir tarayıcıda görünecek şekilde tasarlarsınız ve bu noktada kullandığınız tüm elementlere istediğiniz tasarımı giydirmek isteyebilirsiniz. Örnegin mobil bir tarayıcıda görüntülenecek bir oyun arayüzü tasarlıyor olabilirsiniz.

Bunun için javascript çözümleri mevcut fakat birkaç css3 özelliği kullanarak sadece css ile çözebilirsiniz. Bu yazıda size radio butonları istediğiniz şekilde şekillendirmeyi anlatacağım. Radio butonları standart kullanımda, yani çoklu secenekten yapılan seçimler için bir örnek üzerinde göstereceğim.

Okumaya devam et “Radio butonları CSS ile makyajlamak”

CSS before ve after sözde elementleri

CSS2 ile gelen en faydalı özelliklerden biri de yeni sözde seçiciler, bunlardan ikisi “before” ve “after” seçicileri birçok minimal yaklaşıma olanak sağladı.

Özelliğin çıkış noktası bir elementin öncesi veya sonrasına noktalama gibi işaretçiler yerleşitrebilmekti. Yani en sade kullanımıyla:

Bu kod ile bir alıntı yazısının başına ve sonuna çift tırnak ekleyebiliyorsunuz:

Kırmızı ile işaretlediğim karakterler css ile eklendi. Ya da devamı olan bir yazı basarken ekrana:

kodu ile “…” ekleyebiliyorsunuz:

Fakat bu yeni sözde seçicileri akıllıca kullanarak bir element üretebilirsiniz. Yani bu seçici “content” özniteliği aldığı zaman dom üstünde yerleşmese de görsel olarak bir element oluşturuyor. Doğal olarak bu elementi block level yapabilir, genişlik yükseklik tanımlayabilir, posizyonlamasını istediğiniz gibi ayarlayabilirsiniz.

Çok yaygınlaşan bir kullanımla, bir elementin başına veya sonuna eklemek istediğiniz ufak simgeleri, resimleri veya işaretçileri bu sözde seçicilerle yaratabilirsiniz.

Basit örnekle size linklerinize simgeler koyabilmeyi anlatacağım. Biliyorsunuz HTML öznitelik seçicileri var css’de ve “target” özniteliği “_blank” olan bir linki diğerlerinden ayrı bir şekilde seçebilirsiniz. a[target=”_blank”] seçicisi dış bağlantıları seçecektir.

Bu kod dış baglantıyı gösteren bir a elementinin sonuna inline-block türünde bir element ekleyecek ve içeriğini boş bir şekilde ayarlayacaktır. Genişlik ve yüksekliğini 16px olarak ayarlayıp art alanını da bir simgeyi olarak ayarladığımızda linkin sonunda bu simgeyi görebileceğiz:

Bu sözde elementlerini şu tarayıcılar destekliyor:

  • Chrome 2+
  • Firefox 3.5+
  • Safari 1.3+
  • Opera 9.2+
  • IE8+ (Ufak problemlerle beraber)

Bu sözde elementlerle yarattığınız içeriğin sadece görsel amaçlarla kullanılmasi gerektiğini unutmayın, birçok erişilebilirlik okuyucusu veya tarayıcısı bu elementleri okuyamadığı için fonksiyonalitenizi bozacak içerikleri bu elementlerle kullanmamaya dikkat edin.

Bu yazıda çok yaratıcı örneklerini görmediniz fakat ne işe yaradıklarını bilmeniz ileride deney yapmanızı kolaylaştıracaktır veya karşılaştığınızda daha kolay anlamanızı sağlayacaktır.

PHPStorm bu güne kadarki en eli yüzü düzgün PHP IDEsi

Çıktığından itibaren kullanmaya başladığım ve son 3 yıldır tüm web geliştirme işlerimi PHPStorm IDEsini kullanıyorum.

Java tabanlı NetBeans’i modifiye ederek bir IDE (Integrated Development Environment) yani Entegre Geliştirme Ortamı oluşturdular.

PHP’de en büyük problem entegre bir geliştirme ortamı olmaması. Yani derleyiciyle iyi konuşan, iyi bir hata yakalama, test ortamı veya kod ve yazım zekası na sahip bir editör bulmak çok kolay değil. Bunları, kullandığınız işletim sistemine uygun ayrı ayrı araçlarla sağlayabiliyorsunuz tabii ki, fakat entegre şekilde çalışmalarını sağlamak çok da kolay değil.

PHPStorm ilk çıktığında minimal bir konfigürasyon sunarak kod yazım zekası ile bazı temel yazılım geliştirme araçlarını sunuyordu fakat çok hızlı bir şekilde birçok modern web geliştirme dilini (less, sass, haml) ve birçok uygulama geliştirme çatısını destekler hale geldi. Minimal ayarlarla gelişmiş bir editörden ek farkı yok fakat aşağıda kısaca sıraladığım entegre araçları aktif hale getirildiğinde gerçekten çok güçlü bir geliştirme ortamına dönüştürebiliyorsunuz. İşte benim çok sık kullandığım ve sizin de yüksek ihtimalle işinize yarayacak bazı özellikler ve araçlar.

Gelişmiş kod yazım zekası sadece php’de değil php tabanlı bir web projesinde kullanabileceğiniz olası tüm kodları (html, javascript, css, xml) geliştirmek için kullanabilirsiniz. Ek olarak bu altyapılardaki tüm popüler uygulama çatılarını (framework) kod yazım zekasında kullanılabilir şekilde bulabilirsiniz.

Eş zamanlı hata yakalama, xdebug ile çalışan web uygulamanızı editörünüzle entegre ederek eş zamanlı uygulama analizi yapıp hata yakalayabilirsiniz.

Versiyon kontrol sistemi entegrasyonu ile kodunuzu subversion, git gibi depolardan indirip yönetebilirsiniz.

Veritabanı bağlantılarınızı sadece editörünüzden veritabanınıza erişmek için değil kodunuzda yazdığınız SQL’leri kodu yazarken çalıştırıp test edebilir, SQL geliştirirken kod yazım zekası kullanabilirsiniz.

Bunların dışında otomatik yayınlama (deployment), otomatik ftp yüklemesi, zen coding, kod template’leri vs vs gibi bir ton diğer özelliği var.
3 yılda 6 ana sürüm çıkartarak çok kararlı ve güçlü bir php geliştirme ortamı sunuyor jetbrains. Malesef paralı olan ide diğer profesyonel idelere göre çok ucuz, ilk aldığınızda 100 dolar sonasında her yıl ana sürüm güncellemelerini almak için 50 dolar ödemek zorundasınız fakat yaptığınız yatırımı kesinlikle karşılıyor.

Jetbrains PHPStorm’daki birçok aracı Ruby, Python için geliştirdikleri IDE’ler için de sunuyor. Eğer Python veya Ruby yazıyorsanız kesinlikle PyCharm ve RubyMine’a göz atmanızı tavsiye ederim.

PHPStorm’un sayfası için: http://www.jetbrains.com/phpstorm/

HTML5 Form Özellikleri

HTML5 git gide daha popülerleşiyor ve eski html kodlarının yerini, daha sade html5 kodlarına bıraktığını, daha önce javascript eklentileriyle yaptığımız bazı şeyleri yeni html5 tanımlamasında yeni özellikler olarak görmeye başladık.

Özellikle mobile web uyumlu sayfalar yaygınlaştıktan sonra html5 tanımlamaları sadece masaüstü bilgisayar tarayıcıları değil mobil tarayıcılar için de özel yetenekler içermeye başladı.

Eğer birkaç yıldır güncellenmeyen bir tarayıcınız varsa HTML5 formların tüm özelliklerini desteklemeyebilir fakat güncel ve modern tüm tarayıcılar birçok html5 form özelliğini destekliyor.

İşte yeni html5 form özelliklerinden bazıları…
Okumaya devam et “HTML5 Form Özellikleri”

Sayfa görsellerini sayfa yüklendiğinde değil ekranda görüntülendiğinde yüklemek

Uzun bir dönem flash’ın webdeki baskınlığının sonucu olarak ekrana sığan sayfalar tercih edilmeye başlanmıştı ama hem mobil cihazların popülerleşmesi, hem blogların şu an internette çoğunluk içeriği sağlıyor olması hem de flash’ın hayatımızdan biraz daha çıkmasıyla, uzun sayfalar tekrar günlük web gezintimizde en sık karşılaştığımız sayfalar oldu. Uzun bir sayfanız var ise ve eğer metin ağırlıklı bir içeriğe sahip değilseniz muhtemelen içeriğiniz, resimler/fotograflar barındırıyor olacaktır. Bunun yanı sıra sayfanızda üst, alt veya yan alanlarda da görüntülediğiniz yardımcı içerikler olabilir.

Örnek ile basit bir wordpress blogunu gözünüzde canlandırırsanız sayfa başlığı, alt metni ve yan navigasyonda ilgili yazılar (ve bunlara ait küçük görseller) sayfanızın altında bulunan görseller, mesela sponsor logoları, statik reklamlar, birkaç ufak ikon (sosyal medya ikonlari) vs küçük büyük bir çok görseliniz olacaktır (footer, header, sidebar).

Uzun bir sayfanın en büyük tehlikesi içinde barındırdığı medya içeriği sayısı olacaktır. Eğer medya içeriği sayınız, dosya boyutları ufak medya içerikleri dahi olsa yüklenmesi uzun zaman alacaktır. Bu konuya birçok web opimizasyonu yazısında karşılaşabilirsiniz.

Şimdi çok daha anlaşılır bir örnekle bu konuyu hızlıca kod üstünde anlatacağım.

Kısa süre önce bir facebook uygulaması hazırlarken, hazırladığım bir sayfada o kullanıcının arkadaş listesini her satırda 4 avatar görünecek şekilde bir tablo şeklinde gösteren bir sayfa hazırladım. Kendi hesabımla sayfayı açtığımda 500+ arkadaş listeleniyordu ve bu da 500 avatar’ın bir sayfada olması anlamına geliyor. Sorun tabi ki internet hızı değil. Asıl problem tarayıcılar. Tarayıcılar, Her domain için, paralel iki yüklemeye izin verir ve her imajın 100 milisaniyede yükleniyor olduğunu varsayarsak, saniyede 20 fotoğraf yükleniyor diyebiliriz. 500 fotografın yüklenmesi de 25 saniye sürecektir.

Sayfa ilk açıldığında çok garip görünmüyor ama daha sayfa yüklenmeden sayfayı aşağı kaydırdığımda ekranda daha yüklenmemiş görseller görüyor oluyorum.

Bundan daha tehlikelisi bu görseller sayfanızdaki diğer kaynakların yüklenmesini geciktiriyor ve javascript akışınızı etkiliyor. Dolayısıyla iyi bir kullanıcı deneyimi değil. Zaten teorik olarak düşündüğünüzde de ekranda görüntülenmemiş belki de hiç aşşağı kaydırılarak görüntülenmeyecek medya içeriği yüklenmeye çalışıyor ve ideal olarak bunların ekranda görüntülenmeden yüklenmemesi gerekir.

WordPress blogu örneğindeki problem şöyle olabilir. Her girdinizin bir görseli olduğunu düşünürsek ve arşiv sayfanızda her sayfada 10 girdi gösterdiğinizi düşünürsek sayfanızdaki diğer medyaların dışında uzun bir sayfada 10 görsel (yüksek çözünürlükte olabilir) görüntülenmeye çalışması performans kaybına neden olabilir.

Bu problemi bir javascript çözümü olan lazyload ile çözebilirsiniz. jQuery eklentisi olarak bulabileceğiniz eklentinin yaptığı şey her görseli jenerik bir yer tutucusu olarak yükledikten sonra o görselin ekranda görünür alanda olup olmadığını tespit ederek gerçek kaynaktan yüklemek.

Yani sayfanız yüklendiğinde bütün görseller aynı imajı yüklüyor. Genelde bu imaj 1 piksellik tek renk (gri örneğin) ufak bir görsel oluyor. Anında yüklenip tüm imajlarda yer tutucu olarak yerleşiyor. Sayfanız yüklendikten sonra lazyload, o sayfanın pozisyonunu ve görüntülenebilir alanını hesaplıyor ve görselin o alanın içinde veya yakınında olup olmadığını hesapladıktan sonra görünen imajlari yükleyip daha kaydırma pozisyonuna göre ekranda omayan veya uzak olan imajlari yüklemiyor.

Bir javascript eventi ile sayfa kaydırma hareketinizi izleyerek imajlari gösterdiğiniz anda yüklüyor.

Lazyload’i sayfanıza nasıl entegre edersiniz?

Önce bir yer tutucu görseli hazırlamalısınız, bunun için transparan veya sabır bir renk 1×1 boyutunda bir gif imaj hazırlayın.

Sayfanızdaki tüm görsel adreslerini bu imajı yükleyecek şekilde ayarlayın. İmajlarin gerçek adreslerini de “data-original” özelliğine alıyorsunuz.

Sonra jquery ve lazyload’ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload’ı çalıştırıyoruz.

Yukarıdaki kod “lazy” sınıfındaki resimleri yükleyecektir. Daha genel bir kullanım istiyorsanız sadece img etiketlerini belirterek sayfanızdaki tüm görsellerin lazyload ile yüklenmesini sağlayabilirsiniz.

Bundan sonra sayfanızdaki görseller ekranda görüntülendikleri anda yüklenecekler. Lazyload dökümantasyonunu inceleyerek tolerans ataması yapmayı (yani görselin, sayfa kaydırılırken ekranda görüntülenmeden önce yüklenmesini saglayabilir) veya görüntülenirken bir geçiş animasyonu belirleyebilirsiniz.

Proje adresi: http://www.appelsiini.net/projects/lazyload

htaccess ile özelleştirilmiş url yapılarıyla karşılaşacagınız medya ve çerez problemleri ve çözümü

mod_rewrite sayesinde sayfalarımızın adreslerini istediğimiz formda gösterebiliyoruz (İlgili makale için: https://mfyz.com/tr/htaccess-yardimiyla-tum-trafigi-tek-merkezden-yonetmek). Kullanımı çok yaygınlaşsa da bu kullanımın bazı ufak problemleri beraberinde getirdiği göz önünde bulundurulmalı.

Bu yazıda iki çok açık problemden ve basit çözümlerinden bahsedeceğim.

İlk problemlerden birisi sayfanızda kullandığınız tüm medya veya eklentilerin yollarını domain seviyesinden belirtmek durumunda olmanızdır. Eğer htmlinizi yazarken sayfanızdaki görselleri, stilleri, scriptleri bu şekilde tanımlamadıysanız tüm sayfalarınızdaki yolları güncellemeniz gerekiyor.

Basit bir örnekle, ana dizinde duran bir index.php veya html dosyanızın olduğunuz varsayalım ve images, css ve js olarak 3 medya dizininiz olsun. html’inizi kodlarken yolları su şekilde belirtmeniz dogal:

Eğer bu uygulmanızda bu sayfayı sunan kodu domain.com/about/license gibi, birden fazla derinlikte bir url ile sunduğunuz zaman, tarayıcınız o sayfa kodunun /about/ dizininde çalıştığını varsayarak medya dosyalarınızı /about/js/, /about/images/ gibi dizinlerde arayacaktır.

Çözümü ise basit. İki seçeneğiniz var bu noktada. Her medya yolunu belirtirken http://domain/images/cat.jpg şeklinde tam yolu belirtebilirsiniz veya dosya/dizin yollarını belirtirken “/” işareti ile başlayarak domain seviyesinden itibaren işaret edeceksiniz yollarınızı yani yukarıdaki html kodunda her yol tanımlamasını “/” işareti ile başlayarak (ekleyerek) düzeltebilirsiniz.

Başında bir protokol ile belirtilmemiş her url domain üstündeki bir yolu ifade eder. “/” işareti ile başlayan yollar ise domain seviyesini işaret eder. Yani sadece “/” şeklinde tanımlanmış bir link aslında domain ana dizinini işaret eder. Ama bizim amacımız domain seviyesinden itibaren bir dizini işaretlemek, dolayısıyla /images/icons/plus.png gibi bir yol sızı nerede olursanız olur her zaman http://domain.com/images/icons/plus.png’yi işaret ederek istediğiniz dosyaya ulaştıracaktır.

Cookie Problemi

Bir diğer problem ise çerez (cookie) problemidir. Çerezlerin tarayıcıda kaydedildiğini hatırlamakta fayda var. Sunucu tarafında dahi çerez kaydetmek isteseniz o çerez aslında o isteğin cevabında gelen headerlar’da olacak ve tarayıcı istek cevabındaki değerlere göre çerezleri kaydedecek, silecek veya güncelleyecektir. Yani tarayıcının çerezleri yönettiğini bilmeniz gerekiyor, ayrıca çerezlerin dizin bağımlı olduklarını da belirtmek gerek. Yani bir çerezi /A/B/C dizininde iken ayarlarsanız bu çerez sadece C dizini ve alt dizinlerinden erişilebilir olacaktır. C dizinindeyken aryıca ana dizin, A ve B dizininde kaydedilmiş çerezlere de erişebilirsiniz. Tarayıcı, alt dizinlerdeki bir çereze erişimi bir üst dizinden veya paraleldeki bir dizinden vermez.

Bu durumda url’lerinizi klasör şeklinde ayarladıktan sonra uygulamanızda nerelerde çerez kaydediyor, siliyor veya güncelliyor olduğunuzu hatırlamanız ve güncellemeniz gerekiyor. Bu güncellemeyi hem javascript’deki cookie kullanımınız için hem de sunucu tarafındaki çerez kullanımınız için güncellemeniz gerekiyor. Sunucu tarafında bütün dillerde çok bilinen bir problem olduğu için yazdığınız sunucu taraflı dile ilişkin çerez methodlarını inceleyin. Ben kısaca php’de nasıl yapacağınızı anlatacağım.

Önce javascript ile çerez işlemlerinizi güncellemek için, normalde kullandığınız:

koduna ek olarak “path=/” eklemeniz gerekecektir (tabi ki ; ayracını kullanarak diğer çerez cümlenize ekleyebilirsiniz.

Bu size karışık gelmiş olabilir çünkü javascript ile çerez yönetimini herhangi bir kütüphane kullanmadan yapmanın yolu bu. Ancak muhtemelen jquery veya en azından çerezlerinizi okumak, silmek veya kaydetmek için bir kütüpahne kullanıyor iseniz kullandığınız kütüpahenin “path” yani çerez dizinini belirtebileceğiniz bir yöntemi vardır, bu yöntemi uygulayarak tüm çerezlerinizi ana dizininizde ayarlamalısınız, böylece çerezleriniz her yerden erişilebilir hale geleceklerdir.

PHP’de bu problemi çözmek için tüm “setcookie” fonksiyonunun (name, value, expire) standart kullanımına 4. parametre olarak “/” yani dizin parametresi eklemeniz yeterli olacaktır. Bu noktadan sonra kaydettiğiniz tüm çerezler ana dizine kaydedilecek, böylece her yerden erişilebilir hale geleceklerdir.

Bu konu, daha teknik noktalarda başka problemleri de beraberinde getiriyor fakat url’lerinizi klasör şeklinde ayarladıktan sonra ilk karşılaşacağınız iki büyük problemden ve çözümünden kısaca bahsetmiş oldum.

Web projeleriniz için güçlü bir UI kit: Twitter Bootstrap

Sürekli yeni projeler üretiyor, çoğunlukla hızlı bir şekilde basit arayüzler hazırlıyorsanız elinizin altında bir ui library oluşturmuşsunuz veya hazır bir arayüz setini kullanıyor olabilirsiniz. İnternette onlarcasını bulabileceğiniz kitlerin hepsi farklı amaçlara hizmet eden farklı çözümler sunan kitler genelde.

Çok basit bir örnek senaryo vereceğim, php tabanlı bir proje hazırlıyorsunuz, on yüzünü yazdınız ve implemente ettiniz. Sırada bir yönetim paneli hazırlamak var yazdığını koda ve veritabanına. Bunun için çok farklı yollar izledim yıllardır, son birkaç yıldır artık oturttuğum bir html4, less/css altyapım var. Basit bir MVC ile phptal ile view’lar phptal templateleri olarak buluyor ve less’leri derleyerek sade bir arayüzde kullanıyorum herşeyi.

Ama twitter bootstrap fikirlerimi biraz değiştirmeye başladı. View’larima çok fazla dökünmadan sadece html çıktılarımı biraz oynayarak twitter bootstrap’i projelerimden birine çok pratikçe entegre etmeyi başardım ve her geçen gün isimi daha kolaylaştırdığını görüyorum.

Güzel yani twitter tarafından geliştirilen bir arayüz kiti, daha da güzel yani açık kaynak kodlu ve birçok kişinin geliştirilmesine katkıda bulunduğu bir proje. Dolayısıyla crossbrowser problemleri çok fazla yok. Hatta eğer arayüzünüzü doğru tasarlarsanız responsive bir arayüzü de çok kafa yormadan sağlayabiliyorsunuz. http://twitter.github.com/bootstrap/scaffolding.html

Neredeyse bütün arayüz elementlerini düşünmüşler. Dolayısıyla bir web uygulaması için birçok hammal is yükünü üstünüzden alıyor. http://twitter.github.com/bootstrap/components.html

Neyse, proje sayfasından örnek uygulamaları, jquery geliştirmelerini ve github deposuna ulaşacağınız linki bulabilisiniz.

http://twitter.github.com/bootstrap/

Facebook paylaşım detaylarını kişiselleştirme

Biliyorsunuz Dünya’da Facebook kullanımında üçüncüyüz (2010 2. Çeyreğinde). Facebook kullanımı ve Türk milletinin facebook’da geçirdikleri vakit çok ve paylaşmayı seven bir millet olduğumuzdan her şeyi, sayfaları, etkinlikleri vs sürekli paylaşıyoruz. Link veriyor, video paylaşıyor, yorumlar yazıyoruz.

Şu an birçok kampanya şekillendirilirken sosyal medya entegrasyonu, sosyal medya yayılımı/dağıtımı düşünülerek tasarlanıyor. Hatta birçok kampanya sadece sosyal medya ile işler halde kurgulanıyor.

Neyse, bir web geliştiricisi olarak bir çok sayfa üretiyorsunuz, bunların paylaşılırken nasıl göründükleri, arama motoru, paylaşım botlarının sayfanızı otomatik olarak tanıdığını fakat nasıl tanıdığına belki dikkat etmiyorsunuz.

Facebook dışında metalardan görsel, video alan sosyal medya araçları var. Bu servisler aslında basit meta etiketlerindeki title, description, keywords bilgilerini kullanıyor fakat biliyorsunuz ki görsel ile desteklemek her zaman içeriğinizi daha zengin ve doğru gösterecektir. Aşağıda geniş bir örnek ile birkaç ek meta etiketi ile içeriğinizi botlara nasıl anlatacağınızı göstereceğim.

 

Yukarıda gördüğünüz önizleme, sayfanız paylaşıldığı zaman çıkan görsel ve metinlerdir. Facebook paylaşımları 3 parçadan oluşmaktadır. Sayfa görseli, başlığı ve açıklaması.

Görsel belirleme

Facebook sayfasında çıkan görsel eğer siz meta tagler ile belirlemediyseniz, sayfa içinde bulunan imajlardan otomatik olarak seçilir. Ama genellikle anlamsız imajlar ortaya çıkmaktadır. Bunu belirlemek için az sonra bir meta etiketi ile bir imaj göstereceğiz. Her sayfanız için özel bir görsel belirleyebileceğiniz gibi tüm siteyi anlatan tek bir görsel kullanarak da bu imajı belirleyebilirsiniz. Burada dikkat edeceğiniz nokta, kullanacağınız görselin boyutları arasındaki orandır. Facebook zaten sizin görselinizi resize edecektir fakat eğer belirttiğiniz görsel genişliği ile yüksekliği arasında katlarca fark varsa, yani fazla geniş veya fazla uzun görseller ise facebook bu görselleri görmezden gelecek ve resimsiz çıkacaktır. Genel bir görünüm oranı olan 4:3 veya 16:9 gibi resim formatlarını kullanabilirsiniz. Yani eni boyundan biraz daha uzun olan imajlardan bahsediyorum. Ayrıca bu imajın boyutunu kocaman bir wallpaper olarak koymayın. Zaten maksimum 100px genişlikte görüntülenecektir. Yani siz burada 200px genişlik 150px yükseklikte bir imaj hazırlayarak iyi bir oran yakalayabilirsiniz.

İkinci konu da görselinizin içeriği. Bu görselde çok fazla metin de kullanmayın, çok fazla resimsel format da. Yani burada kullanacağınız şeyin basit bir banner olduğunu düşünerek bir slogan ve bir ikon veya bir artalan fotografı üzerine bir logo da olabilir. Aşağıda örnek olarak hazırladığım bir imajı görebilirsiniz.

Eklenmesi gereken Meta etiketler

Aşağıda örnek bir kullanım göreceksiniz :

title ve description’da sayfa başlığı ve sayfa özeti yer alacak, image_src’de de yaptığınız görselin adresi yer alacaktır. Bu meta etiketlere sahip bir sayfayı facebook’da paylaşmak isterseniz yukarıda verdiğim önizlemedeki gibi bir sonuç elde edersiniz.

Sadece imaj değil, sayfa içerisindeki video ve ses dosyalarını da paylaşırken belirterek friendfeed gibi servislerde taranabilmesini sağlayabilirsiniz fakat yukarıdaki kullanım genel olarak tüm sayfalarda kullanılan çözümdür.

Eğer bu konuda bilgi edinmek isterseniz veya bu konuyu daha detaylı incelemek isterseniz Facebook Dökümantasyonundan bilgi alabilirsiniz.

Paylaşım

Sayfanızın paylaşılması için facebook share butonları ekleyebilir (http://www.facebook.com/facebook-widgets/share.php) veya doğrudan kendiniz link ile http://www.facebook.com/sharer.php?u=YOUR_URL şeklinde get methodu ile sayfa adresinizi bu adresin sonuna urlencode eidp eklerseniz facebook botu sayfanızı anlık tarayabilecektir.

Ya da normal şekilde insanlar sayfa adresinizi kopyala yapıştır yaparak facebook mesajlarına, news feedlerine ekleyeceklerdir.