Menu
I want to reduce page loading time. Social icons (Facebook Like, Twitter follow etc) takes up a lot of speed.
I want to display a static image of the like buttons, and on mouse hover, display the actual buttons.
I can do this easily by loading the real buttons in a hidden div that I show() on hover, but this means that the content will be loaded regardless.
Is there any way to only load the buttons on hover?
EDIT:
For example, when user hovers over image, it loads up Facebook like button:
Top of <body>:
<div id="fb-root"></div>
<script>(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/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Display button:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
231
Put an image where the button should be, add a hover event, and in that hover event: hide the image, and run whatever code is supplied for the social media-button. The button html-element itself doesnt load any code
Updated with this example, put it in a file and test on your server (Note! jsfiddle does not show the like button, it gives security errors in the console, so run it on your own server)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
//hover event for button
$("#fb-img").hover(function () {
//remove picture
$(this).remove()
//run social code
(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/en_US/sdk.js#xfbml=1&appId=171501779696780&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
});
</script>
<div id="fb-root"></div>
<img id="fb-img" src="https://www.seoclerk.com/pics/want9745-10lgy11385380512.jpg" style="width:200px;height:auto">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
And heres a working example of the twitter button:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
//hover event for button
$("#tw-img").hover(function () {
//remove picture
$(this).remove()
//run social code
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
})
});
</script>
<img id="tw-img" src="http://www.southernfriedscience.com/wp-content/uploads/2011/12/logo_twitter_withbird_1000_allblue.png" style="width:200px;height:auto">
<a href="https://twitter.com/share" class="twitter-share-button"></a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
