Take the 2-minute tour ×

I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?

share|improve this question
add comment

1 Answer

up vote 9 down vote accepted

Sharing something one facebook is quite easy, here is the HTML for my custom share button.

<div id="share_div">
    <div id="share">
        <a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">

Where all the {{variables}} are to be replace by correct value : fbapp_id is the id of your facebook application. link_url is a link attached to the shared content (like a link to your site) and share_message|urlencode is the message that is shared and it needs to be urlencoded.

Also here some css to style this like a real facebook button :

#share {
    border:1px solid #0D386F;
    width: 100px;

#share a.click {
    border-top:1px solid #879DC2;
    padding: 2px 10px;
    cursor: pointer;

But I let you the pleasure of customizing as you like, the important part being the href of the a tag

Does it answer your question ?

share|improve this answer
Btw if you want the number of shares just do : graph.facebook.com/YOUR_SHARED_URL .. for example for the huffington post page it would be : graph.facebook.com/http://www.huffingtonpost.com/sen-jon-tester/… –  dwarfy Apr 22 '11 at 8:08
Also some good button to share to anything, and you have a choice of different visuals that can be customized : addtoany.com –  dwarfy Apr 22 '11 at 8:10
Yes, it answered my question perfectly. I was looking for a more general idea, but arcain edited my question and decided I don't want to know about how to do this on twitter, only on facebook. Thank you! But your answer got me on the right track, thank you (no sarcasm this time :P )! –  Nicolae Surdu May 5 '11 at 20:33
add comment

Your Answer


