We take pride in your success. We let our positivity drive us, day in and out. Talk to us at Mindfire to know us more.

Software Technology Tips

Home » Tips » JavaScript » Creating a custom "Share on Facebook" button

At the present date you are unlikely to come across any content page that does not provide option to save the URL in Social Bookmarking sites or Social Networking sites. As a developer adding these functionalities is easy as there are a number of free widgets available that can be added without a lot of fuss. Further, these widgets usually contain a collection of social bookmarking buttons. However, there may be instances when you want a few social bookmark buttons only but the gadget you are using does not contain the particular bookmark button. Recently, I needed to customize my social bookmark buttons gadget to include Facebook button which it originally didn't.

So here is a short tip on how to add "Share on Facebook" button and also customize popular social bookmarking widgets. Since all Social Bookmarking and Social Networking sites offer more or less the same mechanism this tip gives you a general overview on how your content is shared on Social Web.

 

The easiest way to add Facebook share button would be to visit  http://www.facebook.com/share_partners.php and copy the code and paste it in your  webpage after replacing the text "url" with the actual URL of the page you want to  share. If it is dynamic content, you can use the variable or object name. 

<script>function fbs_click()
{u=location.href;t=document.title;window.open
('http://www.facebook.com/sharer.php?u='+
encodeURIComponent(u)+'&t='+encodeURIComponent(t),
'sharer','toolbar=0,status=0,width=6
26,height=436');return false;}</script>
<a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank"> <img src= "http://b.static.ak.fbcdn.net/images/share/
 
The problem I faced with the above approach is that I wanted to modify a widget to add Facebook share in place of another button, say the button associated with furl. But in this case we are creating a separate share on Facebook button and not modifying the widget. So we will take a look at the alternative technique.
 
From the above snippet we know that we have to access Facebook Web API to share  the link on it. So what I would do is display a facebook icon and pass the URL I want to save to http://www.facebook.com/share.php?
 
 
<a href='http://www.facebook.com/share.php?u=http://www.mindfiresolutions.com'>
<img alt='Facebook'src='http://i591.photobucket.com/albums/ss358
/danishctc/blogres/fbook24.jpg'/></a>
 
Now let us implement the code given above...Click on the Facebook icon to see how it works;)
 
Facebook


Related Tags:

Javascript, Social Bookmarking Button

Author: Danish Ahmed

top

JavaScript

Let us Connect!

privacy

copyright (c) Mindfire Solutions 2007-2012. Login