Twitter – Facebook Butonu Yavaş Yüklenme Sorunu [Page Load Time]


facebook-like facebook-tavsiye twitter-takip twitter-tweet

Sayfalarımızın olmazsa olmazı sosyal medya butonları beraberinde büyük bir sorun getiriyorlar. Bazen o kadar geç geliyorlar ki sayfalarımızın yükleme süresini inanılmaz artırıyorlar. Bu da hem maliyet hem seo açısından olumsuz etki hem de ziyaretçiler için olumsuz izlenim oluşturuyor.

Facebook ve Twitter kendi scriptlerini çağırdıkları için takıldıkları zaman 30 saniye boyunca beklemeye devam ediyorlar. Bu da kabul edilebilecek bir süre değil.

Bu istenmeyen süreden kurtulmanın en mantıklı yolu başta scriptleri yüklememek. Butonlarımızın yerine de buton resimlerini koymamız gerekli. Buton resimlerimizin üzerine gelindiği zaman scriptleri çağırıyoruz. Resimleri gizleyip gerçek butonların oluşmasını sağlıyoruz.

Bu sayede sayfamız scriptleri beklemeden yüklenmiş oluyor. Eğer ziyaretçi paylaşmak isterse yükleniyor. Tüm olumsuz etkilerinden korunmuş oluyoruz.

Örnek çalışma:


<table border=0 width=140 cellspacing=0 cellpadding=0>
<tr><td height=30><div id="fb-like" class="fb-like" data-href="http://www.facebook.com/xxx" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" style="background:url('/images/facebook-like.png') no-repeat;"><img style="cursor:pointer;" onmouseover="javascript:runfb();" src="/images/facebook-like.png" /></div></td></tr>
<tr><td height=30><div id="fb-recommend"></div><fb:like send="false" layout="button_count" width="90" show_faces="false" font="lucida grande" action="recommend"><img style="cursor:pointer;" onmouseover="javascript:runfb();" src="/images/facebook-tavsiye.png" /></div></fb:like></td></tr>
<tr><td height=30><a id="tw-follow" href="https://twitter.com/xxx" style="font-size:12px;" class="twitter-follow-button" data-show-count="false" data-lang="tr" data-show-screen-name="false"><img style="cursor:pointer;" onmouseover="javascript:runtw();" border="0" src="/images/twitter-takip.png" ></a></td></tr>
<tr><td height=30><a id="tw-share" href="https://twitter.com/share" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-size="small" data-count="true"><img style="cursor:pointer;" onmouseover="javascript:runtw();" border="0" src="/images/twitter-tweet.png" ></a></td></tr>
</table>

<script type="text/javascript">

function runtw() {
document.getElementById("tw-follow").innerHTML = "";
document.getElementById("tw-share").innerHTML = "Tweet";
var pw = document.createElement('script'); pw.type = 'text/javascript'; pw.async = true;
pw.src = '//platform.twitter.com/widgets.js';
var sw = document.getElementsByTagName('script')[0]; sw.parentNode.insertBefore(pw, sw);
}
function runfb() {
document.getElementById("fb-like").innerHTML = "";
document.getElementById("fb-recommend").innerHTML = "";
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1&appIdId=APP_ID";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
}
</script>

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s