PHP – Tooltip Screenshot (Site ekran görüntüsü)

tooltip-screenshot
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.

Facebook Yorumları

7 Yorum

  1. 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 😀

  2. 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…

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir