Web sitelerinde verilen dış bağlantılar için link üzerine gelindiğinde gidilecek sitenin ekran görüntüsünün (screenshot) bir tooltip aracılığıyla gösterimine şahit olmuşsunuzdur. Bu gibi uygulamalar çoğunlukla sadece javascript kullanılarak yapılıyor olsa da, ben olayı biraz daha basite indirgeyip böyle bir uygulamanın PHP yardımıyla nasıl yapılabileceğinden bahsedeceğim.
Uygulama için öncelikle Thumbshots.org‘a teşekkür etmemiz gerek. Site ekran görüntüleri için bu sitenin sağladığı ücretsiz ekran görüntüsü servisten yararlanacağız.
Kullanacağımız bir diğer uygulama ise Oliver Bryant tarafından javascript ile hazırlanan boxover.js isimli, basit ve belli başlı tüm browserlar tarafından desteklenen bir tooltip uygulaması.
boxover.js dosyasını screenshot göstermeye uygun bir şekilde düzenledikten sonra (bu işi ben hallettim) yapılacak ilk iş, metinlerin içerisinde yer alan ve http://www. / www. ile başlayıp .uzantı ile biten içerikleri otomatik olarak algılayıp linklendirecek ve ekran görüntüsü ifadesini ekleyecek bir otolink fonksiyonu oluşturmak:
1 2 3 4 5 6 7 8 9 10 | <?php function otolink($text) { $pattern = "/(((http[s]?:\/\/)|(www\.))?(([a-z][-a-z0-9]+\.)?[a-z][-a-z0-9]+\.[a-z]+(\.[a-z]{2,2})?)\/?[a-z0-9._\/~#&=;%+?-]+[a-z0-9\/#=?]{1,1})/is"; $text = preg_replace($pattern, '<a href="$1" target="_blank" title="header=[<img src=images/link.png> $1] body=[<img src=http://open.thumbshots.org/image.aspx?url=$1>]">$1</a>', $text); $text = preg_replace("/href="www/", "href="http://www", $text); $text = preg_replace("/link.png> www./", "link.png> ", $text); $text = preg_replace("/link.png> http:\/\/www./", "link.png> ", $text); $text = "$text <script src="boxover.js"></script>"; return $text; } ?> |
Bu fonksiyon adresleri otomatik olarak algılayıp linklendirdiği gibi url’lere ekran görüntüsü için gerekli javascript kodlarını da ekliyor. Fonksiyonu otolink.php ismiyle kaydettikten sonra kullanmak istediğimiz dosyalara include ediyoruz.
Kullanım:
1 2 3 4 5 6 7 8 9 10 11 12 | <?php include('otolink.php'); // screenshot içerecek metin $metin = "Şu an için en bilinen arama motorları www.google.com ve www.bing.com'dur. "; // metni otolink fonksiyonu ile işliyoruz $metin = otolink($metin); // metni ekrana yazdırıyoruz echo "$metin"; ?> |
Hepsi bu kadar. Dikkat edilmesi gereken bir nokta da boxover.js dosyasının ve images klasörünün, fonksiyonu kullandığımız dosya ile aynı dizinde olması gerektiği. Bunun haricinde scripti dilediğiniz gibi mıncıklayıp kendinize göre düzenleyebilirsiniz.
Sonuç (demo):
Scriptin detaylı örneği:
Demo
Script dosyalarını indir:
Download
PHP ile üretilen bu fonksiyona alternatif olarak, sadece bizim tanımladığımız metinlere değil de sitede yer alan tüm url’lere sitenin en altına eklenecek bir kod betiği ile böyle bir uygulama yaptırabiliriz. Bunu da ilerleyen zamanlarda (sanırım PHP’ye ihtiyaç kalmadan) salt javascript veya ajax yardımıyla hazırlayacağız.
bu çok güzel iştee saolasın
Egocum güzel anlatım ellerine sağlık. Yanlız bişey fark ettim, thumbshot.org benim blog resimini alamıyor :) Verilen domain in sadece ana dizini üzerinde çalışıyor :D
Evet walla öyleymiş, ben de yeni farkettim Evocum :)
Genelde forumlarda ve bloglarda yazıları okur çıkarım ama böyle güzel ve işe yarar bir yazı için yorum yazmak istedim.Paylaşım için teşekkürler…
onbine 8 yorum kaldı
merhaba peki bu kodları koduna uyumlu hale nasıl getirebiliriz?
merhaba peki bu kodları koduna uyumlu hale nasıl getirebiliriz?