Facebook Custom Share Pop-Up in IFRAME Tabs Using jQuery and the Javascript SDK

In a previous post, we showed you the CSS necessary to make custom Share link in an FBML app or application tab. Since FBML is being deprecated, this obviously won’t work anymore.

You can, of course, use the standard Facebook Share widget, but that leaves you with few options with respect to the look and feel of the share link. Fortunately, you can get the Facebook modal-style popup window with your own custom Share link image or text using a little bit of JQuery and the Facebook Javascript SDK.

Include the Javascript SDK

If you’re already using the Javascript SDK in your application, you don’t need to (and in fact should not) include it again. But if you’re not using the Javascript SDK, just stick this bit of code down before the closing tag on your HTML page:

[javascript]

FB.init({
appId : ‘YOUR APP ID’,
});
[/javascript]

Obviously, the YOUR APP ID text should be replaced with your actual application ID.

Add jQuery

Once again, if you’re already using jQuery in your app, you should not include it again – but if you’re not, place this line of code in between the tags of your HTML page:

[javascript][/javascript]

Add the Javascript SDK Share functionality

This goes in the head of your HTML page, and simply sets the parameters that you’re going to be passing to your custom Share link, and associates it with a CSS id (in this example, fbsharebutton) so that jQuery can use it.

[javascript] $(document).ready(function(){
$(‘#fbsharebutton’).click(function(e){
e.preventDefault();
FB.ui(
{
method: ‘feed’,
name: ‘FBMHell’,
link: ‘http://fbmhell.com’,
source: ‘https://www.youtube.com/v/rp4UwPZfRis’,
picture: ‘http://fbmhell.com/files/2010/07/Photo-on-2010-06-03-at-22.00-4-crop1-150×150.jpg’,
caption: ‘Taking the Hell out of Facebook Development’,
description: ‘There is some really helpful stuff here!’,
message: ”
});
});
});
[/javascript]

The message parameter has been (or is being) deprecated by Facebook, so it’s not wise to rely on it here. Replace the sample FBMHell text with text that makes sense for your site or application. The picture parameter is the url to the 100×100 image that will be included with the shared post in the newsfeed.

Note that the source parameter (which is optional) will allow you to embed video content from a whitelisted source, like YouTube, directly into the newsfeed on the share.

Now all that’s left is to create the link. You can use text or an image, it doesn’t matter, as long as you include the CSS ID of fbsharebutton, since that’s the CSS id we used in the jQuery code above.

[html][/html]

or to use text as a link:

[html]Click me to share[/html]

This will result in the familiar Facebook-styled modal popup window when the image or link is clicked.