32

Sometimes, clients want to have a custom "facebook button". I mean with a different image and design.

I used to work with sharer.php :

<a id="fb-share" style='text-decoration:none;' type="icon_link" onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=foo&amp;p[summary]=bar&amp;p[url]=https://www.foobar.com/&amp;p[images][0]=https://www.foobar.com/thumb.gif','sharer','toolbar=0,status=0,width=580,height=325');" href="javascript: void(0)">
<img src="img/share.gif" width="62" height="18" alt="Share"/>
S</a>

But it seems it doesn't work very well since facebook has deprecated the Share button. Instead, we have to use the "like button".

So is it possible to have a custom like button with a custom image ?

I've seen on the facebook api page a generator to create the button but i would like to know if it is possible to have a custom button with a different image ?

Sébastien Gicquel
  • 4,227
  • 7
  • 54
  • 84

1 Answers1

45

It's possible with a lot of work.

Basically, you have to post likes action via the Open Graph API. Then, you can add a custom design to your like button.

But then, you''ll need to keep track yourself of the likes so a returning user will be able to unlike content he liked previously.

Plus, you'll need to ask user to log into your app and ask them the publish_action permission.

All in all, if you're doing this for an application, it may worth it. For a website where you basically want user to like articles, then this is really to much.

Also, consider that you increase your drop-off rate each time you ask user a permission via a Facebook login.

If you want to see an example, I've recently made an app using the open graph like button, just hover on some photos in the mosaique to see it

Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
  • Thank you. You answer is clear. Your example is smart. But, in my case, it is for a website so, as you suggest, i won't use it. Is there an alternative to the "like button" or is it the only thing i could use to share a web page on Facebook ? – Sébastien Gicquel Feb 10 '13 at 20:45
  • 2
    This is the most relevant (and easy) usage. It's well known from user. But, for sharing a web page, you could also use the [Feed dialog](https://developers.facebook.com/docs/reference/dialogs/feed/) – Simon Boudrias Feb 10 '13 at 20:57
  • I'm actually trying "Feed dialog". It seems to be the same thing as "sharing" and i think i could use it. Do you know the purpose of the property app_id ? – Sébastien Gicquel Feb 10 '13 at 21:41
  • I'm not sure, but it's used somehow to authenticate/initialize your app. – Simon Boudrias Feb 10 '13 at 21:50
  • So, i've tried and it's working on a website but i think it should not be used on a website, only on a facebook app i guess... – Sébastien Gicquel Feb 10 '13 at 21:57
  • However you are wrong about users unliking a page by liking it twice, trying to re-publish a built-in Like action on an Open Graph object that has already been “liked” by the user in the past will result in the following error { "error": { "message": "(#3501) User is already associated to the object with the Like action type. Original Action ID: 396497300390731", "type": "OAuthException", "code": 3501 } } – Neo May 06 '13 at 21:31
  • 2
    @Neo You must have misread, I never implied reposting the same action would delete the like. – Simon Boudrias May 06 '13 at 21:42
  • @SimonBoudrias I did misread... I read " so a returning user will not be able to unlike " thinking that you meant clicking on like again will unlike it :D – Neo May 07 '13 at 13:20