2010-04-17

Recently, it became necessary for me to add a "share on facebook" feature to a project I am working on. A quick web search for "facebook share api" turned up the Facebook Share API that gives example code for for formatting a URL to share data on Facebook.

The ony problem the Facebook share code is that the code doesn't work. A custom title for what is being shared get's overridden by the title of the page at the given URL. A bit more digging with my internet shovel turned up some information about URL and Title being sent as part of an array and the URL would be sent as p[url] and the Title would be sent as p[title].

With that in mind, I wrote the following JavaScript function to format a URL and Title and share them on Facebook.

function shareOnFacebook(share_title,share_url) {
    //encode the share_title
    t=encodeURIComponent(share_title);
    //encode the share_url
    u=encodeURIComponent(share_url);
    //determine the target url to open
    target_url='http://www.facebook.com/sharer.php?s=100&p[title]='+t+'&p[url]='+u+'&t='+t;
    //open the target
    window.open(target_url,'share','toolbar=0,status=0,width=600,height=400');
}

Now quit reading, and go share some useless information of Facebook.

By the way, there is a 100 character limit for the title.

Update June 18 2010: Since both images and description have been asked for... The following function will allow the user to also set the image and description (which facebook call subject for some asinine reason)

function shareOnFacebook(title,url,desc,image) {
    t=encodeURIComponent(title);
    d=encodeURIComponent(desc);
    u=encodeURIComponent(url);
    i=encodeURIComponent(image);
    share_url='http://www.facebook.com/sharer.php';
    share_url+='?s=100&p[title]='+t+'&p[summary]='+d+'&p[url]='+u;
    share_url+='&p[images][0]='+i;
    share_url+='&t='+t+'&e='+d;
    var myWindow = window.open(share_url, 'sharer', 'toolbar=0,status=0,width=626,height=436');
}

Well there you have it, I hope it works for you.

PS. If you are so inclined, you could buy me a cup of coffee. hint hint wink wink

Comments
2010-05-06 neuholger:
Great, this script is working on my page. But how can I add an Image?

All the tests for the meta Tags didn't work including the
<link rel="image_src" ...
2010-05-06 neuholger:
Yeah, I found a solution!
With that solution, you can also integrate several thumbnails.

// Javascript for ShareOnFacebook Buttons
function shareOnFacebook(share_title,share_url,icon_url) {
//encode the share_title
t=encodeURIComponent(share_title);
//encode the share_url
u=encodeURIComponent(share_url);
//encode the icon_url
i=encodeURIComponent(icon_url);
//determine the target url to open
target_url='http://www.facebook.com/sharer.php?s=100&p[title]='+t+'&p[url]='+u+'&t='+t+'&p[images][0]='+i;
//open the target
window.open(target_url,'share','toolbar=0,status=0,width=600,height=400');
}
2010-05-06 jezra:
Yea! that's the spirit.
Thanks for posting the solution to use images. It is the visual aspect of sharing that really packs a punch
2010-06-17 Anonymous:
Any idea how to add a more elaborate description ? except from the title ?
2011-03-22 Rich Jaffke:
I was going to contribute but when I clicked the "cup of coffee" link the page has no way to contribute.
Name:
not required
Email:
not required (will not be displayed)
Website:
not required (will link your name to your site)
Comment:
required
Please do not post HTML code or bbcode unless you want it to show up as code in your post. (or if you are a blog spammer, in which case, you probably aren't reading this anyway).
Prove you are human by solving a math problem! I'm sorry, but due to an increase of blog spam, I've had to implement a CAPTCHA.
Problem:
4 minus 4
Answer:
required
subscribe
 
2016
2015
2014
2013
2012
2011
2010
December
November
October
September
August
July
June
May
April
March
February
January
2009
December
November
October
September
August
July
June
May
April
March
February
January
2008