Öncelikle cevabınız için teşekkürler. Aşağıdaki gibi direkt facebook için olan bir eklenti arıyorum. Her sayfada sürekli çıkmayacak güzel bir eklenti bulamadım.
Bunun için herhangi bir eklentiye ihtiyacınız yok. jQuery ve Css kullanarak ta yapabilirsiniz aynısını. Aslında sadece Css3 kullanılarakta yapılır ama Css3'teki geçiş efektleri bütün tarayıcılarda desteklenmediği için mecburen jQuery kullanmanız gerekiyor dedim.
Burada bahsettiğiniz örneğin bir benzerini hazırladım.
Css kodlar bölümünde .facebookCerceve kısmında bulunan margin-top:10%; değerini kendi web sayfanıza göre ayarlamanız gerekiyor. margin-top:40% oranında yaparsanız hemen hemen sayfada ortalanır. Jsfiddle sitesinde ekran küçük olduğu için 40% yapınca görünmüyor bu yüzden görmeniz için 10% şeklinde ayarlayıp bıraktım. Jsfiddle üzerinden bazı bölümler görünmediği için burada da ayrıca kodları nasıl yerleştireceğinizi göstereceğim.
Wordpress kullandığınız için büyük ihtimal sitenizde kurulu bir jQuery kütüphanesi olması gerekiyor.
Eğer yoksa header php dosyası içine şu kodu ekleyin.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Ardından mouse çerçeve üzerine geldiği an sola doğru kayması için aşağıdaki
javascript kodu yine header.php dosyasına eklemeniz gerekiyor.
<script>
$(document).ready(function(){
$(".facebookCerceve").mouseover(function(){
$(this).stop().animate({marginRight:'-10px'})
});
$(".facebookCerceve").mouseout(function(){
$(this).stop().animate({marginRight:'-310px'})
});
});
</script>
Temanızın style.css dosyasına da aşağıdaki Css kodları ekleyin
.facebookCerceve {
width:350px;
height:300px;
border-radius:5px;
position:fixed;
right:0px;
margin-right:-310px;
margin-top:10%;
z-index:999;
}
.facebookCerceve .panel{
width:45px;
height:300px;
display:block;
float:left;
}
.facebookCerceve .panel img{
margin: 75px 0px;
}
.facebookCerceve .begeKutusu{
width:250px;
height:300px;
display:block;
float:left
}
Geriye kaldı sayfada facebook beğen kutusunun görünmesine. Aşağıdaki html kodları da metin bileşeni yardımıyla sidebara ekleyin. Olurda o şekilde çalışmaz ise sidebar.php dosyasına aktarın. Yanlız ben kendi facebook sayfamın kodlarını eklediğim için benim kodları silip kendi sayfa kodlarınızı eklemeyi unutmayın
<div class="facebookCerceve">
<div class="panel">
<img src="https://i.hizliresim.com/K4vknA.png">
</div>
<div class="begenKutusu">
<div id="fb-root"></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fm intikdotcom&width&height=290&colorsche me=light&show_faces=true&header=true&s tream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>
</div>
</div>
Son olarak bu resmi de kendi hostunuza yüklemenizde fayda var. İlerde hızlı resim üzerinden silinme ihtimali olabilir diye.