Kullanıcıyı Tanıyan Popup: Facebook Beğen Kutusu

 

Bloglar için geri dönüşüm oranı en yüksek “Call To Action”lardan biri hatta birincisi Popup dediğimiz siteye girince otomatik açılan küçük pencerelerdir. Blogcular, bu popupları özellikle Facebook sayfalarını beğendirmek için kullanıyorlar. 

Bu yazıda paylaştığım eklentiyi blogunuza eklediğinizde, yeni bir ziyaretçi giriş yaptığında Facebook sayfanıza ait beğen kutusu popup olarak açılacak. Cookie özelliği sayesinde aynı ziyraretçi 7 gün içerisinde tekrar giriş yaparsa o kullanıcıya popup tekrar gözükmeyecek.

 

cookie-facebook-popup

Eklentiyi blogunuzda kullanmak isterseniz Şablon > HTML’yi Düzenle > Devam Et yolunu izleyerek Ctrl + F tuş kombinasyonunun yardımıyla </head> kodunu bulun ve hemen üzerine şu kodları ekleyin.

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://yourjavascript.com/21316592254/cookie-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie(&#39;popup_user_login&#39;) != &#39;yes&#39;){
$(&#39;#fanback&#39;).delay(100).fadeIn(&#39;medium&#39;);
$(&#39;#fanclose, #fan-exit&#39;).click(function(){
$(&#39;#fanback&#39;).stop().fadeOut(&#39;medium&#39;);
});
}
$.cookie(&#39;popup_user_login&#39;, &#39;yes&#39;, { path: &#39;/&#39;, expires: 7 });
});
</script>

 

İkinci olarak ]]></b:skin> kodunu bulun ve hemen üstüne şu kodları ekleyin.

 

#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5zxwsuFwZ5YoXINQdbIwYZZM1bk47k8Dunxu5LFPHtzw0l9MsVEN_8yDpaZg9e1w3iauJ47d3eLvBJCshRsgl0uqqTTlJ7jKePAk2s9KEeCxpu9pjNvpAgnBIoVpqDMNtkMxoGldbn9a/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}

 

Son olarak </body> kodunu bulun ve üstüne şu kodları ekleyin.

 

<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/bloghocam&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'/>
</div></div>

 

Önizleme yaptığınızda popup açıldıysa şablonu kaydedebilirsiniz. Sayfayı yenilediğinizde sizi tanıyacağından popup aılmayacaktır. Çalışmadığını düşünmeyin. Tarayıcınızın çerezlerini silip sayfayı tekrar ziyaret ettiğinizde popup açılır.

 

Bu arada kodlarda biri zorunlu, diğeri isteğe bağlı olmak üzere değiştirebileceğiniz 2 yer var.

  • Verdiğim ilk kodlardaki 7 yazan yere, popupın anı ziyaretçiye kaç gün gözükmeyeceğini yazın.
  • http://www.facebook.com/bloghocam yazan yere kendi Facebook sayfanızın adresini yazın.

60 yorum:

  1. hocam kullanmayı düşünüyorum ancak bloguma daha önce eklediğim facebook beğen kutusunu kaldırmak gerekecek mi yoksa ikisi birlikte kullanılabilecek mi?

    YanıtlaSil
  2. hocam bir soru daha 7 günlük sürenin alat ve üst limitleri var mı?
    şimdiden teşekkür ederim.

    YanıtlaSil
  3. Diğer Facebook kutusunu kaldırmanıza gerek yok. Popup'ın süresi için alt ve üst limit denemediğim için bir bilgim yok ama 7-30 gün arası ideal gibi duruyor.

    YanıtlaSil
  4. Hocam sizin bu sayaçlı olanı nasıl ekleyeceğimizi paylaşmış mıydınız ?

    YanıtlaSil
  5. @Duygu Uygun
    Sayaçlı derken hangisini kastettiniz?

    YanıtlaSil
  6. fb, twitter, rss, yazı, yorum sayaçları kutucuğunu sağdaki

    YanıtlaSil
  7. Onu daha önce şurada paylaşmıştım zaten. Ancak RSS sayacında bir sorun olduğu boş gözüküyor.

    YanıtlaSil
  8. teşekkürler hocam. kolay gelsin

    YanıtlaSil
  9. tamamdır teşekkür ederim :)

    YanıtlaSil
  10. Çok teşekkürler uzun zamandır böyle bir şey arıyordum. ;))

    YanıtlaSil
  11. Ben de yakın zamanda böyle bir şey düşünmüştüm ama tam olarak böyle değil benim düşündüğüm şöyle idi;
    Eğer ziyaretçi site de 3-4 dk. kalmış ise siteyi veya yazıyı beğenmiş demektir. O zaman pop-up menü ile abone olmayı önerebilirim diye düşünmüştüm.

    Son olarak ise hocam eğer facebook sayfasını beğenmiş ise yine de cokie çerezini temizledikten sonra yine karşısına bu pop-up çıkacak mı?

    YanıtlaSil
  12. @sadık bozkurt
    Kişinin sayfayı beğenip beğenmediğini algılayamaz. Çerezler silindikten sonra her kullanıcıda tekrar gözükür.

    YanıtlaSil
  13. Bu şekilde bir pop-up blog sahibi için umut verici olabilir ama izleyici için pek iyi bir şey değil bence. Ben siteye girenler için bir pop-up açılsın isterim ama içeriği bir Hoşgeldiniz mesajı olmalı. Bunu nasıl yapacağımı öğrenemedim bir türlü. Yardımcı olursanız ne kadar çok sevinirim. Blogunuz çok yararlı. Gitgide popüler olmaya başladınız. Başarılarınızın devamını diliyor sizi k eyifle izliyorum HER TELDEN EVERYTHİNG

    YanıtlaSil
  14. @Gülsüm Güven Tuncer
    Siteye her girildiğinde veya bir sayfadan başka bir sayfaya geçtiğinde sürekli popup açılması dediğiniz gibi ziyaretçiyi çileden çıkarabilir ama bu popup ziyaretçiyi tanıdığı için aynı kişiye sadece 1 kez gözüküyor. Güzel olan yanı da bu.

    Aslında benzer yöntemle sadece Facebook beğen kutusu değil, her hangi bir resim veya yazı da popup olarak gösterilebilir. Onu da başka bir yazı da açıklarım.

    YanıtlaSil
  15. hocam ben düzenleme yaparken maalesef bir hata oldu ve tekrar yapmam gerekti. ikinci kez ön izleme yaptığımda bu sefer pop up gözükmedi tanıdığı için. nasıl düzeltebiliirm? Yardımcı olursanız çok sevinirim

    YanıtlaSil
  16. Hocam gerçekten güzel anlatmışsınız.ben de siteme eklemeyi düşünüyorum.ama acaba gelen ziyaretçiyi negatif yönde etkilermi diye de düşünmüyor değilim..paylaşım için teşekkürler.

    YanıtlaSil
  17. @Esra bayırsokak
    Çerezleri temizleyerek tekrar görüntüleyebilirsiniz. Tarayıcı olarak Chrome kullanıyorsanız Araçlar > Tarama verilerini temizle bölümünden çerezleri silebilirsiniz.

    YanıtlaSil
  18. hocam herzamanki gibi harika bir paylaşım olmuş.hemen uyguladım.Ellerinize sağlık.Var olun.

    YanıtlaSil
  19. Çok güzel bir çalışma. Sağolun Hocam

    YanıtlaSil
  20. 2. adımdaki kodu bulamadım yardımcı olurmusunuz

    YanıtlaSil
  21. İyi günler,

    çalışmalarınız çok yararlı oluyor. Fakat bir şey sormak istiyorum. Ekranda sadece 3-5 saniye kalıyor pop-up sonrasında kayobluyor. Bu bir özelliği mi yoksa acaba bende mi bir sıkıntı var ?

    YanıtlaSil
  22. @Gökhan El Khalisi
    Bloga birden fazla Jquery eklediyseniz çakışıyordur.

    YanıtlaSil
  23. Abi Video Çekersen Daha İyi Olur Yazarak Anlamadım VİDEO ÇEKER MİSİN ?

    YanıtlaSil
  24. ya bu benim sitede neden çalışmıyor dostlar herşeyi dogru yapıyorum wp sitem var ne ettimse çalıştıramadım

    YanıtlaSil
  25. YİNE HARİKA OLMUŞ. http://grandozgultermaltr.blogspot.com/ İSİMLİ SİTEMİN FACEBOOK SAYFASINA ÇOK BÜYÜK KATKI SAGLAYACAGINI UMUT EDİYORUM.EMEGİNİZ İÇİN TEŞEKKÜR EDERİM.

    YanıtlaSil
  26. merhabalar bu açılan pencereye facebook sayfası yerine twitter takip et popup'u koyabilirmiyiz?

    YanıtlaSil
  27. @yemreorman
    Son bölümdeki Facebook beğen kutusunun kodları yerine ne koyarsanız popup olarak o gözükür.

    YanıtlaSil
  28. Yaptım ancak google chorme da sayfamda altta kalıyor ne kapatabiliyorum ne kaydırabiliyorum internet explorar da düzgün çalışıyor ne yapabilirim acaba? www.intrustweeat.blogspot.com

    YanıtlaSil
  29. @In Trust We Eat
    Sanırım başka bir jquery scripti daha eklemişsiniz blogunuza, ikisi çakışıyor.

    YanıtlaSil
  30. Ben androidsitem.net sayfamda bunu kullanmak istedim fakat bunu kullanınca üst bölümde ki slayt alanı kafayı yiyor ve hareket etmiyor.

    YanıtlaSil
  31. Hatayı çözdüm

    yabancı bir forum sitesinden "jquery" scripti daha önce eklenmiş ise eklenen yeni scripti silin diyordu aşağıda ki bölümü sildim sorun çözüldü

    script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>

    YanıtlaSil
  32. Abi Video Çeksen Süper Olur Anlamadım Ben Bişe Lütfen

    YanıtlaSil
  33. eee hocam ben çerezleri sildiğim halde gelmedi bak bloguma http://t-oyunindir.blogspot.com/

    YanıtlaSil
  34. Hocam tek kelimeyle harikasın.Ellerine,emeğine sağlık.İnterneti yerli yabancı taradım doğru düzgün çalışan tasarımı güzel olan,giren kişiyi tanıyan tek eklenti seninkisi.Tebrikler.Çalışmalarının devamını diliyorum.Desteğimiz arkanda.

    YanıtlaSil
  35. Hocam begen tuşunu tıklarsak ilk önce şu sayfaya yönleniyor neden aceba...http://www.linkbucks.com/

    YanıtlaSil
  36. @Dilek Dursun
    Hayır, bu eklentide öyle bir şey söz konusu değil. Tekrar denedim ama her hangi bir yönlendirme yok. Başka bir şeyden kaynaklanıyor olabilir.

    YanıtlaSil
  37. teşekkur ederim.bakacağım tekrar:)

    YanıtlaSil
  38. herhangi bir sorun yok blog'uma ekledim ne nefis çalışıyor..
    Hata yapıpta birdaha önizlme yapıp göremeyen arkadaşlara bir önerim var..
    Serdar Bey'in belirttiği kırmızıyla 7 yazan yere 0 yazsınlar ve o şekilde kontrol edip sonra istedikleri değeri yazabilirler tekrardan..
    Teşekkürler Serdar bey gerçekten güzel bir eklenti oldu..

    YanıtlaSil
  39. bunu masterpage uygulamamda nasıl kullanabilirim..

    YanıtlaSil
  40. merhaba bu kod hala geçerlimi acaba ben şablonumda
    ]]> kodunu bulamıyorum yardımcı olursanız çok menun olurum iyi çalışmalar..

    YanıtlaSil
  41. @Terzi Esma
    http://s1310.hizliresim.com/1g/5/t9gqu.png resimde gördüğünüz şekildedir. Oka bastığınızda o kısım açılır.

    YanıtlaSil
  42. Selam hocam blogunuzu hatim ediyorum 1 aylik blogum var bu eklentiyi bugun ekledim bir sorunum var Sablon ici bos cikiyor sadece kare seklinde iki ayri bloga denedim ikiside ayni dis cercevesi var ici beyaz bos sebeb nedir acaba saygilarimla

    YanıtlaSil
  43. @takirdama tikirdama
    Merhaba içi boş çıkıyor dediğiniz açılan popup pencere mi? Eğer öyleyse facebook sayfanızın adresini yanlış yazmışsınızdır ya da sayfa yerine profil adresi yazmışsınızdır.

    YanıtlaSil
  44. Selam hocam cok haklisiniz ben id yi yanlis yazdim acemilik var cok tesekkur ederim daha cok okumam gerek bligunuzu gercekten Blogerlarin ilham alacagi bir blog ne ararsam buluyorum ve siz cok ilgilisiniz kac bloga yazdim ama cevap gelmedi ama sizden geldi tesekkur ederim
    http://yazdirmaca.blogspot.nl/ Hollandadan sevgiler

    YanıtlaSil
  45. Paylaşımınız için teşekkürler, Opencart'a uygulamaya çalıştım ama olmadı malesef.
    Yinede blogger kullanan arkadaşlar için güzel bir uygulama olmuş, tebrikler.

    YanıtlaSil
  46. şuan denedim reklam sistemini kilitledi resmen spam...
    veritabanından girip eklentiyi silmesem Allah Rahmet eylesin..
    Teşekkür edecek bişey bulamadım ama argo saydım .... sevgiler

    YanıtlaSil
  47. hocam kodda yer alan java script dosyası temamdaki javascript dosyasıyla çakışıyor. Blogdaki slider çalışmazsa kod çalışıyor, slider çalışınca da verdiğiniz kod çalışmıyor.

    sorunun çözümü varmıdır? bi yardım etseniz?
    http://www.cyberrx.blogspot.com.tr

    YanıtlaSil
  48. @Sanal Alem
    Javascriptle alakası yok. Jquery birden fazla olduğu içindir. Birini kaldırın.

    YanıtlaSil
  49. teşekkürler serdar hocam.Bu arada özelden soru sormuştum müsait bir zamanınızda yanıtlarsanız çok sevinirim.Saygılar

    YanıtlaSil
  50. hocam menüdeki hakkımda yazısını nasıl dolduracağım ?

    YanıtlaSil
  51. saol kardeşim işime yaradı

    YanıtlaSil
  52. kısacası 7 yazan yere ne yazacağız onun dışında herşey tamam:)

    YanıtlaSil
  53. @ÇiğdeM'ce Lezzetler
    Popupın anı ziyaretçiye kaç gün gözükmeyeceğini yazın.

    YanıtlaSil
  54. 0 yazmıştım ben bu yüzden sanırım hep çıkıyor siz söyleyin kaç yazmalıyım uygunu nedir

    YanıtlaSil
  55. Sabahtan arıyorum bulamadım. Nasıl X resmini saniyeler sonra gösterebiliriz?

    YanıtlaSil
  56. gerçekten süper hocam ellernize sağlık :)

    YanıtlaSil
  57. wordpressde şablon kısmını nerden bulabilirim

    YanıtlaSil

Blogger tarafından desteklenmektedir.