Face It! Like Buttons

Facebook's Like button plugin allows your site's visitors to Like your pages. This places a status update on their timeline, which spreads the word about your site.

Having Like buttons on your site's pages can help grow your business.

You can put the buttons anywhere you like on your pages. Simply drag a Social Block to each page for each button (or drag the block to a Sitewide Dot if you want the button on every page of your site).

Creating Your Facebook App

Directions for Use
  • Go to the Developers page and log into your Facebook account. Hover over My Apps in the top right, and click on Add a New App.
  • In the overlay, type in the Display Name of your app. Enter your Contact Email address. Click on Create App ID. Enter the security text characters.
  • From the left menu, click Settings >> Basic.
  • Skip the Namespace field. Add your site's privacy policy URL in the "Privacy Policy URL" field.
  • Skip the "Terms of Service URL" field. Choose a Category.
  • Click Save Changes at the very bottom of the page.
  • At the top of the page, next to "Status: In Development," click the off button to turn it on and make your App public.
  • In the "Make App Public?" popup, click Confirm.

Before you can create the code for your Like buttons, you must create your app.

Go to the Developers page and log into your Facebook account. Hover over My Apps in the top right, and click on Add a New App.

An overlay will appear. Type in the Display Name you want to give your app. Enter your email address.

Click on Create App ID. Enter the security characters.

From the left menu, click Settings >> Basic.

Skip the Namespace field. Add your site's privacy policy URL in the "Privacy Policy URL" field.

Skip the "Terms of Service URL" field. Choose a Category. This page explains the categories...

https://developers.facebook.com/docs/apps/register/categories

Click Save Changes at the very bottom of the page.

At the top of the page, next to "Status: In Development," click the off button to turn it on and make your App public.

In the "Make App Public?" popup, click Confirm.

Now you can create your Like button(s) and collect the code.

Creating Your Like Buttons Code

Directions for Use
  • Click on Like Button in the sidebar on the left.
  • Click on the Web button.
  • In the Like Button Configurator, enter your site's full domain name, ending with a /, into URL to Like.
  • Select your layout from the Layout menu.
  • Select the Width of the plugin, if this button is using the standard (default) layout. This means the width of the button along with the text, and friends' faces (if you opt to display them).
  • Select the Action Type -- either "like" or "recommend."
  • Select the Button Size -- either "small" or "large."
  • Uncheck the checkbox for Show Friends' Faces if you don't want them to appear with the button. This is important for the Nav or Extra column.
  • Uncheck the checkbox for Include Share Button, if desired.
  • Click on Get Code to open a small window with your code options.
  • If you have more than one app, select the correct one in Step 1 of the overlay. Copy the App ID number (appId=) located in the code in Step 2. Paste it into a text document. Highlight the code in the third text box (Step 3), then copy it. Paste it onto a new line in the same text document.
  • Repeat the process for additional Like buttons, if desired.

To make the Like buttons work, you need to create and obtain code, which you do in the Like Button Configurator. If you're coming back to complete this task, or want to create more buttons, you can go directly to the Like Button Configurator by clicking on this link.

https://developers.facebook.com/docs/plugins/like-button

You can customize your FB code, depending on the options you select (view the changes below the options, as you change them)...

When you're done, click on Get Code. A small overlay will appear.

If you've created buttons or commenting for more than one site, be sure to select the relevant site in the Step 1: Choose your App ID and Language menu at the top of the overlay.

You may see a warning that your app is in Development Mode and not available to the public. Ignore that message.

Highlight and copy the appID number in the Step 2 box (you'll find it in the line that starts "//connect" -- it will look something like this... 998919265405465). Paste the App ID into a text document. Then highlight and copy all the code in the Step 3 box. Copy this code and paste it onto a new line in the same text document.

Repeat this process for each button that you want to add to your pages, changing the button type and the width if necessary. (You don't need to copy the appID number each time. You need it only once.)

Now return to Face It! to paste the code snippet(s) into the text box(es) there.

Important Note: Site Likes vs. Page Likes

If you want to have a button for Page Likes (individual pages of your site) and another button for Site Likes, you'll need to have two sets of button code.

But then, for Location, place your Site Like buttons in generic locations (e.g., at the top of the left column). Put your Page Like buttons in the Content Column, at the end of the content (before the Socialize It! button bar).

Generally, it's better to use a Site Like button if you're just starting out or have relatively low traffic. As traffic and number of likes grow, and your comfort level grows, add Page Like buttons, too.

Building Your Like Buttons

Directions for Use
  • Click on Yes to open the tool for Facebook Like Button 1.
  • Copy the code for the (first) Like button from your text document, and paste it into the text box.
  • Set the location for this button. Note: This will not affect where you can locate the button on your pages when using BB2's Social Block.
  • Select Page if the button is for Liking a page. Select Site if the button is for Liking your site.
  • Repeat the above steps with Facebook Like Button 2 and 3 (if desired).
  • Click on the Face It! button to save your settings.

Now that you have your Like button code(s), it's time to build your Like button(s) in Face It!.

  1. For Facebook Like Button 1, click on Yes. That will open the remainder of the tool for that button.

  2. Go to your text document, copy the code for the (first) button, and paste it into the text box for Button 1 in Face It!.

  3. Set the location for this button. Note: This will not affect where you can locate the button on your pages when using BB2's Social Block.
  4. If you want the button to be for Page Likes, select Page. If you want the button for Site Likes, select Site.

If you plan to have more than one button on your pages, repeat the process above with Facebook Like Button 2 and 3.

Once done, click on the Face It! button at the bottom of the page to save your settings.

Tip