Bir Kere Açılan Facebook Beğen Popup Eklentisi

ads

ads

Ziyaretçiye Duyarlı Facebook Beğen Popup Eklentisi

Blog siteleri için en çok geri dönüşüm sağlayan kuşkusuz popup kutucuklarıdır. Blog sahipleri genellikle sosyal sayfalarını özellikle  facebook sayfalarını beğendirmek amaçlı popup açılır eklentiler sitelerinde kullanmaktalar.

Bir önceki makalemizde
Facebook Beğen Kutusu - E-posta Aboneliği Eklentisi anlatmıştık

Blogger kullanıcıları için paylaşacağımız bu eklenti, ziyaretçi sitenize giriş yaptığında tek sefere mahsus açılacak . Cookie özelliği ile ziyaret eden kişiyi algılayabilecek ve belirlenmiş bir  zamana kadar bir daha bu pencere açılmayacaktır. Ben cookie süresini 3 günlük zamana göre ayarladım. Kodlarda oynama yaparak bu süreyi uzatabilir yahut kısaltabilirsiniz. Fakat ne kadar uzun süreli olursa o kadar iyi olacaktır. Ziyaretçiler hiç bir  zaman sürekli açılan popup pencerelerden rahatsız olur ve bir daha sitenize girememek için elinden geleni yapabilirler.

Bu eklentimiz kesinlikle blog okuyucusunu rahatsız edecek şekilde kodlanmamıştır. Tek sefere mahsus girişte belirir ve X butonuna tıklayarak ister kapatır isterse sayfanızı beğenir. Herhangi bir rahatsız edici bir özelliği bulunmaktadır. Bir diğer sitemde kendimde kullanmaktayım

Eklentinin kurulumunu 3 adımda gerçekleştireceğiz.

1. adım

Şablon > HTML’yi Düzenle > Devam Et yolunu izleyerek Ctrl + F yardımı ile </head>  kodunu aratarak bulun sonrasında bir satır üst kısmına aşağıdaki kodunuzu 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='https://dl.dropbox.com/u/60346665/cookie-jquery.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(100).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 3 }); }); </script>

'/', expires: 3 }); yazan yeri ziyaretçiye kaç gün içinde tekrar gözükmesini istediğiniz günü istediğiniz kısa  zaman veya uzun zamana ayarlamanız mümkündür. ideal olan 2 veya 3'dür.

2. adım.

Bu bölümde ]]></b:skin> kodunu Ctrl + F yardımı ile temanızın kodlarının içinde aratın. Bulduğunuz  ]]></b:skin> kodunun üst kısmına gelecek şekilde aşağıdaki kodu 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/AVvXsEj9Eo1ksdv6Mcn91KRMccBuZxaMfC-VNxjFEVwDEgI6Muj7ifn3y4z2j8cS7jRue-iTMBHQ-yGMSc31KqW03SIg_m9ZHUQLdNlzUG4ML6AQI6sm2PXRRoiMFWEBirTu78uPmyZ2wimSjFyx/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;}

3. adım.

Bu kısım son bölümdür.  Gene aynı şekilde temanızda şu kodu bulun </body> ve üstüne gelecek şekilde aşağıdaki kodu 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/ibrahim34.58&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>


Kodun içinde bulunan ( aşağıdaki kod parçası )  mavi ile belirtilen bölüme kendi facebook sayfa ismini yazın
http://www.facebook.com/ibrahim34.58&amp;

 

ads