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>
webdeyim 