ethiopian news: Tutorial: How to Add a Facebook Share Button to your Website Pages

If you're not on the HyperArts Blog, CLICK HERE.

In a previous post, Bill Dailey provided detailed instruction on how to add a "classic" Facebook Share Button to your custom iFrame tabs, and replicate the Share Button previously done with the <fb:share-button> FBML tag.

In this post, I show you how to add the same classic Share Button to your own Web pages, so that people can share your website content on Facebook. (View and test this example.)

STEP 1: Get a Facebook App ID for the domain the Share Button will live on.

To add the Share Button to your website, Facebook requires that your domain have an "App ID" or "appId" which it says is "a unique identifier for your site that ensures that we have the right level of security in place between the user and your website."

Read my tutorial on getting a Facebook App ID for your website.

STEP 2: Add the Facebook JavaScript SDK to your Web page.

The code that Facebook provides for your Web page, to load and initialize the JavaScript SDK, should be added within the <body> ... </body> tags of your .html, .php or .asp file.

Use the Asynchronous JavaScript SDK Code

On its JavaScript SDK page, Facebook provides two ways to import the JavaScript SDK: 1) Synchronously (loads in the order it appears in your code) or 2) "Asyncronously" where other elements on your page will load even if the SDK for some reason doesn't load. Facebook recommends the Asynchronous method, and you'll definitely want to use this method or your Share Button won't work in Internet Explorer.

Here is the Asynchronous code to add to your Web page:

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script>

NOTE: Make sure you replace 'YOUR APP ID' with your actual App ID for your website. You can always find it on the Facebook Application Page. (When logged in to Facebook, you'll see all applications you've created under your personal profile.)

STEP 3: Add code to load the jQuery library on your Web page

Next, you need your Web page to load jQuery, a JavaScript library that simplifies many JavaScript-related tasks.

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

Just add the following code to your Web page:

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

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

Now that you have loaded the Facebook JavaScript SDK and jQuery, we can define the Share Button dialog using some jQuery and the Facebook function fb.ui. Insert the following code on your Web page:

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 popup dialog:
Facebook Share Dialog

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

Name: The text that appears on the first line of the Share dialog, below the personalized message box. It is hyperlinked to the URL you set for the "link" value. Maximum displayed characters: 99;
Link: The URL you want to share when users click the Name field;
Picture: The URL of the image you want to display with the post on your Wall/News Feed. In the above example I used a 90x90 pixel image, but Facebook seems to allow some flexibility around this image size. Make sure you check how your image displays in your News Feed!
Caption: This text displays under the Name/Link. Maximum displayed characters: 100;
Description: This text displays under the Caption. Maximum displayed characters: 270, followed by a "See more" link to show the rest;
Message: This field allows you to pre-populate the personalized message box at the top of the Share dialog. Facebook would prefer that you don't pre-populate the message field as they want the user to enter a personalized message.

The small "H" logo and "via HyperArts" ? just below the green "heart" image ? represent the small icon you set for the Facebook application you created to obtain your App ID; and "HyperArts" is the name of that Facebook application. (See my tutorial on creating a Facebook App to get an App ID for your website.)

STEP 5: Add a text or image link that triggers the Share dialog

You can launch the the Share dialog using either linked text or an image. We wanted to create the "classic" Share Button to which users have become very accustomed, so we used an image, creating a graphic that replicates 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 a user clicks on that button, it will pop up the Share dialog box.

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).

Facebook Share Button Wall Post

View a live example of our Share Button.

You can see an example of this code in action here.

Download the Sample Code

Download our Facebook Share Button code for our Share Button Example to get you started. Make sure you update the APP ID, text, and images as needed!

Follow me on Twitter