How to create custom sharing buttons

Question

I always wanted to add Facebook sharing buttons to my applications, but the problem is that they all look different. I see sites like this that have customizable sharing buttons. Does anyone know a good tutorial or have any pointers on how to handle this?

Answer 1

Sharing something on one facebook is pretty simple, 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"> Share </a> </div> </div> 

Where all {{variables}} should be replaced with the correct value: fbapp_id is the identifier of your facebook application. link_ur l is a link associated with shared content (for example, a link to your site) and share_message|urlencode is a message that is shared and needs to be rooted.

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

 #share { border:1px solid #0D386F; background-color:#5D7DAE; height:24px; width: 100px; } #share a.click { font-size:13px; font-weight:bold; text-align:center; color:#fff; border-top:1px solid #879DC2; background-color:#5D7DAE; padding: 2px 10px; cursor: pointer; text-decoration:none; width:80px; display:block; } 

But I give you the pleasure of customizing as you like, the important part is the href tag

Does your question answer your question?