Açılır Facebook Öneri Eklentisi?

10-03-2014, 16:45:22

Arkadaşlar sabahtan beri arıyorum bir tane bile doğru düzgün bir Facebook öneri popup tarzı eklenti bulamadım. Bildiğiniz, kullandığınız, önerdiğiniz bir eklenti varsa çok makbule geçer.

11-03-2014, 00:38:50

#2

Mintik

Bu tarz popup eklentileri mi arıyorsun ? Sorunuz çok net değil, bu yüzden tam olarak ne gibi birşey aradığınızı anlayamadım. Tıklandığında sayfa içinde yeni çerçeve açılmasını istiyorsan linkte doğru bilgiler var. Resim, video yada başka bir sayfayı popup içinde aynı sayfa içine çekmene yarayacak eklentiler bulunuyor. Umarım içlerinden bir tanesi işine yarar.

11-03-2014, 09:55:19

#3

parabelyum

Mintik adlı üyeden alıntı: mesajı görüntüle

Bu tarz popup eklentileri mi arıyorsun ? Sorunuz çok net değil, bu yüzden tam olarak ne gibi birşey aradığınızı anlayamadım. Tıklandığında sayfa içinde yeni çerçeve açılmasını istiyorsan linkte doğru bilgiler var. Resim, video yada başka bir sayfayı popup içinde aynı sayfa içine çekmene yarayacak eklentiler bulunuyor. Umarım içlerinden bir tanesi işine yarar.

Ö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.

11-03-2014, 10:56:09

#4

Mintik

parabelyum adlı üyeden alıntı: mesajı görüntüle

Ö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.

11-03-2014, 18:04:13

#5

parabelyum

Mintik adlı üyeden alıntı: mesajı görüntüle

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.

Hocam çok teşekkür ederim bir hayli uğraşmışsınız. Daha kaliteli bir eklenti bulana kadar bu sistem işimi görecektir.