Face It! Like Buttons for BB1 Pages
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
- 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
- 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)...
-
Click on Like Button in the sidebar on the left. Then click on the Web button.
-
Enter your site's full domain name, starting with http://www and ending with a / (e.g., "http://www.anguilla-beaches.com/"), into URL to Like.
-
Select your Layout...
-
standard
-
box_count
-
button_count
-
button
Note: The Face It! tool requires that you set a location for the button. However, this will not affect where you can place the buttons with BB2's Social Block.
If you want the box_count, button_count or button Like button in a narrow column (i.e., the Nav Column or Extra Column), use the default width when setting up the button in Facebook. The default width will always fit the column, even in the mobile view.
-
-
Enter the Width of the button if you're using the standard layout for this button (leave this empty for the default width). Use the standard layout only in the Content Column.
Before you set widths, read the FAQ about the different layout types, and their minimum and default widths.
-
Select the Action Type from Like and Recommend.
-
Select the Button Size from small and large.
-
Uncheck the checkbox for Show Friends' Faces if you don't want this option. It's a good idea to uncheck this because it takes up more space and it's unlikely that visitors will see any faces they know. If the button will go in the Nav or Extra column, uncheck it.
-
Uncheck the checkbox for Include Share Button if you do not want to use it in addition to the Like button. (Facebook recommends having both. If you do include the Share button, you may not be able to use the button_count in the Nav or Extra column.)
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
- 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!.
-
For Facebook Like Button 1, click on Yes. That will open the remainder of the tool for that button.
-
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!.
- 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.
-
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
-
Where you place your button(s) is important.
A good place for Site Like buttons is either above or below your vertical NavBar (or both). Why? Because navigation is usually considered part of the site, rather than part of a page. So a visitor would be more likely to Like the site from the left column.
The end of the Content Column, however, is an excellent place for a Page Like button. (If you also choose to add Commenting, that feature will appear after the Like button and just before your Socialize It! button bar.) Your visitor will have just finished reading your OVERdelivering, high-value content. That's the best time for a visitor to Like and/or comment on a page.
The Extra Column is an alternate good option for a Site Like button if you're using that column for mini-site navigation.
Although you have the option to put any of the three button types at the top of the Content Column of your pages, it's not the best location. Your visitors have yet to read your content, so they don't know if they want to Like it.