Do you like Facebook’s Like button? I don’t, or at least not in all situations. Sometimes, all I want to do is let help the reader post to their wall. Especially in cases where there are multiple things listed on a page.<\/p>\n
Facebook’s deprecated Share button, though, has never worked very well for me, and my clients often don’t want the “ShareThis” branding on their posts.<\/p>\n
Enter Facebook’s javascript library all.js and the good ol’ FB.ui function.<\/p>\n
Here’s how it works:<\/p>\n
Step 1: <\/strong>You’re going to need to include and initialize the facebook javascript. You can do that asynchronously if you want to, but I’m just going to show you the static way. FB recommends this go just after the <body> tag of your HTML:<\/p>\n Step 2: <\/strong>Now\u00a0you have to initialize the script. Put this just below the script from Step 1. Fill in your Facebook App Id where it says “YourAppId.” If you need help getting an App Id, post a comment and I’ll reply.<\/p>\n Step 3:<\/strong> At last, the fun stuff!\u00a0Here’s the javascript function that\u00a0lets you do your sharing:<\/p>\n See how that works? You’re initializing an object and passing it to FB.ui. The key is the method (“feed”), which tells Facebook to prompt the user to post something on their wall. The other fields are all the data that you’re using to pre-fill that something. Make sense? It’s kind of easy once you see how. Those urls, by the way, should be actual urls (i.e., http:\/\/\/www.something.com)<\/p>\n Step 4:<\/strong> Putting the link on your page. Put this code wherever you want the facebook button to appear on your page.<\/p>\n<script src=\"http:\/\/connect.facebook.net\/en_US\/all.js\"> <\/script><\/pre>\n
<script>\n FB.init({\u00a0\u00a0\u00a0appId:'YourAppId', cookie:true,\u00a0\u00a0status:true,\u00a0\u00a0xfbml:true });\n <\/script><\/pre>\n<script>\nfunction shareonfb() {\n var fbobj = {\n method: \"feed\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n link: \"url of this page\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n picture: \"url of picture\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n name: \"The name of the page\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n caption: \"A caption for the share\", \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n description: \"A description of what's being posted\"\n };\n FB.ui(fbobj); \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n}\n<\/script><\/pre>\n<a href='javascript:shareonfb();'>\n<img src='URLToPrettyFacebookButton' border='0' alt='Share on Facebook'\/>\n<\/a>\";<\/pre>\n