Take the 2-minute tour ×

How can I show the Facebook "like" link on an image? I would like the Facebook "like" button to only load when a mouse is over the image.

I had something in mind like appending the iframe on the image as the mouse is over the image as that would prevent slow down if there are many images on the page.

How can I do something like this with/without jQuery?

share|improve this question

3 Answers 3

Can't you simple load this like button into div and hide img/show div on mouseover and show img/hide div on mouseout ?

share|improve this answer
no, because the issue with haveing a like button is that it loads in the DOM (http request). The objective is to prevent that from loading and do it on demamd –  arkjoseph Feb 2 '12 at 22:40
<div id="like" style="display:none; ">
 <!-- FB code like here -->
<img src="x.gif" id="im" />
share|improve this answer
would that enable lazy loading for the facbook like iframe? I suspect that it would still load all the facebook like button in the background. What I want is to be able to append the code dynamically as the widget is hovered over. This means that only when the mouse is over the image, the like button iframe would be loaded dynamically. –  Anush Aug 12 '11 at 17:24

Load the Facebook script as normal, but don't include any button code yet. Then, onmousover, write your div tags for the Facebook button, and initialize the button by calling:


That will search the entire DOM and initialize every button.

Alternatively, to only evaluate only a portion of a document, you can pass in a single element.

share|improve this answer

Your Answer


