Tutorial: Add a Share Button to your iFrame Tab Application

NOTE: You will need to replace the 'YOUR APP ID' with your actual application ID, which you can find on your application page at facebook.com/developers.

STEP 2: Add code to load the jQuery Library to your App

Next, you need your app to load jQuery, which is a JavaScript library that simplifies many JavaScript-related tasks. You could also use basic JavaScript, or another library such a MooTools, but that is beyond the scope of this tutorial.

I like to load the jQuery library from Google as it loads quickly and many people will already have it cached in their browser history.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>


STEP 3: Add some jQuery and fb.ui code to display the Share dialog box

Now that we have the Facebook JavaScript SDK and jQuery loaded, we are ready to define the Share popup dialog using some jQuery and the Facebook function fb.ui. Insert this code into your file:

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'HyperArts Blog',
link: 'http://hyperarts.com/blog',
picture: 'http://www.hyperarts.com/_img/TabPress-LOGO-Home.png',
caption: 'I love HyperArts tutorials',
description: 'The HyperArts Blog provides tutorials for all things Facebook',
message: ''
});
});
});
</script>

This code tells jQuery to attach a Share dialog to the DIV in your code with the ID of "share_button". You can insert multiple share buttons on a page by repeating this code, making sure you use a unique ID for each (eg #share_button1, #share_button2).

This code will create this dialog:

You can customize the text and image in the Share dialog and post by changing these values:

• Name: This is the text that appears on the first line of the Share and is hyperlinked to your link;
• Link: This is the hyperlink that you want to share;
• Picture: This is the URL of the image that you want displayed along with the post on the Wall/News Feed. I used an image that 70 x 70 in this example, but Facebook appears to allow some flexibility around image size that you are sharing. Just make sure you test out what you image ends up looking like on the feed.
• Caption: This is the first line of text after the Name/Link;
• Description: This is the text that appears under the caption. Use it to provide incentive for why users should click on it.
• Message: This field allows you to pre-populate the message box at the top of the dialog. Facebook normally does not recommend that you pre-populate that field since they want the user to enter a personalized message.

STEP 4: Create a link/button to trigger the dialog

You can launch the the Share dialog using any link or button. In our case, we created a graphic that looks like the classic "Share" button:

Just insert the link/image in your index file and add the ID "share_button"

<img src = "share_button.png" id = "share_button">

When the user clicks on that button, it will cause the Facebook dialog to be displayed.

Once the user fills in their message and clicks the "Publish" button, the post will appear on their Wall and may appear in their friends' News Feeds (depending on their settings).

STEP 5: Control the Cursor Style with CSS

To add a custom cursor to the Share Button with CSS:

• Add this style to your stylesheet:

  img#share_button {cursor: pointer;}

• Or inline the style on the page:

  <style type="text/css"> img#share_button {cursor: pointer;} </style>

Adding Multiple Share Buttons to a Single Tab

You can do this by replicating the <img /> tag, changing the

And replicating the JavaScript just below it, changing:

If you're also implementing the CSS to control the appearance of the cursor (as described above, in Step 5), you need to change:

to

Obviously, modify IDs for each additional Share Button!

View a live example of our Share Button

You can see an example of this code in action on the HyperArts Examples page. It has two share buttons.

Downloading the code

You can also download the code we used to get you started. Just make sure to update the APP ID, text, and images as needed.

Troubleshooting the Share Button

API Error Code: 191 Popup Dialog

If you get the "API Error Code: 191" popup dialog error:

when using an embedded Share Button or other feature that requires the Facebook JavaScript SDK, it's may be because you haven't specified the "App on Facebook" URLs. Read this for more details.

Please post your questions in the comments section below. Happy coding!

Technorati Tags: Facebook application tab, facebook programming, Facebook tabs, share button