Missing Facebook’s Share Button?
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.
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.
Enter Facebook’s javascript library all.js and the good ol’ FB.ui function.
Here’s how it works:
Step 1: 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:
<script src="http://connect.facebook.net/en_US/all.js"> </script>
Step 2: Now you 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.
<script>
FB.init({ appId:'YourAppId', cookie:true, status:true, xfbml:true });
</script>
Step 3: At last, the fun stuff! Here’s the javascript function that lets you do your sharing:
<script>
function shareonfb() {
var fbobj = {
method: "feed",
link: "url of this page",
picture: "url of picture",
name: "The name of the page",
caption: "A caption for the share",
description: "A description of what's being posted"
};
FB.ui(fbobj);
}
</script>
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)
Step 4: Putting the link on your page. Put this code wherever you want the facebook button to appear on your page.
<a href='javascript:shareonfb();'> <img src='URLToPrettyFacebookButton' border='0' alt='Share on Facebook'/> </a>";
Step 5: Customizing! Want multiple Facebook buttons on your page? Just add some parameters to the shareonfb() function and use them to populate the fbobj.
Pretty cool, huh?
If you want to see it in action, go to
http://www.smithmag.net/work-myjob/story.php?did=230685
This is what that Facebook button is using.
I hope it’s helpful!
Want to comment? Hit me up on Threads or Facebook!
