CODEWITHSUNDEEP
facebookfacebook-graph-apishare
user1170949
user1170949

Reputation: 49

Facebook share button - custom image

I am trying to integrate facebook's share button into my page. I am using the following code:

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

This generates the image and the code for sharing. However I'm trying to use my own image for the share button. I am using the following code:

<a name="fb_share"><img src="fb.png" /></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

where fb.png is a custom image with the FB logo.

The problem is that my image shows along with the generic Facebook share image to the left... Do you know if there's a way to implement a custom image for the share button?

Thanks in advance!!

Upvotes: 2

Views: 9000

Answers (1)

user2428118
user2428118

Reputation: 8104

You should do a trick like this:

HTML:

<a id='share'><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
    type="text/javascript"></script></a>

CSS:

#share *{
   filter:alpha(opacity=0.1); 
   opacity:0.01;/*Hide Facebook button*/
}

#share{
  display:inline-block;

  /*The width and height of your image. Not bigger than the Like button!*/
  width: 10px;
  height: 10px;

  /*Your image*/
  background:url(fb.png);
}

Upvotes: 4

Related Questions