Flash’ta SEO – Deep Linking (SWFAdress) Tekniği

23. Eyl, 2011 15 Yorum

SWFAddress (Deep Linking methodu) Flash ve Ajax için çok küçük ama çok etkili bir kaynaktır. Bir web sitesinde sınırsız sayıda hedef URL adreslerinin oluşturulması açısından mükemmel bir geliştirici araçtır. Günümüzün zengin web teknolojiye kazandırdıkları;

Bir sosyal web sitesine veya tarayıcıya bookmark özelliği
E-posta veya anlık ileti yoluyla bağlantıları gönderme
Büyük arama motorları ile belirli içerik bulma, SEO uyumluluğu
Tarayıcı geçmişi ve yeniden yükle düğmeleri
SWF dosyasının çağırdığı swf dosyaları yada okuduğu xml dosyalarınınve buna bağlı olarak resim dosyalarının kolay kolay bulunamaması gibi…

Günümüzde çoğu flash web sitesi bu teknikler tasarlanmakta. Bunu bir örnek siteyler pekiştirecek olursak burayı tıklayanız

bu örnekte göreceksinizki her menüye tıklanışında sayfa yenilenmeden başlığıda tıklanan menüye göre değişmekte. Böylelikle bir nevi her menü düğmesi kategorilendirilmişte olmaktadır. Bu olayın güzel tarafı Google benzeri arama motorları bu kategorilendirmeyi dikkate almakta.

Lafı daha fazla uzatmadan gel gelelim bu tekniğin nasıl kullanıldığına.

Deep Linking SWFAdress Tekniği

örnek dosya ile anlatım

Öncelikle yukarıdaki örnek sitedeki yapıyı ele alacağımızdan dolayı siteye ait kaynak kodlarımızı buradan indiriyoruz. ( deep linking kodlarının orjinal hallerini indirmek ve diğer eklentilerle kullanmak istiyorsanız
bu siteden indirebilirsiniz. orjinal dosya adresi)

zip arşivi halindeki dosyaları çıkarıyorsunuz. İçerisinde örnekler ve gerekli dosyalar var. Böylelikle kod bilgisi olmadan bu yöntemi kulanabilmiş olucağız. Zip dosyasında bulunan dosyalar

swf_address.fla (CS3)
swf_address.swf
index.html
AC_RunActiveContent.js
SWFAddress.as
SWFAddressEvent.as

swfaddress klasörü ve içinde iki dosya:
swfaddress.html
swfaddress.js

swf_address.fla dosyasını , SWFAddress.as ve SWFAddressEvent.as dosyalarını CS3 Flash ile açın. Göreceksinizki swf_address.fla dosyasında her bir keyframe ayrı ayrı action scrip tanımlanmış, ve bu dosyasındaki her bir keyframede “//SWFAddress.setValue(‘değer’);” açıklayıcı satırı ve altında kodu bulunmakta. Buradaki değerlerden birini değiştirip çalıştıracak olursanız adres satırında o düğmeye tıklandığında oraya yazdığınız değerin geldiğini göreceksiniz.

örnekteki html dosyasına bakalım şimdide

<script src="AC_RunActiveContent.js" language="javascript"></script>
<script type="text/javascript" src="swfaddress/swfaddress.js?html=true&amp;strict=false">
</script>

kodları eklenerek kaynak javascript kodlarını okumakta olduğunu göreceksiniz. Bu örnek dosyayı incelediğinizde bu işlemin çokta zor olmadığını göreceksiniz.

Not: Yapmış olduğunuz değişiklikleri görebilmek için tüm dosyalarınızı serverınıza FTP ile göndermelisiniz.

genek anlatım

ilk önce yukarıdaki adresten orjinal dosyaların bulunduğu dosyayı indiriyoruz;
(linkteki dosyayı yukarıda indirmeyenlerburayı tıklasın )

Samples->Cs3 klasörü içerisindeki SWFAddress ve swfobject isimli klasör + SWFAddress.as ve SWFAddressEvent.as yi kendi swf dosyalarınızın olduğunu yere kopyalayın. İşte oldu.
Gerekli dosyaların tamamı yüklendi…

şimdi html dosyasındaki kodlara bakalım;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>www.mikropsoft.net</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
        /*<![CDATA[*/
            html, body, #website {
                height: 100%;
                overflow: hidden;
            }
            body {
                background: #CCCCCC;
                font: 86% Arial, "Helvetica Neue", sans-serif;
                margin: 0;
            }
        /*]]>*/
        </style>
        <script type="text/javascript" src="swfobject/swfobject.js"></script>
        <script type="text/javascript" src="swfaddress/swfaddress.js"></script>
        <script type="text/javascript">
        /*<![CDATA[*/
            swfobject.embedSWF('index.swf', 'website', '100%', '100%', '9.0.45',
                'swfobject/expressinstall.swf', {}, {bgcolor: '#FFFFCD', menu: 'false',
 wmode: 'opaque'}, {id: 'website'});
        /*]]>*/
        </script>
    </head>
    <body>
        <div id="website">
            <p>In order to view this page you need Flash Player 9+ support!</p>
            <p>
                <a href="http://www.adobe.com/go/getflashplayer">
     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" />
                </a>
            </p>
        </div>
    </body>
</html>

Burada swfobject sayesinde Js api içerisine swf dosyamızı yüklüyoruz. Bu sayede veri iletişimini sağlayacağız. Bu kodları FTP den serverınıza yada localhosttan deneyelim. Normalde adres satırı şöyle olacaktır;

localhost/ornek/index.html# veya siteadresiniz/ornek/index.html# HTML de ? ile veri gönderilmesinin burada # ile olduğunu görüyoruz.

Kaynaklar:

Benzer Yazılar:

Flash

Ajax, Deep Linking, Flash, Web