6 Mart 2012 Salı

Zaman Ayarlı Popup Facebook Beğen Kutusu

33 yorum

Okuyuculardan bloga girildiğinde otomatik olarak açılan bir Facebook beğen kutusu paylaşmam konusunda çok istek almıştım.Bu konuda çok araştırma yaptım fakat bulduğum popuplar çok amatörceydi.Sonunda paylaşmaya değer bir eklenti bulabildim ve bir kaç ufak değişiklik yapıp, türkçeleştirdikten sonra sizlerle paylaşıyorum.Bulduğum bu scriptin kaybağı olan http://www.kakiheboh.com/ ‘a ne kadar teşekkür etsem azdır.

 

Zaman Ayarlı Popup Facebook Beğen Kutusu

 

Eklentinin çalışması şu şekilde: Eklentinin kodlarını ekledikten sonra birisi blogunuzu ziyaret ettiğinde, ana sayfa tamemen yüklendikten X saniye sonra ( kaç saniye olacağını belirleyebiliyorsunuz) bir popup belirerek Facebook beğen penceresi açılacak.Üzerinde tıklanınca Facebook sayfanıza yönlendiren bir Facebook logosu ile blogunuzu beğenmelerini sağlayacak bir Facebook beğen butonu var.Bu popup Facebook beğen kutusu X saniye ( kaç saniye olacağını belirleyebiliyorsunuz) sonra otomatik olarak kapanıyor.Bu ekletinin blogunuzun Facebook trafiğine çok katkısı olacaığını düşünüyorum.Nasıl çalıştığını görmek için hazırladığım videoyu izleyebilirsiniz.

 

 

Eklentiyi nasıl kullanacağınıza gelecek olursak, öncelikle aşağıdaki kodları şablonunuzdaki </body> kodunun hemen üstüne ekleyin.

 

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BlogHocam'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://yourjavascript.com/14800516592/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://yourjavascript.com/23104586981/bh-facebook-popup.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                       
        $().KNFBFansPRO({
           timeout: 10,
            wait: 0,
            url: 'http://www.facebook.com/bloghocam',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim.Bunların ne anlama geldiğini kısaca açıklamak gerekirsem:

 

  • KNFBFansPRO='BlogHocam' :Facebook.sayfanızın adresi facebook.com/facebooksayfam şeklindedir.Burada Blog Hocam yerine Facebook sayfanızın adresinin facebooksayfam kısmını yazın.
  • timeout: 10 : Bu değer popup’ın kaç saniye sonra otomatik olarak kapanacığını belirtir.
  • wait: 0 : Bu değer blogunuzun ana sayfası yükendikten kaç saniye sonra popup’ın açılacağını belirtir.
  • url: 'http://www.facebook.com/bloghocam' : Buraya Facebook sayfanızın tam adresini yazın.

Not: Eklentide kullanılan scriptlerin hepsi kendi dropbox alanımda.Ben silmediğim ya da dropbox kapanmadığı sürece scriptlerin çalışmasında hiç bir sorun olmaz.

 

Bu arada popup’ın her sayfa yenilendiğinde gözüktüğünü belirteyim.Biliyorum bu çok sıkıcı bir durum ancak şimdillik buna bir çare bulamadım.Araştırmaya devam ediyorum.Umarım en kısa sürede buna da bir çözüm bulur ve sizlere paylaşırım.

33 yorum:

  1. teşekkürler hocam eklenti güzel

    YanıtlaSil
  2. tesekkurler usta bircok kisinin aradigi birseyi yine sen paylastin

    YanıtlaSil
  3. Bende uzun zamandır araştırdım ve bulamamıştım.Teşekkürler güzel bir paylaşım olmuş

    YanıtlaSil
  4. Kullanılmasını önermediğim bir eklentidir. can sıkıcı bence.

    YanıtlaSil
  5. paylaşım için tşkler ama serdar arkadaşıma katılıyorum, bencede can sıkıcı bir eklenti ancak emeğe saygı.. Ben başka bir soru soracağım. Şablonumda sağ kenar çubugunu genişletmek için hangi kod ile oynamam gerekiyor?

    YanıtlaSil
  6. @maestro şablon tasarımcısı-genişlikleri ayarla kısmından yapılabiliyor.

    Hocam bu vb. eklentiler bence insanı o siteden soğuturlar. Pek tavsiye etmiyorum ama tabi bunu arayan arkadaşlar için emek harcamışsınız.

    YanıtlaSil
  7. İyi güzelde Her sayfada çıkıyor, sadece ilk sayfada çıksın, bloga girer girmez çıksa yeterlidir, denedim her sayfada çıkınca kaldırdım..
    Ellerine sağlık anlatım için..

    YanıtlaSil
  8. @Urfalı
    Yazının tamamını okumamışsınız sanırım.Yazıda belirttim zaten her sayfada çıkmasının can sıkıcı olabileceğini ve çözüm arayışı içinde olduğumu

    YanıtlaSil
  9. @Serdar Kara
    Öncelikle ben de kullanmayı düşünmüyorum ama emeğiniz için teşekkürler.

    Daha önce paylaştığınız bir yazıdan yola çıkarak test blogumda şunu denedim. Kodların başına (b:if cond='data:blog.url == data:blog.homepageUrl') sonuna ise (/b:if) eklenince sadece anasayfada çıkıyor. Yorum kısmına kod eklenemdiği için parantez kullandım. Yalnız anasayfaya her tıklandığında tekrar tekrar çıkmasına bir çözüm bulamadım:)

    YanıtlaSil
  10. @Özgür Öztürk
    Sadece ana sayfada gösterilmesi için dediğiniz yöntem uygulanabilir, haklısınız.Her ana sayfaya girildiğinde tekrar tekrar çıkmaması için çözüm arayışım devam ediyor.

    YanıtlaSil
  11. Serdar Abi kendi istediğim resmi Koymak İstiyorum Onu yapamazmıyım ?

    YanıtlaSil
  12. @Haylaz
    Yapabilirsin.Kodlarda popup java script dosyası var.Onu düzenlemen gerekiyor.

    YanıtlaSil
  13. Bu kodlar yalnızca Blogger için geçerlidir, teşekkürler

    YanıtlaSil
  14. @Sinan Çırka
    Ekleyebilirsiniz.

    YanıtlaSil
  15. birde bloğumun altında powered blogger ve kayıtlar atom diye birşeyler yazıyor onu nasıl kaldırabilirim?

    YanıtlaSil
  16. çok teşekkür ederim yine şahane bir paylaşım yapmışsınız yeni gördüm..

    YanıtlaSil
  17. çok güzel ve kolay oldu. Çok teşekkürler

    YanıtlaSil
  18. Bunu da yaptım, umarım sorun çıkmadan çalışır.. facebook eklentisi çalışması durdu çünkü

    YanıtlaSil
  19. Ben bu tür yazılımların spam olarak algılandığını (en nihayetinde pop-up) ve muhakkak kaçınılması gerektiğini onlarca yabancı sitede okudum. Ama denemek isteyen arkadaşlar için söylüyorum sorunsuz çalışıyor.

    YanıtlaSil
  20. Sorunsuz çalışıyor ancak pop up ın yüksekliği kısa olmuş dolayısıyla üye resimlerinin yarısını göstermiyor. Bunu nasıl düzeltebiliriz?
    www.dekorcafe.com

    YanıtlaSil
  21. Benim bir sorunum var hocam bunu koydugum ve kendi sayfamı yazdıgım zaman begen deyince onayla dıye bır uyarı cıkıyor o neyden kaynaklanmaktadır?

    YanıtlaSil
  22. hocam hangi linki silip bizim istediğimiz resimi ekleyebiliriz ?

    YanıtlaSil
  23. @emre demirer
    Resmi bh-facebook-popup.js doyasından değiştirebilirsiniz.

    YanıtlaSil
  24. hocam eline sağlık bende bu kodları arıyordum. çok sağol. klavyen dert görmesin.

    YanıtlaSil
  25. hocam bunu aspx sayfasına da atabiliyor muyuz? ben attım çalışmadı ne nerde hata yapmış olabilirim? Bloga ekeldim oldu fakat kendi sitem için denedim olmadı.

    YanıtlaSil
  26. Hocam Ben ekledım bloguma ancak , " HTML'iniz kabul edilemez: Etiket kapalı değil: DIV " şeklinde yazı cıktı neden sence

    YanıtlaSil
  27. Teşekkürler hocam ekledim çalışıyor.

    YanıtlaSil
  28. Uzun zamandır aradığım son derece güzel bir yazı. hemen bloguma ekleyeceğim, bakalım nasıl sonuç çıkacak. Ayrıca bunun vbulletin de işe yarayanı var mı acaba

    YanıtlaSil
  29. Arkadaşlar, benim köyümüze ait küçük çaplı wp blog sayfam var. bunu ona ekleyebilir miyim. Bir deneyelim bakalım nasıl sonuç vereçek.

    YanıtlaSil

Picardes

LİNKLER